vue项目中海康插件的使用

官方文档 ：https://open.hikvision.com/docs/3784e07072ee4f09a573d61f20782267

插件版本：视频WEB插件 V1.5.1（见附件）（另附H5视频播放器开发包 V1.0.0，可用于移动端开发）

针对于web端的调用方法：

1. 直接调用海康插件，需传参数 cameraIndexCode（监控点编号）。
2. 调用海康接口，需传参数 url（监控点预览取流），需注意传输协议（rtsp，hls等）及延时情况。

---

以下为第一种方法（通过监控点编号cameraIndexCode直接调用海康插件的方法）说明：

【开发流程】

• 安装 VideoWebPlugin.exe 插件包（直接安装，勿自行解压并运行解压后的可执行文件，安装于系统盘的“Program Files (x86)\VideoWebPlugin”目录中）。
• 在vue项目的入口文件（ public - index.vue ）中引入js文件。

    <script src="./HikVision/jquery-1.12.4.min.js"></script>
    <script src="./HikVision/jsencrypt.min.js"></script>
    <script src="./HikVision/jsWebControl-1.0.0.min.js"></script>

• 应用插件，基本对接流程（灰色为可选步骤）：

目录

1. 创建 WebControl 实例 new WebControl

2. 启动插件 JS_StartService

（3.1 设置消息回调 JS_SetWindowControlCallback）

3.2 创建插件窗口 JS_CreateWnd

（4.1 申请RSA公钥 JS_RequestInterface - funcName: "getRSAPubKey"）

4.2 初始化 JS_RequestInterface - funcName: "init"

5.1 调整插件窗口大小、位置接口 JS_Resize

5.2 预览（实时）JS_RequestInterface - funcName: "startPreview"

5.3 回放 JS_RequestInterface - funcName: "startPlayback"

（6.销毁插件窗口 JS_DestroyWnd）

7. 断开插件服务连接 JS_Disconnect

---

1. 创建 WebControl 实例 new WebControl

      this.oWebControl = new WebControl({
        szPluginContainer: "playWnd"+this.settingId, // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15909,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: () => {
          // ----------创建WebControl实例成功 启动插件---------
          // ---------------2.JS_StartService-----------------
        },
        cbConnectError: () => {
          // 创建WebControl实例失败
          this.oWebControl = null;
          this.playText = '插件未启动，正在尝试启动，请稍候...';
          this.WebControl.JS_WakeUp("VideoWebPlugin://");// 程序未启动时执行error函数，采用wakeup来启动程序
          this.initCount++;
          if (this.initCount < 2) {
            setTimeout(() => {
              this.initPlugin(); // 重新创建播放实例
            }, 3000);
          } else {
            this.playText = `插件启动失败，请检查插件是否安装！`;
          }
        },
        cbConnectClose: () => {//bNormalClose
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          this.oWebControl = null;
        }
      });

2. 启动插件 JS_StartService

          this.oWebControl.JS_StartService("window", {
              // WebControl实例创建成功后需要启动服务
              dllPath: "./VideoPluginConnect.dll" // 值"./VideoPluginConnect.dll"写死
            }).then(() => {
                // --------------------设置消息回调--------------------
                //-----------3.1 JS_SetWindowControlCallback----------
                
                // ----启动插件服务成功 创建视频播放窗口（宽高可设定）----
                // ------------------3.2 JS_CreateWnd------------------
                
              },
              function() {
                // 启动插件服务失败
              }
            );

（3.1 设置消息回调 JS_SetWindowControlCallback）

                this.oWebControl.JS_SetWindowControlCallback({
                  cbIntegrationCallBack:function (oData) {
//                    console.log('回调信息',oData)
                  }
//                  this.cbIntegrationCallBack() // 封装的推送消息方法
                });

3.2 创建插件窗口 JS_CreateWnd

                this.oWebControl.JS_CreateWnd("playWnd"+this.settingId, this.$refs.playWnd.offsetWidth, this.$refs.playWnd.offsetHeight).then(() => {
                  // ------------------创建播放实例成功后初始化-------------------
                  // -----4.1 JS_RequestInterface - funcName: "getRSAPubKey"-----
                  
                  // ------------------创建播放实例成功后初始化-------------------
                  // ---------4.2 JS_RequestInterface - funcName: "init"----------
                });

（4.1 申请RSA公钥 JS_RequestInterface - funcName: "getRSAPubKey"）

          this.oWebControl.JS_RequestInterface({
              //通用请求响应接口
              funcName: "getRSAPubKey", // 功能标识
              argument: JSON.stringify({
                keyLength: 1024 // 秘钥长度，可选1024或2048
              })
            })
            .then(oData => {
              if (oData.responseMsg.data) {
                // 当code为-1时无data字段
                this.pubKey = oData.responseMsg.data; // 返回的数据，如RSA公钥
                callback();
              }
            });
            
            //RSA加密
            setEncrypt(value) {
              var encrypt = new JSEncrypt();
              encrypt.setPublicKey(this.pubKey);
              return encrypt.encrypt(value);
            },