海康视频 vue 组件

<template>
  <div class="hik-video" id="hikVideo" :style="{width:option.width + 'px',height:option.height + 'px'}">
  </div>
</template>
<script>
// 参数示例：
// option:{
//   appkey:"23464284",
//   secret:"EyTl3nQ3OvlYqkheTRXa",
//   ip:"10.254.10.10",
//   port:"80",
//   width:960,
//   height:540
// },
// camera:"f2d62cd79ca14929a019d7eb1bb9375e",
export default {
  props: {
    option: Object,
    camera: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      oWebControl: null,
      bIE: (!!window.ActiveXObject || 'ActiveXObject' in window),
      pubKey: "",
      iLastCoverLeft: 0,
      iLastCoverTop: 0,
      iLastCoverRight: 0,
      iLastCoverBottom: 0,
      initCount: 0,
      videoFlag: false,
    }
  },
  methods: {
    getPubKey(callback) {
      this.oWebControl.JS_RequestInterface({
        funcName: "getRSAPubKey",
        argument: JSON.stringify({
          keyLength: 1024
        })
      }).then(oData => {
        if (oData.responseMsg.data) {
          this.pubKey = oData.responseMsg.data
          callback()
        }
      })
    },
    initPlugin() {
      this.oWebControl = new WebControl({
        szPluginContainer: "hikVideo",
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        cbConnectSuccess: () => {
          this.oWebControl.JS_StartService("window", {
            dllPath: "./VideoPluginConnect.dll"
          }).then(() => {
            this.oWebControl.JS_SetWindowControlCallback({   // 设置消息回调
              cbIntegrationCallBack: cbIntegrationCallBack
            });
            this.oWebControl.JS_CreateWnd("hikVideo", this.option.width, this.option.height).then(() => {
              this.videoInit();
              this.videoFlag = true
            });
          });
        },
        cbConnectError: () => {
          console.log("cbConnectError");
          this.oWebControl = null;
          this.$notice({
            message: '插件未启动，正在尝试启动，请稍候...',
            type: 'error'
          });
          WebControl.JS_WakeUp("VideoWebPlugin://");
          this.initCount++;
          if (this.initCount < 3) {
            setTimeout(() => {
              this.initPlugin();
            }, 3000)
          } else {
            this.$notice({
              message: '插件启动失败，请检查插件是否安装！',
              type: 'error'
            });
          }
        },
        cbConnectClose: () => {
          this.oWebControl = null;
        }
      })
      function cbIntegrationCallBack(oData) {
        console.log(oData, 'cccccc')
      }
    },
    unloadEvent() {
      if (this.oWebControl != null) {
        this.oWebControl.JS_HideWnd();
        this.oWebControl.JS_Disconnect();
      }
    },
    scrollEvent() {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(this.option.width, this.option.height);
        this.setWndCover();
      }
    },
    resizeEvent() {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(this.option.width, this.option.height);
        this.setWndCover();
      }
    },
    setWndCover() {
        var iWidth = this.option.width;
        var iHeight = this.option.height;
        var oDivRect = document.getElementById("hikVideo").getBoundingClientRect();

        var iCoverLeft = (oDivRect.left < 0) ? Math.abs(oDivRect.left): 0;
        var iCoverTop = (oDivRect.top < 0) ? Math.abs(oDivRect.top): 0;
        var iCoverRight = (oDivRect.right - iWidth > 0) ? Math.round(oDivRect.right - iWidth) : 0;
        var iCoverBottom = (oDivRect.bottom - iHeight > 0) ? Math.round(oDivRect.bottom - iHeight) : 0;

        iCoverLeft = (iCoverLeft > iWidth) ? iWidth : iCoverLeft;
        iCoverTop = (iCoverTop > iHeight) ? iHeight : iCoverTop;
        iCoverRight = (iCoverRight > iWidth) ? iWidth : iCoverRight;
        iCoverBottom = (iCoverBottom > iHeight) ? iHeight : iCoverBottom;
        let widthAdd1Px = iWidth + 1
        // this.oWebControl.JS_RepairPartWindow(0, 0, widthAdd1Px, iHeight);
        // this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, iHeight);
        // this.oWebControl.JS_CuttingPartWindow(0, 0, widthAdd1Px, iCoverTop);
        // if (iCoverLeft != 0) {
              //   this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, iHeight);
        // }
        // if (iCoverTop != 0) {
        //     this.oWebControl.JS_CuttingPartWindow(0, 0, widthAdd1Px, iCoverTop);    // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
        // }
        // if (iCoverRight != 0) {
        //     this.oWebControl.JS_CuttingPartWindow(iHeight - iCoverRight, 0, iCoverRight, iHeight);
        // }
        // if (iCoverBottom != 0) {
        //     this.oWebControl.JS_CuttingPartWindow(0, iHeight - iCoverBottom, iWidth, iCoverBottom);
        // }
    },
    setEncrypt(value) {
      var encrypt = new JSEncrypt();
      encrypt.setPublicKey(this.pubKey);
      return encrypt.encrypt(value);
    },
    videoInit() {
      this.getPubKey(() => {
        let secret = this.setEncrypt(this.option.secret);
        this.oWebControl.JS_RequestInterface({
          funcName: "init",
          argument: JSON.stringify({
            appkey: this.option.appkey,
            secret: secret,
            ip: this.option.ip,
            playMode: 0, // 预览
            port: Number(this.option.port),
            snapDir: "",
            videoDir: "",
            layout: "1x1",
            enableHTTPS: 0,
            encryptedFields: "secret",
            showToolbar: 0
          })
        })
        .then(oData => {
          this.preview(this.camera);
          // resize
          this.oWebControl.JS_Resize(this.option.width, this.option.height);
        });
      })
    },
    preview(camera) {
      this.oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: camera,
          streamMode: 0,
          transMode: 1,
          gpuMode: 0,
          wndId: -1
        })
      }).then((oData) => {
        console.log(JSON.stringify(oData ? oData.responseMsg : ''));
      });
    },
    destroy () {
      this.oWebControl.JS_RequestInterface({
        funcName: "stopAllPreview"
      }).then(res => {
        this.oWebControl.JS_RequestInterface({
          funcName: "uninit"
        }).then(res => {
          this.oWebControl.JS_RequestInterface({
            funcName: "destroyWnd"
          }).then(res => {
            this.oWebControl.JS_HideWnd();
            this.$emit("closed")
          })
        })
      })
    }
  },
  mounted() {
    this.initPlugin();
    window.addEventListener('scroll', this.scrollEvent);
    window.addEventListener('resize', this.resizeEvent);
    // 标签关闭
    window.addEventListener('unload', this.unloadEvent);
  },
  beforeDestroy() {
    this.unloadEvent()
    window.removeEventListener("scroll", this.scrollEvent, true);
    window.removeEventListener("resize", this.resizeEvent, true);
    window.removeEventListener("unload", this.unloadEvent, true);
  },
  destroyed() {
  },
  watch:{
    camera: {
      handler: function(newVal, oldVal) {
        if (newVal && this.videoFlag) {
          this.preview(newVal);
        }
      },
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
</style>