vue2实现海康威视根据海康插件进行监控实时预览和回放功能

一、单页面版本

    appkey: '根据实际情况填写', // 海康平台提供的appkey
    ip: '根据实际情况填写', // 平台地址
    secret: '根据实际情况填写', // 海康平台提供的secret

<template>
  <div>
    <div style="display: flex;margin-top: 20px;margin-left: 20px">
      <el-input
          style="width: 260px;"
          placeholder="请输入 equipmentno"
          v-model="equipmentno"
          clearable>
      </el-input>
      <el-button type="primary" size="mini" icon="el-icon-search" @click="previewVideo()">预览</el-button>
      <el-button type="primary" size="mini" icon="el-icon-search" @click="stopAllPreview()">停止预览</el-button>
    </div>
    <div ref="playWndBox" class="videoMain" style="margin-top: 20px">
      <div
          id="playWnd"
          class="playWnd"
          :style="{
        height: playWndHeight + 'px',
        width: playWndWidth + 'px',
      }"
      />
    </div>
  </div>

</template>

<script>

export default {
  name: 'Video',
  data() {
    return {
      equipmentno: '',
      // height: 735px;
      // width: 1144px;
      // 视频盒子的高度
      playWndHeight: '735',
      // playWndHeight: '1076',
      // 视频盒子的宽度
      playWndWidth: '1144',
      // playWndWidth: '1920',
      oWebControl: null,
      initCount: 0,
      pubKey: '',
      cameraIndexCode: '', // 这里面是监控点编号
      objData: {
        appkey: '根据实际需要填写', // 海康平台提供的appkey
        ip: 'IP地址根据实际需要填写', // 平台地址
        secret: '根据实际需要填写', // 海康平台提供的secret
        port: 443,
        playMode: 0, // 0 预览 1回放
        layout: '1x1' // 页面展示的模块数【16】

      }
    }
  },
  // mounted中获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成
  mounted() {
    // 首次加载时的到父容器的高度
    this.playWndHeight = this.$refs.playWndBox.clientHeight
    // 首次加载时的到父容器的宽度
    this.playWndWidth = this.$refs.playWndBox.clientWidth

    // 初始化播放器插件
    this.$nextTick(() => {
      this.initPlugin()
    })

    // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
    window.addEventListener('scroll', () => {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(
            this.$refs.playWndBox.clientWidth,
            this.$refs.playWndBox.clientHeight
        )
        this.setWndCover()
      }
    })

    // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
    window.addEventListener('resize', (e) => {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(
            this.$refs.playWndBox.clientWidth,
            this.$refs.playWndBox.clientHeight
        )
        this.setWndCover()
      }
    })
  },
  // 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
  destroyed() {
    if (this.oWebControl != null) {
      // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
      this.oWebControl.JS_HideWnd()
      // 销毁当前播放的视频
      this.oWebControl.JS_RequestInterface({funcName: 'destroyWnd'})
      // 断开与插件服务连接
      this.oWebControl.JS_Disconnect()
    }
  },
  // 方法区域
  methods: {
    // 创建播放实例
    initPlugin() {
      const that = this
      this.oWebControl = null
      // eslint-disable-next-line no-undef
      that.oWebControl = new WebControl({
        szPluginContainer: 'playWnd', // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15909,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: () => {
          // 创建WebControl实例成功
          that.oWebControl
              .JS_StartService('window', {
                // WebControl实例创建成功后需要启动服务
                // 值"./VideoPluginConnect.dll"写死
                dllPath: './VideoPluginConnect.dll'
              })
              .then(
                  function () {
                    // 设置消息回调
                    that.oWebControl.JS_SetWindowControlCallback({
                      cbIntegrationCallBack: that.cbIntegrationCallBack
                    })
                    // JS_CreateWnd创建视频播放窗口，宽高可设定
                    that.oWebControl
                        .JS_CreateWnd('playWnd', 2040, 945, {bEmbed: true})
                        // 注：2040,945这是我本人项目视频盒子的大小，你们要根据自己视频盒子的大小进行修改，不然初始化插件的时候会有空白闪烁。
                        .then(function () {
                          // 创建播放实例成功后初始化
                          that.init()
                        })
                  },
                  function () {
                    // 启动插件服务失败
                  }
              )
        },
        // 创建WebControl实例失败
        cbConnectError: function () {
          that.oWebControl = null
          alert('插件未启动，正在尝试启动，请稍候...')
          that.$message.warning("插件未启动，正在尝试启动，请稍候...");
          // 程序未启动时执行error函数，采用wakeup来启动程序
          window.WebControl.JS_WakeUp('VideoWebPlugin://')
          that.initCount++
          if (that.initCount < 3) {
            setTimeout(function () {
              that.initPlugin()
            }, 3000)
          } else {
            // gblfy 默认注释
            that.messageBox = true
            alert('插件启动失败，请安装插件并重新启动！')
            that.downloadHikVideo()
            setTimeout(function () {
              that.messageBox = false
            }, 5000)
            setTimeout(function () {
              alert('插件启动失败，请检查插件是否安装！')
              that.$message({
                message: '插件启动失败，请检查插件是否安装！ \n 插件下载地址：https://www.baidu.com',
                type: 'warning'
              });
            }, 5000)
          }
        },
        cbConnectClose: () => {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          // console.log("cbConnectClose");
          that.oWebControl = null
        }
      })
    },
    // 初始化
    init(callback) {
      const that = this
      that.getPubKey(() => {
        const appkey = that.objData.appkey // 综合安防管理平台提供的appkey，必填
        const secret = that.setEncrypt(that.objData.secret) // 综合安防管理平台提供的secret，必填
        const ip = that.objData.ip // 综合安防管理平台IP地址，必填
        const playMode = that.objData.playMode // 初始播放模式：0-预览，1-回放
        const port = that.objData.port // 综合安防管理平台端口，若启用HTTPS协议，默认443
        const snapDir = 'D:\\SnapDir' // 抓图存储路径
        const videoDir = 'D:\\VideoDir' // 紧急录像或录像剪辑存储路径
        const layout = that.objData.layout // playMode指定模式的布局
        const enableHTTPS = 1 // 是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        const encryptedFields = 'secret' // 加密字段，默认加密领域为secret
        const showToolbar = 1 // 是否显示工具栏，0-不显示，非0-显示
        const showSmart = 1 // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        const buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' // 自定义工具条按钮
        // var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
        that.oWebControl
            .JS_RequestInterface({
              funcName: 'init',
              argument: JSON.stringify({
                appkey: appkey, // API网关提供的appkey
                secret: secret, // API网关提供的secret
                ip: ip, // API网关IP地址
                playMode: playMode, // 播放模式（决定显示预览还是回放界面）
                port: port, // 端口
                snapDir: snapDir, // 抓图存储路径
                videoDir: videoDir, // 紧急录像或录像剪辑存储路径
                layout: layout, // 布局
                enableHTTPS: enableHTTPS, // 是否启用HTTPS协议
                encryptedFields: encryptedFields, // 加密字段
                showToolbar: showToolbar, // 是否显示工具栏
                showSmart: showSmart, // 是否显示智能信息
                buttonIDs: buttonIDs     // 自定义工具条按钮
              })
            })
            .then(function (oData) {
              that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
              if (callback) {
                callback()
              }
              // 隐藏
              // that.oWebControl.JS_HideWnd()
            })
      })
    },
    // 获取公钥
    getPubKey(callback) {
      const that = this
      this.oWebControl
          .JS_RequestInterface({
            funcName: 'getRSAPubKey',
            argument: JSON.stringify({
              keyLength: 1024
            })
          })
          .then(function (oData) {
            if (oData.responseMsg.data) {
              that.pubKey = oData.responseMsg.data
              callback()
            }
          })
    },
    // RSA 加密
    setEncrypt(value) {
      const that = this
      const encrypt = new window.JSEncrypt()
      encrypt.setPublicKey(that.pubKey)
      return encrypt.encrypt(value)
    },
    // 回调的消息
    cbIntegrationCallBack(oData) {
      const {responseMsg: type} = oData
      if (type === 'error') {
        // eslint-disable-next-line no-empty
      } else {
      }
    },

    // 视频预览功能
    previewVideo() {
      const that = this
      console.log("-------that.equipmentno->{}", that.cameraIndexCode);

      const cameraIndexCode = that.equipmentno // 获取输入的监控点编号值，必填
      const streamMode = 0 // 主子码流标识：0-主码流，1-子码流
      const transMode = 0 // 传输协议：0-UDP，1-TCP
      const gpuMode = 0 // 是否启用GPU硬解，0-不启用，1-启用
      const wndId = -1 // 播放窗口序号（在2x2以上布局下可指定播放窗口）
      console.log(cameraIndexCode, "-------cameraIndexCode-");

      that.oWebControl.JS_RequestInterface({
        funcName: 'startPreview',
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
          streamMode: streamMode, // 主子码流标识
          transMode: transMode, // 传输协议
          gpuMode: gpuMode, // 是否开启GPU硬解
          wndId: wndId // 可指定播放窗口
        })
      })
    },
    // 停止全部预览
    stopAllPreview() {
      this.oWebControl.JS_RequestInterface({
        funcName: 'stopAllPreview'
      })
    },
    // 格式化时间
    dateFormat(oDate, fmt) {
      const o = {
        'M+': oDate.getMonth() + 1, // 月份
        'd+': oDate.getDate(), // 日
        'h+': oDate.getHours(), // 小时
        'm+': oDate.getMinutes(), // 分
        's+': oDate.getSeconds(), // 秒
        'q+': Math.floor((oDate.getMonth() + 3) / 3), // 季度
        S: oDate.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
            RegExp.$1,
            (oDate.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                  ? o[k]
                  : ('00' + o[k]).substr(('' + o[k]).length)
          )
        }
      }
      return fmt
    },

    // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
    setWndCover() {
      var iWidth = $(window).width()
      var iHeight = $(window).height()
      var oDivRect = $('#playWnd').get(0).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 > 2041) ? 2041 : iCoverLeft
      iCoverTop = (iCoverTop > 945) ? 945 : iCoverTop
      iCoverRight = (iCoverRight > 2041) ? 2041 : iCoverRight
      iCoverBottom = (iCoverBottom > 945) ? 945 : iCoverBottom

      this.oWebControl.JS_RepairPartWindow(0, 0, 2041, 946) // 多1个像素点防止还原后边界缺失一个像素条
      if (iCoverLeft !== 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 946)
      }
      if (iCoverTop !== 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 0, 2041, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
      }
      if (iCoverRight !== 0) {
        this.oWebControl.JS_CuttingPartWindow(2041 - iCoverRight, 0, iCoverRight, 946)
      }
      if (iCoverBottom !== 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 946 - iCoverBottom, 2041, iCoverBottom)
      }
    }
  }
}
</script>

