海康WEB3.3控件开发包 V3.3 前端vue项目调用实时监控画面

公司业务迭代, 需要前端vue项目里增加一个查看实时监控模块, 这个需求是之前离职的前端小哥没有研究明白的, 现在落在了我的肩上, 压力还是有的. 但是压力归压力, 问题还是要解决的.

一、调研设备和方案

第一步: 调研大佬们已经实现的方案, 找设备对接. 公司后端大佬提出用官方SDK稍加修改即可, 难度并不大, 那么首先看海康官方平台:

海康开放平台

可以看到有三个版本, 而且网上搜了一圈, 实现过的都是3.0和3.2的, 其中3.0不支持新版浏览器, 3.2对设备又有需求(需要支持websocket), 这个一定要注意; 我手上只有一个最基本的枪机摄像头, 咨询过客服, 也不支持websocket; 于是乎, 只能自己踩坑最新版的3.3.

摸索了几天, 过程比较痛苦, SDK是原生JS和HTML, 移植到vue中, 调用webVideoCtrl.js这个库时有一个报错无法解决, 求助大佬调试了很久, 甚至研究到了js代码模块化, 依然无法解决.

于是转换思路, 决定将不再将代码改造集成到vue中，而是直接部署demo页面，与vue项目相互独立，在vue中跳转到demo页面，传入登录设备所需的四个参数即可（设备的ip，端口号，用户名，密码）。

二、设备对接和后台支持

实现这个需求当然离不开对接设备测试，这里有两种方式，第一个是直接连设备，网线一头插摄像头，一头插自己的电脑，将摄像头的ip设置为和电脑在一个网段中，在浏览器输入摄像头的ip和端口，即可进入海康平台，查看摄像头画面和相关功能；第二个需要后台支持，由后端大佬将某个摄像头映射到公网，在浏览器输入该公网ip和端口即可查看，道理和直连是一样的：

1. 输入摄像头ip和端口，打开海康平台页面，输入设备用户名和密码登录：

2. 登录后的页面：

三、海康WEB3.3控件开发包demo对接摄像头

解压3.3版本的SDK，开发文档、插件安装、nginx配置等, 开发包里都有明确说明，不再赘述，本方案用到的核心是demo文件夹，有以下内容：

打开index.html, 即可看到demo的内容:

输入IP, 端口号, 用户名, 密码, 点击登录, 登录完毕后, 点击开始预览:

这里使用的是后端映射到公网的摄像头，这个当然更方便，而且开发完成后演示需求也可以直接调用公网的画面，测试各按钮功能也是OK的，右侧的信息框都可以展示出操作信息。

四、部署demo页面以及代码实现

我这里前端部署是之前配置好的，是nginx一个总的.conf配置文件, 运行各子系统在conf_d的配置文件, 当然事先也要准备好服务器, 打开端口号进行部署, 我用的是termius, 很方便, 可以直接本地拖拽到服务器.

可能部署页面是由运维或者后端来负责, 我这里都自己搞了.

我们需要修改的是demo.js, demo.html以及对应的demo.css, JS实现自动登录并预览画面, 加入一些信息提示和报错的alert弹窗, 只展示视频插件的画面即可, 改完代码后, 部署demo页面到服务器; 部署完成后, 在原有vue项目设置一个跳转， 并传入参数即可：

1. vue项目中的跳转和传参：

