项目对接海康的硬件设备，摄像头

根据传入的cameraIndexCode 来动态生成预览画面

<template>
  <div>
    <div id="playWnd" class="playWnd"></div>
  </div>
</template>

<script>
export default {
  props: {
    cameraIndexCode: String,
  },
  data() {
    return {
      oWebControl: null,
      pubKey: '',
      initOption: {
        // appkey: '22175154',
        // secret: '852Sdn5TrNEN2tdeEeet',
        appkey: '21738710',
        secret: 'NTbousDoKLBMIUW5EdTr',
        ip: '192.168.0.121',
        playMode: 0, // 预览
        port: 443,
        snapDir: '',
        videoDir: '',
        layout: '1x1',
        enableHTTPS: 1,
        showToolbar: 0,
        showSmart: 1,
        buttonIDs: '1,0,256',
        encryptedFields: 'secret',
        language: 'zh_CN',
        reconnectTimes: 5,
        reconnectDuration: 5,
      },
      startPreviewOption: {
        cameraIndexCode: '353e8b60a6144112a1a80e2d81de6f32',
        streamMode: +'0',
        transMode: +'1',
        gpuMode: +'0',
        ezvizDirect: +'0',
      },
      obj: {
        // 600,390
        w: 1400,
        h: 830,
      },
    }
  },
  watch: {
    cameraIndexCode: {
      handler(val) {
        console.log(val)
        if (val && val.trim()) {
          this.startPreviewOption.startPreviewOption = val
          this.initPlugin()
          window.addEventListener(
            'resize',
            () => {
              if (this.oWebControl != null) {
                this.oWebControl.JS_Resize(this.obj.w, this.obj.h)
                this.setWndCover()
              }
            },
            true
          )
          window.addEventListener(
            'scroll',
            () => {
              if (this.oWebControl != null) {
                this.oWebControl.JS_Resize(this.obj.w, this.obj.h)
                this.setWndCover()
              }
            },
            true
          )
        }
      },
      immediate: true,
    },
  },
  computed: {},
  created() {
    console.log('进入视频页面')
  },
  mounted() {
    // this.initPlugin();
    // 窗口resize
  },
  beforeDestroy() {
    // console.log("beforeDestory");
    this.oWebControl.JS_DestroyWnd().then(
      () => {
        console.log('destory success')
      },
      () => {
        console.log('destory error')
      }
    )
  },
  methods: {
    initPlugin() {
      let initCount = 0
      let self = this
      this.oWebControl = new WebControl({
        szPluginContainer: 'playWnd',
        iServicePortStart: 15900,
        iServicePortEnd: 15909,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: function() {
          initCount = 0
          self.setCallbacks()
          self.oWebControl
            .JS_StartService('window', {
              dllPath: './VideoPluginConnect.dll',
            })
            .then(
              function() {
                self.oWebControl
                  .JS_CreateWnd('playWnd', self.obj.w, self.obj.h)
                  .then(function() {
                    console.log('JS_CreateWnd success')
                    self.init()
                  })
              },
              function() {}
            )
        },
        cbConnectError: function() {
          console.log('cbConnectError')
          this.oWebControl = null
          // $("#playWnd").html("插件未启动，正在尝试启动，请稍候...");
          // this.$message.error("插件未启动，正在尝试启动，请稍候...");
          WebControl.JS_WakeUp('VideoWebPlugin://')
          initCount++
          if (initCount < 3) {
            setTimeout(function() {
              initPlugin()
            }, 3000)
          } else {
            // $("#playWnd").html("插件启动失败，请检查插件是否安装！");
            // this.$message.error("插件启动失败，请检查插件是否安装！");
          }
        },
        cbConnectClose: function(bNormalClose) {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          console.log('cbConnectClose')
          this.oWebControl = null
        },
      })
    },
    setCallbacks() {
      this.oWebControl.JS_SetWindowControlCallback({
        cbIntegrationCallBack: this.cbIntegrationCallBack,
      })
    },
    cbIntegrationCallBack(oData) {
      this.showCBInfo(JSON.stringify(oData.responseMsg))
    },
    init() {
      let self = this
      this.getPubKey(function() {
        self.oWebControl
          .JS_RequestInterface({
            funcName: 'init',
            argument: JSON.stringify({
              ...self.initOption,
              secret: self.setEncrypt(self.initOption.secret),
            }),
          })
          .then(function(oData) {
            // console.log(oData);
            self.oWebControl.JS_Resize(self.obj.w, self.obj.h) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
            self.startPreview()
          })
      })
    },
    getPubKey(callback) {
      let self = this
      this.oWebControl
        .JS_RequestInterface({
          funcName: 'getRSAPubKey',
          argument: JSON.stringify({
            keyLength: 1024,
          }),
        })
        .then(function(oData) {
          //   console.log(oData);
          if (oData.responseMsg.data) {
            self.pubKey = oData.responseMsg.data
            callback()
          }
        })
    },
    setEncrypt(value) {
      var encrypt = new JSEncrypt()
      encrypt.setPublicKey(this.pubKey)
      return encrypt.encrypt(value)
    },
    showCBInfo(szInfo, type) {
      // this.$message.error(szInfo);
    },
    startPreview() {
      let self = this
      this.oWebControl
        .JS_RequestInterface({
          funcName: 'startPreview',
          argument: JSON.stringify(self.startPreviewOption),
        })
        .then(function(oData) {
          //   console.log(oData);
          // self.showCBInfo(JSON.stringify(oData ? oData.responseMsg : ""));
        })
    },
    setWndCover() {
      let { w, h } = this.obj
      var iWidth = window.innerWidth
      var iHeight = window.innerHeight
      console.log('当前window窗口的宽度：', iWidth)
      console.log('当前window窗口的高度：', iHeight)
      var oDivRect = document.getElementById('playWnd').getBoundingClientRect()
      console.log('当前容器的：', oDivRect)
      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 > w ? w : iCoverLeft
      iCoverTop = iCoverTop > h ? h : iCoverTop
      iCoverRight = iCoverRight > w ? w : iCoverRight
      iCoverBottom = iCoverBottom > h ? h : iCoverBottom
      console.log(iCoverLeft)
      console.log(iCoverRight)
      this.oWebControl.JS_RepairPartWindow(0, 0, w + 1, h) // 多1个像素点防止还原后边界缺失一个像素条
      if (iCoverLeft != 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, h)
      }
      if (iCoverTop != 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 0, h+1, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
      }
      if (iCoverRight != 0) {
        this.oWebControl.JS_CuttingPartWindow(
          w - iCoverRight,
          0,
          iCoverRight,
          h
        )
      }
      if (iCoverBottom != 0) {
        this.oWebControl.JS_CuttingPartWindow(
          0,
          h - iCoverBottom,
          w,
          iCoverBottom
        )
      }
    },
  },
}
</script>

<style scoped="scoped" lang="scss">
.playWnd {
  //   margin: 30px 0 0 400px;
  width: 1400px;
  height: 830px;
  border: 1px solid red;
}
</style>