关于vue.js:海康视频-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>