二、组件封装版本

    appkey: '根据实际情况填写', // 海康平台提供的appkey
    ip: '根据实际情况填写', // 平台地址
    secret: '根据实际情况填写', // 海康平台提供的secret

2.1. 父页面

<template>
  <div>
    <el-button type="primary" size="mini" icon="el-icon-search" @click="previewVideo()">预览</el-button>

    <div v-if="dialogVideoFlag">
      <el-dialog
          v-show="dialogVideoFlag"
          title="海康视频实时录像"
          :before-close="handleClose">
        <span>海康视频</span>
        <span slot="footer" class="dialog-footer">
                 <HaiKangVideo
                     :equipmentno="equipmentno"
                 ></HaiKangVideo>
    <el-button @click="dialogVideoFlag = false">取 消</el-button>
    <el-button type="primary" @click="dialogVideoFlag = false">确 定</el-button>
  </span>
      </el-dialog>

    </div>
  </div>

</template>
<script>
// 父页面
import HaiKangVideo from "../components/HaiKangVideo";

export default {
  name: 'Video',
  components: {HaiKangVideo},
  data() {
    return {
      dialogVideoFlag: false,
      equipmentno: '8888',
    }
  },
  methods: {
    previewVideo() {
      this.dialogVideoFlag = true
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    }
  }
}
</script>

