vue中使用海康視頻插件（1.監控）

使用條件
一.、引入依賴文件
jsencrypt.min.js
jsWebControl-1.0.0.min.js
注：必須在與 vue 的 根 index.html 文件中引入， main.js 中引入無效；
依賴文件及官方demo：官網下載

2、 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>

3、methods

/* 獲取視頻code */
    async getVideoCode() {
      this.realTimeData.videoLoad = true;
      const params = {
        area: "",
        enterprise: this.realTimeData.Warehouse.enterpriseName,
        street: "",
      };
      await getCamera(params).then((res) => {
        const videoCode = res.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) {
      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}`, 260, 160).then(() => {
                //JS_CreateWnd建立視頻播放窗口，寬高可設定
                this.initVideo(oWebControl, item.cameraIndexCode); // 建立播放實例成功後初始化
              });
            });
          },
        });
        this.plug.example.push(oWebControl);
      });
    },
    /* 獲取公鑰 */
    initVideo(oWebControl, code) {
      const params = {
        funcName: "getRSAPubKey",
        argument: JSON.stringify({ keyLength: 1024 }),
      };
      oWebControl.JS_RequestInterface(params).then((res) => {
        if (res.responseMsg.data) {
          this.plug.pubKey = res.responseMsg.data;
          this.getVideoConfig(oWebControl);
          this.getClickAction(oWebControl, code);
        }
      });
    },
    /* 視頻插件配置項回調 */
    getVideoConfig(oWebControl) {
      const { offsetWidth, offsetHeight } = document.getElementById("playWnd0");
      const configObj = {
        funcName: "init",
        argument: JSON.stringify({
          appkey: "xxxxxx", //API網關提供的appkey
          secret: this.setEncrypt("xxxxxx"), //API網關提供的secret
          ip: "xxx.xxx.xxx.xxx", //API網關IP地址
          playMode: 0, //播放模式（決定顯示預覽仍是回放界面）
          port: 8443, //端口
          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(() => {
        oWebControl.JS_Resize(offsetWidth, offsetHeight);
      });
    },
    /* 視頻流RSA加密 */
    setEncrypt(value) {
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.plug.pubKey);
      return encrypt.encrypt(value);
    },
    /* 視頻播放 */
    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以上佈局下可指定播放窗口）
        }),
      });
      this.realTimeData.videoLoad = false;
    },
    /* 銷燬視頻實例 */
    getDestruction() {
      this.plug.example.forEach((item) => {
        item.JS_HideWnd();
        item.JS_DestroyWnd().then((res) => {});
        // item.JS_Disconnect().then((res) => {});
      });
    },

4、使用效果圖、功能：
1.實時監控 / 2.截圖 / 3.錄屏 / 4.攝像頭控制 / 5.語音指揮（硬件支持）/ 6.即時回放