二十分钟速成海康视频接web系统

超、凢脫俗 2022-12-05 13:55 894阅读 0赞

## 二十分钟速成海康视频接web系统 ##

前几天有需求一个系统要接入海康视频，看着三十多页的开发指南…陷入了沉思。  
为了解救广大同胞于水火之中，所以写了一个简单的小demo，便于快速接入。本demo只有一个功能（实时查看图像），但对于大部分系统来说，已经够用了。

隐私原因，修改了配置。如果配置正确的话，下面的四个窗口是能正常出现图像的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NteTA4MTY_size_16_color_FFFFFF_t_70_pic_center]

1.  需要引入依赖文件，一共有两个文件  
    `jsencrypt.min.js`和`jsWebControl-1.0.0.min.js`

> 如果是html的话，可以直接引入，但现在大多项目都是单页面应用，可以在public中的html中引入

1.  开始进行实例化（这些代码都是从官方的API和DEMO中粘贴出来的）

var oWebControl;
        ...
        // 实例化
        initWebControl() {
          let that = this;
          oWebControl = new WebControl({
            // 创建 WebControl 实例
    
            szPluginContainer: "playWnd", // 要绑定容器的id
            iServicePortStart: 15900, // 指定起止端口号，建议使用该值
            iServicePortEnd: 15909, // 用于 IE10 使用 ActiveX 的 clsid
            szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
            cbConnectSuccess: function () {
              // 创建 WebControl 实例成功
              console.log("创建 WebControl 实例成功");
              // 实例创建成功后启动服务
              oWebControl
                .JS_StartService("window", {
                  dllPath: "./VideoPluginConnect.dll", //
                })
                .then(
                  function () {
                    console.log("插件启用成功");
                    // 启动插件服务成功
    
                    // 设置消息回调
                    // oWebControl.JS_SetWindowControlCallback({
                    //   cbIntegrationCallBack: cbIntegrationCallBack,
                    // });
    
                    //JS_CreateWnd 创建视频播放窗口，宽高可设定
                    oWebControl
                      .JS_CreateWnd("playWnd", 1000, 600)
                      .then(function () {
                        that.initPlayWnd();
                        // init(); // 创建播放实例成功后初始化
                      });
                  },
                  function () {
                    // 启动插件服务失败
                  }
                );
            },
            cbConnectError: function () {
              // 创建 WebControl 实例失败
              console.log("创建失败，请安装插件");
              that.showExe = true;
            },
            cbConnectClose: function (bNormalClose) {
              // 插件使用过程中发生的断开与插件服务连接的回调    // bNormalClose = false 时表示异常断开    // bNormalClose = true 时表示正常断开
            },
          });
        },
        setEncrypt(value) {
          var encrypt = new JSEncrypt();
          encrypt.setPublicKey(pubKey);
          return encrypt.encrypt(value);
        },
        initPlayWnd() {
          let that = this;
          this.getPubKey(() => {
            // 请自行修改以下变量值	
            var appkey = "28730366"; //综合安防管理平台提供的appkey，必填
            var secret = this.setEncrypt("HSZkCJpSJ7gSUYrO6wVi"); //综合安防管理平台提供的secret，必填
            var ip = "10.19.132.75"; //综合安防管理平台IP地址，必填
            var playMode = 0; //初始播放模式：0-预览，1-回放
            var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
            var snapDir = "D:\\SnapDir"; //抓图存储路径
            var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
            var layout = "2x2"; //playMode指定模式的布局
            var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
            var encryptedFields = "secret"; //加密字段，默认加密领域为secret
            var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
            var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
            var buttonIDs =
              "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
            //var reconnectTimes = 2;                            // 重连次数，回放异常情况下有效
            //var reconnectTime = 4;                             // 每次重连的重连间隔 >= reconnectTime
            // 请自行修改以上变量值	
    
            oWebControl
              .JS_RequestInterface({
                funcName: "init",
                argument: JSON.stringify({
                  appkey: appkey, //API网关提供的appkey
                  secret: secret, //API网关提供的secret
                  ip: ip, //API网关IP地址
                  playMode: playMode, //播放模式（决定显示预览还是回放界面）
                  port: port, //端口
                  snapDir: snapDir, //抓图存储路径
                  videoDir: videoDir, //紧急录像或录像剪辑存储路径
                  layout: layout, //布局
                  enableHTTPS: enableHTTPS, //是否启用HTTPS协议
                  encryptedFields: encryptedFields, //加密字段
                  showToolbar: showToolbar, //是否显示工具栏
                  showSmart: showSmart, //是否显示智能信息
                  buttonIDs: buttonIDs, //自定义工具条按钮
                  //reconnectTimes：reconnectTimes,            //重连次数
                  //reconnectDuration：reconnectTime           //重连间隔
                }),
              })
              .then(function (oData) {
                oWebControl.JS_Resize(600, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                let arr = [
                  "xxx",
                ];// 这个数组里面是摄像头的ID
                arr.forEach((item, index) => {
                  that.startPreview(item, index + 1); // 我用的是一个2*2的框，这个函数用来给对应的位置播放对应的设备图像
                });
              });
          });
        },
        getPubKey(callback) {
          oWebControl
            .JS_RequestInterface({
              funcName: "getRSAPubKey",
              argument: JSON.stringify({
                keyLength: 1024,
              }),
            })
            .then(function (oData) {
              console.log(oData);
              if (oData.responseMsg.data) {
                pubKey = oData.responseMsg.data;
                callback();
              }
            });
        },
        startPreview(code, index) {
          var cameraIndexCode = code; // 监控点编号，json 中必填
          var streamMode = 0; //主子码流标识：0-主码流，1-子码流，json 中选填
          var transMode = 1; // 传输协议：0-UDP，1-TCP，json 中选填
          var gpuMode = 0; // 是否启用 GPU 硬解，0-不启用，1-启用，json 中选填
          var wndId = index; // 播放窗口序号（在 2x2 以上布局下可指定播放窗口），json 中选填 从1开始1,2,3,4
          cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
          cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
          oWebControl.JS_RequestInterface({
            funcName: "startPreview",
            argument: JSON.stringify({
              cameraIndexCode: cameraIndexCode,
              streamMode: streamMode,
              transMode: transMode,
              gpuMode: gpuMode,
              wndId: wndId,
            }),
          });
        },
     ...
     mounted(){
         this.initWebControl();
     }

其实需要修改的参数只有三个，别的根据自己的需求，用默认值即可。必须修改的三个参数分别是：`appkey,secret里面的参数,ip`其余的参数用默认值即可。

> 其中有一个要注意的点是，这个必须要配套海康的一个视频插件使用，如果没有安装插件，就会执行此函数`cbConnectError`，可以在这个函数中进行提醒用户下载插件。具体代码如下

<template>
      <div>
        <div id="playWnd">
          <p v-show="showExe">
            <a href="../VideoWebPlugin.exe" download="VideoWebPlugin.exe">点击下载插件</a>
          </p>
        </div>
      </div>
    </template>

`VideoWebPlugin`这个插件，官方文档应该已经给出来了。  
这里强调的是，注意路径的问题。

> 此demo中用到的所有静态资源，都在public文件下，也都可以在官方demo中找到，此处不再放置资源。

#### **伸手党来这里，直接粘贴就可用的代码在这里。** ####

<template>
          <div>
            <div id="playWnd">
              <p v-show="showExe">
                <a href="../VideoWebPlugin.exe" download="VideoWebPlugin.exe">点击下载插件</a>
              </p>
            </div>
          </div>
        </template>
        
        <script>
        var oWebControl;
        var pubKey = "";
        export default {
          data() {
            return {
              showExe: false,
            };
          },
          mounted() {
            this.initWebControl();
          },
          destroyed() {
            console.log("执行函数");
            if (oWebControl != null) {
              oWebControl.JS_HideWnd(); // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
              oWebControl.JS_Disconnect().then(
                function () {},
                function () {}
              );
            }
          },
          methods: {
            initWebControl() {
              let that = this;
              oWebControl = new WebControl({
                // 创建 WebControl 实例
        
                szPluginContainer: "playWnd", // 指定 DIV 窗口标识
                iServicePortStart: 15900, // 指定起止端口号，建议使用该值
                iServicePortEnd: 15909, // 用于 IE10 使用 ActiveX 的 clsid
                szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11",
                cbConnectSuccess: function () {
                  // 创建 WebControl 实例成功
                  console.log("创建 WebControl 实例成功");
                  // 实例创建成功后启动服务
                  oWebControl
                    .JS_StartService("window", {
                      dllPath: "./VideoPluginConnect.dll", //
                    })
                    .then(
                      function () {
                        console.log("插件启用成功");
                        // 启动插件服务成功
        
                        // 设置消息回调
                        // oWebControl.JS_SetWindowControlCallback({
                        //   cbIntegrationCallBack: cbIntegrationCallBack,
                        // });
        
                        //JS_CreateWnd 创建视频播放窗口，宽高可设定
                        oWebControl
                          .JS_CreateWnd("playWnd", 1000, 600)
                          .then(function () {
                            that.initPlayWnd();
                            // init(); // 创建播放实例成功后初始化
                          });
                      },
                      function () {
                        // 启动插件服务失败
                      }
                    );
                },
                cbConnectError: function () {
                  // 创建 WebControl 实例失败
                  console.log("创建失败，请安装插件");
                  that.showExe = true;
                },
                cbConnectClose: function (bNormalClose) {
                  // 插件使用过程中发生的断开与插件服务连接的回调    // bNormalClose = false 时表示异常断开    // bNormalClose = true 时表示正常断开
                },
              });
            },
            setEncrypt(value) {
              var encrypt = new JSEncrypt();
              encrypt.setPublicKey(pubKey);
              return encrypt.encrypt(value);
            },
            initPlayWnd() {
              let that = this;
              this.getPubKey(() => {
                // 请自行修改以下变量值	
                【这个参数需要修改】var appkey = "28730366"; //综合安防管理平台提供的appkey，必填
                【这个参数需要修改】var secret = this.setEncrypt("HSZkCJpSJ7gSUYrO6wVi"); //综合安防管理平台提供的secret，必填
                【这个参数需要修改】var ip = "10.19.132.75"; //综合安防管理平台IP地址，必填
                var playMode = 0; //初始播放模式：0-预览，1-回放
                var port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
                var snapDir = "D:\\SnapDir"; //抓图存储路径
                var videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
                var layout = "2x2"; //playMode指定模式的布局
                var enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
                var encryptedFields = "secret"; //加密字段，默认加密领域为secret
                var showToolbar = 1; //是否显示工具栏，0-不显示，非0-显示
                var showSmart = 1; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
                var buttonIDs =
                  "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
                //var reconnectTimes = 2;                            // 重连次数，回放异常情况下有效
                //var reconnectTime = 4;                             // 每次重连的重连间隔 >= reconnectTime
                // 请自行修改以上变量值	
        
                oWebControl
                  .JS_RequestInterface({
                    funcName: "init",
                    argument: JSON.stringify({
                      appkey: appkey, //API网关提供的appkey
                      secret: secret, //API网关提供的secret
                      ip: ip, //API网关IP地址
                      playMode: playMode, //播放模式（决定显示预览还是回放界面）
                      port: port, //端口
                      snapDir: snapDir, //抓图存储路径
                      videoDir: videoDir, //紧急录像或录像剪辑存储路径
                      layout: layout, //布局
                      enableHTTPS: enableHTTPS, //是否启用HTTPS协议
                      encryptedFields: encryptedFields, //加密字段
                      showToolbar: showToolbar, //是否显示工具栏
                      showSmart: showSmart, //是否显示智能信息
                      buttonIDs: buttonIDs, //自定义工具条按钮
                      //reconnectTimes：reconnectTimes,            //重连次数
                      //reconnectDuration：reconnectTime           //重连间隔
                    }),
                  })
                  .then(function (oData) {
                    oWebControl.JS_Resize(600, 600); // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
                    let arr = [
                      "xxx",
                      "xxx",
                      "xxx",
                      "xxx",
                    ];【这里是摄像头的ID】
                    arr.forEach((item, index) => {
                      that.startPreview(item, index + 1);
                    });
                  });
              });
            },
            getPubKey(callback) {
              oWebControl
                .JS_RequestInterface({
                  funcName: "getRSAPubKey",
                  argument: JSON.stringify({
                    keyLength: 1024,
                  }),
                })
                .then(function (oData) {
                  console.log(oData);
                  if (oData.responseMsg.data) {
                    pubKey = oData.responseMsg.data;
                    callback();
                  }
                });
            },
            startPreview(code, index) {
              var cameraIndexCode = code; // 监控点编号，json 中必填
              var streamMode = 0; //主子码流标识：0-主码流，1-子码流，json 中选填
              var transMode = 1; // 传输协议：0-UDP，1-TCP，json 中选填
              var gpuMode = 0; // 是否启用 GPU 硬解，0-不启用，1-启用，json 中选填
              var wndId = index; // 播放窗口序号（在 2x2 以上布局下可指定播放窗口），json 中选填
              cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
              cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");
              oWebControl.JS_RequestInterface({
                funcName: "startPreview",
                argument: JSON.stringify({
                  cameraIndexCode: cameraIndexCode,
                  streamMode: streamMode,
                  transMode: transMode,
                  gpuMode: gpuMode,
                  wndId: wndId,
                }),
              });
            },
          },
        };
        </script>
        
        <style>
        </style>

如果你有耐心看到这里，整篇文章就基本结束了。  
任何操作过程中遇到什么问题，可直接与我私信。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NteTA4MTY_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/53dd6f4bff604acf94bda66bbcde07d6.png