海康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, 很方便, 可以直接本地拖拽到服务器.

可能部署页面