【记录】Vue 中使用海康视频插件（监控）

使用条件
一、引入依赖文件
jsencrypt.min.js
jsWebControl-1.0.0.min.js //最新为 web-control_1.2.5.min.js 功能一样的
注意：
1、必须在 vue 的根 index.html 文件中引入， main.js 中引入无效；
2、jquery-1.12.4.min.js 文件只是demo中演示需要的依赖，不用引入；

相关文章介绍：传送门>>>
依赖文件及官网示例：下载>>>
插件API文档：查看

问的人多，下面是Vue2最新的demo配置对可以直接用的（2024/05/29）
最新demo：跳转下载>>>

二、 template

<div class="video-wrap mt-16">
  <wrap
    class="video-box"
    v-for="(item, index) in realTimeData.videoConfig"
    :key="item.id"
  >
    <div :id="`playWnd${index}`" class="playWnd"></div>
  </wrap>
</div>

mounted

  mounted() {
    this.getDestruction()
    this.getVideoCode()
    window.addEventListener('resize', this.getDomInfo)
  },

三、methods

    /* 获取摄像头编码 */
    async getVideoCode() {
      this.realTimeData.videoLoad = true;
      const params = {
        area: "",
        enterprise: this.realTimeData.enterpriseName,
        street: "",
      };
      const { data } = await getCamera(params)
      const videoCode = data.list.map(({ cameraIndexCode }) => ({
          cameraIndexCode,
        }));
        this.realTimeData.videoConfig = videoCode.map((item) => {
          return {
            code: item.cameraIndexCode,
            id: Math.floor(Math.random() * 100),
          };
        });
        this.initPlugin(videoCode);
    },

    /* 创建插件实例 */
    initPlugin(codeArr=this.realTimeData.videoConfig) {
     const { width, height } = document.getElementById('playWnd0').getBoundingClientRect()
      const dll = { dllPath: "./VideoPluginConnect.dll" };
      codeArr.forEach((item, index) => {
        let oWebControl = new WebControl({
          szPluginContainer: `playWnd${index}`, // 指定容器id
          iServicePortStart: 15900,
          iServicePortEnd: 15909,
          szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
          cbConnectSuccess: () => {
            oWebControl.JS_StartService("window", dll).then(() => {
              oWebControl.JS_SetWindowControlCallback({
                cbIntegrationCallBack: (msg) => {
                  //注：不能使用外部函数调用，无效
                  if (msg?.responseMsg?.msg?.result) {
                    const { result } = msg.responseMsg.msg;
                    if (result == 1024) {
                      oWebControl.JS_HideWnd();//放大隐藏其它视频窗口
                    } else if (result == 1025) {
                      oWebControl.JS_ShowWnd();//缩小显示全部窗口
                    }
                  }
                },
              });
              //启动插件服务成功
              oWebControl.JS_CreateWnd(`playWnd${index}`, width, height).then(() => {
                //JS_CreateWnd创建视频播放窗口，宽高可设定
                this.initVideo(oWebControl, item.cameraIndexCode); // 创建播放实例成功后初始化
              });
            });
          },
          //插件服务启动失败，尝试自行启动
          cbConnectError: (err) => {
            oWebControl = null
            this.$message.warning(`监控插件未启动，正在尝试第${this.initCount + 1}次启动，请稍候...`);
            WebControl.JS_WakeUp('VideoWebPlugin://')
            this.initCount++
            if(this.initCount < 3){
              setTimeout(() => this.initPlugin(), 3000)
            }else{
              this.videoLoad = true;//打开下载提示，请先安装视频插件
            }
          },
        });
        this.plug.example.push(oWebControl);
      });
    },

    /* 获取公钥 */
    async initVideo(oWebControl, code) {
      const params = {
        funcName: 'getRSAPubKey',
        argument: JSON.stringify({ keyLength: 1024 }),
      }
      const { responseMsg } = await oWebControl.JS_RequestInterface(params)
      if (responseMsg.data) {
        const pubKey = responseMsg.data
        this.getVideoConfig(oWebControl,pubKey,code)
      }
    },

    /* 视频插件配置 */
    getVideoConfig(oWebControl,pubKey,code) {
      const { appkey, secret, ip, port } = this.config
      const configObj = {
        funcName: 'init',
        argument: JSON.stringify({
          appkey: appkey, //API网关提供的appkey
          secret: this.setEncrypt(secret,pubKey), //API网关提供的secret
          ip: ip, //API网关IP地址
          playMode: 0, //播放模式：0实时预览、1视频回放
          port: +port, //端口，特别注意一定要是number类型，否则白屏
          snapDir: 'D:\\SnapDir', //抓图存储路径
          videoDir: 'D:\\VideoDir', //紧急录像或录像剪辑存储路径
          layout: '1x1', //布局
          enableHTTPS: 1, //是否启用HTTPS协议
          encryptedFields: 'secret', //加密字段
          showToolbar: 1, //是否显示工具栏
          showSmart: 1, //是否显示智能信息
          buttonIDs: '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769', //自定义工具条按钮
        }),
      }
      oWebControl.JS_RequestInterface(configObj).then(() => {
        //这是是调div位置变化的，监听获取包裹div的位置变化再调用这个方法就行
        this.getDomInfo()
        this.getClickAction(oWebControl, code)
      })
    },

    /* 视频流RSA加密 */
    setEncrypt(value,pubKey) {
      const encrypt = new JSEncrypt()
      encrypt.setPublicKey(pubKey)
      return encrypt.encrypt(value)
    },
    /* 获取div大小及位置 */
    getDomInfo(oWebControl) {
      const { width, height, top, left } = document.getElementById('playWnd0').getBoundingClientRect()
      if (oWebControl) {
        oWebControl.JS_Resize(width, height)
        oWebControl.JS_CuttingPartWindow(left, top, 0, 0)
      }else{
        this.plug.example.forEach(item=>{
          item.JS_Resize(width, height)
          item.JS_CuttingPartWindow(left, top, 0, 0)
        })
      }
    },

    /* 视频播放 */
    getClickAction(oWebControl, code) {
      code = code.trim()
      oWebControl.JS_RequestInterface({
        funcName: 'startPreview',
        argument: JSON.stringify({
          cameraIndexCode: code, //监控点编号
          streamMode: 0, //主子码流标识：0-主码流，1-子码流
          transMode: 1, //传输协议：0-UDP，1-TCP
          gpuMode: 0, //是否启用GPU硬解，0-不启用，1-启用
          wndId: -1, //播放窗口序号（在2x2以上布局下可指定播放窗口）
        }),
      })
    },
    /* 销毁视频实例 */
    getDestruction() {
      if(this.plug.example.length){
        this.plug.example.forEach((item) => {
          item.JS_HideWnd()
          item.JS_Disconnect().then((res) => {});
        })
      }
    },

beforeDestroy

beforeDestroy() {
    window.removeEventListener('resize', this.getDomInfo)
    this.getDestruction()
  },

beforeRouteEnter

//保险起见，如果页面开了keep-alive
beforeRouteEnter(to, from, next) {
    next((vue) => vue.getDestruction())
},

四、使用效果图、功能：
1.实时监控 / 2.截图 / 3.录屏 / 4.摄像头控制 / 5.语音指挥（硬件支持）/ 6.即时回放