2.2. 子组件

<template>
  <div>
    <div style="display: flex;margin-top: 20px;margin-left: 20px">
      <el-input
          style="width: 260px;"
          placeholder="请输入 equipmentno"
          v-model="equipmentno"
          clearable>
      </el-input>
      <el-button type="primary" size="mini" icon="el-icon-search" @click="previewVideo()">预览</el-button>
      <el-button type="primary" size="mini" icon="el-icon-search" @click="stopAllPreview()">停止预览</el-button>
    </div>
    <div ref="playWndBox" class="videoMain" style="margin-top: 20px">
      <div
          id="playWnd"
          class="playWnd"
          :style="{
        height: playWndHeight + 'px',
        width: playWndWidth + 'px',
      }"
      />
    </div>
  </div>

</template>

<script>

export default {
  name: 'Video',
  props: {//props列表
    equipmentno: {
      type: String,
      default: "我是默认字符串",//定义参数默认值
      required: true//定义参数是否必须值
    },
  },
  created() {
    console.log("this.equipmentno 组件->{}", this.equipmentno)
  },
  data() {
    return {
      // equipmentno: '',
      // height: 735px;
      // width: 1144px;
      // 视频盒子的高度
      playWndHeight: '420',
      // playWndHeight: '735',
      // playWndHeight: '1076',
      // 视频盒子的宽度
      playWndWidth: '1144',
      // playWndWidth: '1920',
      oWebControl: null,
      initCount: 0,
      pubKey: '',
      cameraIndexCode: '', // 这里面是监控点编号
      objData: {
        appkey: '根据实际情况填写', // 海康平台提供的appkey
        ip: '根据实际情况填写', // 平台地址
        secret: '根据实际情况填写', // 海康平台提供的secret
        port: 443,
        playMode: 0, // 0 预览 1回放
        layout: '1x1' // 页面展示的模块数【16】

      }
    }
  },
  // mounted中获取到数据,内存中的数据真实的挂载到页面中,Vue实例创建完成
  mounted() {
    // 首次加载时的到父容器的高度
    this.playWndHeight = this.$refs.playWndBox.clientHeight
    // 首次加载时的到父容器的宽度
    this.playWndWidth = this.$refs.playWndBox.clientWidth

    // 初始化播放器插件
    this.$nextTick(() => {
      this.initPlugin()
    })

    // 监听scroll事件，使插件窗口尺寸跟随DIV窗口变化
    window.addEventListener('scroll', () => {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(
            this.$refs.playWndBox.clientWidth,
            this.$refs.playWndBox.clientHeight
        )
        this.setWndCover()
      }
    })

    // 监听resize事件，使插件窗口尺寸跟随DIV窗口变化
    window.addEventListener('resize', (e) => {
      if (this.oWebControl != null) {
        this.oWebControl.JS_Resize(
            this.$refs.playWndBox.clientWidth,
            this.$refs.playWndBox.clientHeight
        )
        this.setWndCover()
      }
    })
  },
  // 在实例销毁之后调用，调用后，所以的事件监听器会被移出，所有的子实例也会被销毁，该钩子在服务器端渲染期间不被调用
  destroyed() {
    if (this.oWebControl != null) {
      // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题
      this.oWebControl.JS_HideWnd()
      // 销毁当前播放的视频
      this.oWebControl.JS_RequestInterface({funcName: 'destroyWnd'})
      // 断开与插件服务连接
      this.oWebControl.JS_Disconnect()
    }
  },
  // 方法区域
  methods: {
    // 创建播放实例
    initPlugin() {
      const that = this
      this.oWebControl = null
      // eslint-disable-next-line no-undef
      that.oWebControl = new WebControl({
        szPluginContainer: 'playWnd', // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15909,
        szClassId: '23BF3B0A-2C56-4D97-9C03-0CB103AA8F11', // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: () => {
          // 创建WebControl实例成功
          that.oWebControl
              .JS_StartService('window', {
                // WebControl实例创建成功后需要启动服务
                // 值"./VideoPluginConnect.dll"写死
                dllPath: './VideoPluginConnect.dll'
              })
              .then(
                  function () {
                    // 设置消息回调
                    that.oWebControl.JS_SetWindowControlCallback({
                      cbIntegrationCallBack: that.cbIntegrationCallBack
                    })
                    // JS_CreateWnd创建视频播放窗口，宽高可设定
                    that.oWebControl
                        .JS_CreateWnd('playWnd', 2040, 945, {bEmbed: true})
                        // 注：2040,945这是我本人项目视频盒子的大小，你们要根据自己视频盒子的大小进行修改，不然初始化插件的时候会有空白闪烁。
                        .then(function () {
                          // 创建播放实例成功后初始化
                          that.init()
                        })
                  },
                  function () {
                    // 启动插件服务失败
                  }
              )
        },
        // 创建WebControl实例失败
        cbConnectError: function () {
          that.oWebControl = null
          alert('插件未启动，正在尝试启动，请稍候...')
          that.$message.warning("插件未启动，正在尝试启动，请稍候...");
          // 程序未启动时执行error函数，采用wakeup来启动程序
          window.WebControl.JS_WakeUp('VideoWebPlugin://')
          that.initCount++
          if (that.initCount < 3) {
            setTimeout(function () {
              that.initPlugin()
            }, 3000)
          } else {
            // gblfy 默认注释
            that.messageBox = true
            alert('插件启动失败，请安装插件并重新启动！')
            that.downloadHikVideo()
            setTimeout(function () {
              that.messageBox = false
            }, 5000)
            setTimeout(function () {
              alert('插件启动失败，请检查插件是否安装！')
              that.$message({
                message: '插件启动失败，请检查插件是否安装！ \n 插件下载地址：https://www.baidu.com',
                type: 'warning'
              });
            }, 5000)
          }
        },
        cbConnectClose: () => {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          // console.log("cbConnectClose");
          that.oWebControl = null
        }
      })
    },
    // 初始化
    init(callback) {
      const that = this
      that.getPubKey(() => {
        const appkey = that.objData.appkey // 综合安防管理平台提供的appkey，必填
        const secret = that.setEncrypt(that.objData.secret) // 综合安防管理平台提供的secret，必填
        const ip = that.objData.ip // 综合安防管理平台IP地址，必填
        const playMode = that.objData.playMode // 初始播放模式：0-预览，1-回放
        const port = that.objData.port // 综合安防管理平台端口，若启用HTTPS协议，默认443
        const snapDir = 'D:\\SnapDir' // 抓图存储路径
        const videoDir = 'D:\\VideoDir' // 紧急录像或录像剪辑存储路径
        const layout = that.objData.layout // playMode指定模式的布局
        const enableHTTPS = 1 // 是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        const encryptedFields = 'secret' // 加密字段，默认加密领域为secret
        const showToolbar = 1 // 是否显示工具栏，0-不显示，非0-显示
        const showSmart = 1 // 是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        const buttonIDs = '0,16,256,257,258,259,260,512,513,514,515,516,517,768,769' // 自定义工具条按钮
        // var toolBarButtonIDs = "2049,2304" // 工具栏上自定义按钮
        that.oWebControl
            .JS_RequestInterface({
              funcName: 'init',
              argument: JSON.stringify({
                appkey: appkey, // API网关提供的appkey
                secret: secret, // API网关提供的secret
                ip: ip, // API网关IP地址
                playMode: playMode, // 播放模式（决定显示预览还是回放界面）
                port: port, // 端口
                snapDir: snapDir, // 抓图存储路径
                videoDir: videoDir, // 紧急录像或录像剪辑存储路径
                layout: layout, // 布局
                enableHTTPS: enableHTTPS, // 是否启用HTTPS协议
                encryptedFields: encryptedFields, // 加密字段
                showToolbar: showToolbar, // 是否显示工具栏
                showSmart: showSmart, // 是否显示智能信息
                buttonIDs: buttonIDs     // 自定义工具条按钮
              })
            })
            .then(function (oData) {
              that.oWebControl.JS_Resize(that.playWndWidth, that.playWndHeight) // 初始化后resize一次，规避firefox下首次显示窗口后插件窗口未与DIV窗口重合问题
              if (callback) {
                callback()
              }
              // 隐藏
              // that.oWebControl.JS_HideWnd()
            })
      })
    },
    // 获取公钥
    getPubKey(callback) {
      const that = this
      this.oWebControl
          .JS_RequestInterface({
            funcName: 'getRSAPubKey',
            argument: JSON.stringify({
              keyLength: 1024
            })
          })
          .then(function (oData) {
            if (oData.responseMsg.data) {
              that.pubKey = oData.responseMsg.data
              callback()
            }
          })
    },
    // RSA 加密
    setEncrypt(value) {
      const that = this
      const encrypt = new window.JSEncrypt()
      encrypt.setPublicKey(that.pubKey)
      return encrypt.encrypt(value)
    },
    // 回调的消息
    cbIntegrationCallBack(oData) {
      const {responseMsg: type} = oData
      if (type === 'error') {
        // eslint-disable-next-line no-empty
      } else {
      }
    },

    // 视频预览功能
    previewVideo() {
      console.log("-------开始 预览---------");
      const that = this
      console.log("-------that.equipmentno->{}", that.equipmentno);

      const cameraIndexCode = that.equipmentno // 获取输入的监控点编号值，必填
      const streamMode = 0 // 主子码流标识：0-主码流，1-子码流
      const transMode = 0 // 传输协议：0-UDP，1-TCP
      const gpuMode = 0 // 是否启用GPU硬解，0-不启用，1-启用
      const wndId = -1 // 播放窗口序号（在2x2以上布局下可指定播放窗口）
      // console.log(cameraIndexCode, "-------cameraIndexCode-");

      that.oWebControl.JS_RequestInterface({
        funcName: 'startPreview',
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode.trim(), // 监控点编号
          streamMode: streamMode, // 主子码流标识
          transMode: transMode, // 传输协议
          gpuMode: gpuMode, // 是否开启GPU硬解
          wndId: wndId // 可指定播放窗口
        })
      })
    },
    // 停止全部预览
    stopAllPreview() {
      console.log("-------预览 结束---------");
      this.oWebControl.JS_RequestInterface({
        funcName: 'stopAllPreview'
      })
    },
    // 格式化时间
    dateFormat(oDate, fmt) {
      const o = {
        'M+': oDate.getMonth() + 1, // 月份
        'd+': oDate.getDate(), // 日
        'h+': oDate.getHours(), // 小时
        'm+': oDate.getMinutes(), // 分
        's+': oDate.getSeconds(), // 秒
        'q+': Math.floor((oDate.getMonth() + 3) / 3), // 季度
        S: oDate.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
            RegExp.$1,
            (oDate.getFullYear() + '').substr(4 - RegExp.$1.length)
        )
      }
      for (const k in o) {
        if (new RegExp('(' + k + ')').test(fmt)) {
          fmt = fmt.replace(
              RegExp.$1,
              RegExp.$1.length === 1
                  ? o[k]
                  : ('00' + o[k]).substr(('' + o[k]).length)
          )
        }
      }
      return fmt
    },

    // 设置窗口裁剪，当因滚动条滚动导致窗口需要被遮住的情况下需要JS_CuttingPartWindow部分窗口
    setWndCover() {
      var iWidth = $(window).width()
      var iHeight = $(window).height()
      var oDivRect = $('#playWnd').get(0).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 > 2041) ? 2041 : iCoverLeft
      iCoverTop = (iCoverTop > 945) ? 945 : iCoverTop
      iCoverRight = (iCoverRight > 2041) ? 2041 : iCoverRight
      iCoverBottom = (iCoverBottom > 945) ? 945 : iCoverBottom

      this.oWebControl.JS_RepairPartWindow(0, 0, 2041, 946) // 多1个像素点防止还原后边界缺失一个像素条
      if (iCoverLeft !== 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 0, iCoverLeft, 946)
      }
      if (iCoverTop !== 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 0, 2041, iCoverTop) // 多剪掉一个像素条，防止出现剪掉一部分窗口后出现一个像素条
      }
      if (iCoverRight !== 0) {
        this.oWebControl.JS_CuttingPartWindow(2041 - iCoverRight, 0, iCoverRight, 946)
      }
      if (iCoverBottom !== 0) {
        this.oWebControl.JS_CuttingPartWindow(0, 946 - iCoverBottom, 2041, iCoverBottom)
      }
    }
  },




    //把视频预览中的playMode修改成1，插件就会自动调用回放功能
    //     playMode: 1, // 0 预览 1回放
    //然后点击事件调用 backVideo(VideoIndex)这个函数，可以实现预览功能

    // 视频回放
    backVideo(VideoIndex) {
      //我这是查询三天前的数据，可以根据直接需求自行修改。
      //逻辑可能写的比较垃圾，我这是写死的，对着开发文档根据自己需求修改
      let cameraIndexCode = VideoIndex;
      let months = new Date().getMonth() + 1
      let end = new Date().getFullYear() + '/' + months + '/' + new Date().getDate() + ' 23:59:59'
      let endT = String(parseInt(new Date(end).getTime() / 1000));
      let star = String(parseInt(new Date(end).getTime() / 1000 - 3 * 24 * 60 * 60))
      this.oWebControl.JS_RequestInterface({
        funcName: "startPlayback",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode.trim(),    // 监控点编号
          startTimeStamp: star,                       // 录像查询开始时间戳，单位：秒
          endTimeStamp: endT,                         // 录像查询结束时间戳，单位：秒
          recordLocation: 0,                          // 录像存储类型 0-中心存储 1-设备存储
          transMode: 0,                               // 传输协议 ，0-UDP 1-TCP
          gpuMode: 0,                                 // 是否开启 GPU 硬解，0-不开启 1-开启
          wndId: -1                                   //可指定播放窗口
        })
      });
    },
  }
}
</script>