showMonitor() { // 创建一个包含参数的对象 const params = { szIP: 'xxxxxxxx', szPort: 'xxxxxxx', szUsername: 'admin', szPassword: 'xxxxxxxx' } // 使用URLSearchParams将参数转换为查询字符串 const queryParams = new URLSearchParams(params).toString() // 将查询字符串添加到外部页面的URL中 const externalURL = `http://xxxxxxx:xxxxx/cn/demo.html?${queryParams}` // 使用window.open()打开新标签页并跳转到带参数的外部页面 window.open(externalURL, '_blank') },

2. demo.js相关代码, 我这里在顶部添加了提示信息, 优化用户体验, 在初始化插件, 登录, 获取通道, 打开预览过程中均有不同提示, 否则的话只能看着一个黑屏干等着, 还是比较尴尬的:

// 显示加载提示信息的函数 function showLoadingMessage(message) { // 创建一个 DOM 元素来显示提示信息 var loadingDiv = document.createElement("div"); loadingDiv.setAttribute("id", "loadingMessage"); loadingDiv.style.position = "fixed"; loadingDiv.style.top = "8%"; loadingDiv.style.left = "50%"; loadingDiv.style.transform = "translate(-50%, -50%)"; loadingDiv.style.backgroundColor = "rgba(0, 0, 0, 0.7)"; loadingDiv.style.color = "white"; loadingDiv.style.padding = "10px"; loadingDiv.style.zIndex = "999"; loadingDiv.style.borderRadius = "5px"; loadingDiv.innerHTML = message; // 将提示信息添加到页面中 document.body.appendChild(loadingDiv); } // 关闭加载提示信息的函数 function hideLoadingMessage() { var loadingDiv = document.getElementById("loadingMessage"); if (loadingDiv) { // 从页面中移除提示信息 loadingDiv.parentNode.removeChild(loadingDiv); } } // 定义登录函数 function loginWithParameters() { // 从URL中获取参数 function getParameterByName(name) { name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(window.location.href); if (!results) return null; if (!results[2]) return ""; return decodeURIComponent(results[2].replace(/\+/g, " ")); } // 获取URL中的参数值 var szIP = getParameterByName("szIP"); var szPort = getParameterByName("szPort"); var szUsername = getParameterByName("szUsername"); var szPassword = getParameterByName("szPassword"); // 替换属性值 $("#loginip").val(szIP); $("#port").val(szPort); $("#username").val(szUsername); $("#password").val(szPassword); // 调用登录函数，稍后执行以确保页面加载完成 setTimeout(function () { clickLogin(); }, 1000); // 可以根据需要调整等待时间 } // 在页面加载完成后自动运行登录函数 $(document).ready(function () { loginWithParameters(); }); // 登录 function clickLogin() { var loadingMessage = "正在登录设备..."; showLoadingMessage(loadingMessage); var urlParams = new URLSearchParams(window.location.search); // 从URL参数中获取登录信息 var szIP = urlParams.get("szIP"); var szPort = urlParams.get("szPort"); var szUsername = urlParams.get("szUsername"); var szPassword = urlParams.get("szPassword"); if (!szIP || !szPort) { return; } var szDeviceIdentify = szIP + "_" + szPort; WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, { timeout: 3000, success: function (xmlDoc) { // 登录成功后关闭加载提示信息 hideLoadingMessage(); showOPInfo(szDeviceIdentify + " 登录成功！"); $("#ip").prepend( "" + szDeviceIdentify + "" ); setTimeout(function () { $("#ip").val(szDeviceIdentify); setTimeout(function () { getChannelInfo(); }, 1000); getDevicePort(); }, 10); }, error: function (oError) { if (ERROR_CODE_LOGIN_REPEATLOGIN === status) { showOPInfo(szDeviceIdentify + " 已登录过！"); } else { alert("登录设备失败, 请刷新页面重试"); showOPInfo( szDeviceIdentify + " 登录失败！", oError.errorCode, oError.errorMsg ); } }, }); }

第二段代码，与原始demo的区别主要是使用传入的参数，登录、获取通道、打开预览等相互的回调， 以实现打开页面后从登录到预览视频的一条龙服务(无法调用上边写好的展示信息的函数, 于是在这里又摆了一套...):

// 获取通道 function getChannelInfo() { var loadingMessage = "获取设备模拟通道..."; showLoadingMessage(loadingMessage); var szDeviceIdentify = $("#ip").val(), oSel = $("#channels").empty(); if (null == szDeviceIdentify) { return; } // 模拟通道 WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, { success: function (xmlDoc) { var oChannels = $(xmlDoc).find("VideoInputChannel"); $.each(oChannels, function (i) { var id = $(this).find("id").eq(0).text(), name = $(this).find("name").eq(0).text(); if ("" == name) { name = "Camera " + (i < 9 ? "0" + (i + 1) : i + 1); } oSel.append( "" + name + "" ); }); hideLoadingMessage(); showOPInfo(szDeviceIdentify + " 获取模拟通道成功！"); }, error: function (oError) { alert("获取监控模拟通道失败, 请刷新页面重试"); showOPInfo( szDeviceIdentify + " 获取模拟通道失败！", oError.errorCode, oError.errorMsg ); }, }); // 显示加载提示信息的函数 function showLoadingMessage(message) { // 创建一个 DOM 元素来显示提示信息 var loadingDiv = document.createElement("div"); loadingDiv.setAttribute("id", "loadingMessage"); loadingDiv.style.position = "fixed"; loadingDiv.style.top = "8%"; loadingDiv.style.left = "50%"; loadingDiv.style.transform = "translate(-50%, -50%)"; loadingDiv.style.backgroundColor = "rgba(0, 0, 0, 0.7)"; loadingDiv.style.color = "white"; loadingDiv.style.padding = "10px"; loadingDiv.style.zIndex = "999"; loadingDiv.style.borderRadius = "5px"; loadingDiv.innerHTML = message; // 将提示信息添加到页面中 document.body.appendChild(loadingDiv); } // 关闭加载提示信息的函数 function hideLoadingMessage() { var loadingDiv = document.getElementById("loadingMessage"); if (loadingDiv) { // 从页面中移除提示信息 loadingDiv.parentNode.removeChild(loadingDiv); } } // 开始预览 function clickStartRealPlay(iStreamType) { var loadingMessage = "正在打开监控画面..."; showLoadingMessage(loadingMessage); var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex), szDeviceIdentify = $("#ip").val(), iRtspPort = parseInt($("#rtspport").val(), 10), iChannelID = parseInt($("#channels").val(), 10), bZeroChannel = $("#channels option") .eq($("#channels").get(0).selectedIndex) .attr("bZero") == "true" ? true : false, szInfo = ""; if ("undefined" === typeof iStreamType) { iStreamType = parseInt($("#streamtype").val(), 10); } if (null == szDeviceIdentify) { return; } var startRealPlay = function () { WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iStreamType: iStreamType, iChannelID: iChannelID, bZeroChannel: bZeroChannel, success: function () { hideLoadingMessage(); szInfo = "开始预览成功！"; showOPInfo(szDeviceIdentify + " " + szInfo); }, error: function (oError) { alert("预览实时画面失败, 请刷新页面重试"); showOPInfo( szDeviceIdentify + " 开始预览失败！", oError.errorCode, oError.errorMsg ); }, }); }; if (oWndInfo != null) { // 已经在播放了，先停止 WebVideoCtrl.I_Stop({ success: function () { startRealPlay(); }, }); } else { startRealPlay(); } } // 获取端口 function getDevicePort() { var szDeviceIdentify = $("#ip").val(); if (null == szDeviceIdentify) { return; } WebVideoCtrl.I_GetDevicePort(szDeviceIdentify).then( (oPort) => { $("#deviceport").val(oPort.iDevicePort); $("#rtspport").val(oPort.iRtspPort); showOPInfo(szDeviceIdentify + " 获取端口成功！"); // 在成功回调中调用开始预览函数 // 这里直接使用1=主码流, 其他选项可查看html文件中的steamtype clickStartRealPlay(1); }, (oError) => { var szInfo = "获取端口失败！"; showOPInfo(szDeviceIdentify + szInfo, oError.errorCode, oError.errorMsg); } ); // 登录成功后调用开始预览函数 }

初始化插件的代码就不放了, 只是改动了提示信息而已.

html和css按需求自行调整, 因为这个插件比较逆天, 覆盖了所有其他的样式, 我就在四周留了空隙, 用于展示提示信息, 否则用户体验会比较差.

以下是最终效果:

1

2

3

五、总结

本需求的完成得到了前端大佬、后端大佬、设备大佬的帮助，特别是后端将设备映射到公网， 以及前端单独部署demo页面这个思路的转变。前期的调研和方案确认占了大部分时间，代码落地耗时较少，用到了GPT辅助，后期有内网无法映射到公网的项目，可能还要调整方案。

调整HTML我也有点犯傻，因为js逻辑会调用html页面的信息，隐藏这些模块和按钮需要解耦，我还挨个去测试并注释掉，其实在标签添加一个样式隐藏掉就可以了，根本不用那么麻烦，哈哈

感谢您的耐心观看，希望对您的需求实现有所帮助。