Vue集成海康威视web视频插件

1、进入海康威视官网下载插件包

https://open.hikvision.com/download/5c67f1e2f05948198c909700?type=20

2、将js文件放到public目录下

3、在public/index.html页面中引入

4、创建组件页面

<template>
  <div
    :class="['player', playerType == 'error' ? 'black' : '']"
    :style="{ width: videoWidth, height: videoHeight }"
    ref="playBox"
  >
    <div class="error" v-if="playerType == 'error'">视频播放异常</div>
    <template v-else>
      <div id="playWnd" ref='playWnd' v-if="playShow" style="width: 100%;height: 100%;">{{ playText }}</div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    //视频地址、video的id值
    videoData: {
      type: Object,
      default: {},
    },
    //视频宽度
    videoWidth: {
      type: String,
      default: "100%",
    },
    //视频高度
    videoHeight: {
      type: String,
      default: "100%",
    },
    // 开始时间
    startTime: {
      type: String,
      default: "",
    },
    // 结束时间
    endTime: {
      type: String,
      default: "",
    }, 
    // playMode 1 回放 0 播放
    playMode: {
      type: Number,
      default: 0,
    },
    videoList: {
      type: Array,
      default: null,
    },
    isFocus: {
      type: Boolean,
      default: false,
    },
    isPaging: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      playerType: "",
      oWebControl: null,
      initCount: 0,
      pubKey: "",
      playText: "",
      playWndWidth: '',
      playWndHeight: '',
      playShow: false
    };
  },
  watch: {
    //监听视频地址、video的id值
    videoData: {
      deep: true,
      immediate: true,
      handler(val) {
        this.$nextTick(() => {
          if (this.videoData && this.videoData.videoID) {
            this.playShow = true
            this.previewClick()
          }
        });
      },
    },
    videoList: {
      deep: true,
      immediate: true,
      handler(val) {
        if (this.videoList && this.videoList.length > 0) {
          this.$nextTick(() => {
            this.playShow = true
            if (this.oWebControl) {
              this.oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
            }
            this.initPlugin()
            setTimeout(()=> {
              this.getSplitVideo()
            }, 3000)
          });
        }
      },
    },
    playMode() {
      this.previewClick()
    },
    isFocus() {
      this.playWndWidth = this.$refs.playBox ? this.$refs.playBox.offsetWidth : 800
      this.playWndHeight = this.$refs.playBox ? this.$refs.playBox.offsetHeight : 600
      if (this.isPaging) {
        if (this.isFocus ) {
          this.oWebControl.JS_CuttingPartWindow(this.playWndWidth/2,this.playWndHeight/2,this.playWndWidth/2,this.playWndHeight/2);
        } else {
          this.oWebControl.JS_RepairPartWindow(this.playWndWidth/2,this.playWndHeight/2,this.playWndWidth/2,this.playWndHeight/2); 
        }
      } 
    }
  },

  mounted() {
    let that = this
    window.addEventListener('resize', () => {
      this.$nextTick(() => {
        if (this.oWebControl) {
          this.playWndWidth = this.$refs.playBox.offsetWidth
          this.playWndHeight = this.$refs.playBox.offsetHeight
          this.oWebControl.JS_Resize(
            that.playWndWidth,
            that.playWndHeight
          )
        }
      })
    })
  },
  methods: {
    // 播放视频
    getVideo() {
      let cameraIndexCode = this.videoData.videoID;     //获取输入的监控点编号值，必填
      let streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
      let transMode = 1;                                      //传输协议：0-UDP，1-TCP
      let gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
      let wndId = -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      this.oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
            cameraIndexCode:cameraIndexCode,                //监控点编号
            streamMode: streamMode,                         //主子码流标识
            transMode: transMode,                           //传输协议
            gpuMode: gpuMode,                               //是否开启GPU硬解
            wndId:wndId                                     //可指定播放窗口
        })
      })
    },
    // 分屏播放视频
    getSplitVideo() {
       //获取输入的监控点编号值，必填
      let streamMode = 0;                                     //主子码流标识：0-主码流，1-子码流
      let transMode = 1;                                      //传输协议：0-UDP，1-TCP
      let gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
      if (this.videoList.length > 0) {
        let temp = []
        this.videoList.forEach((item, index) => {
          let obj = {};
          obj.cameraIndexCode = item.indexCode;
          obj.wndId = index + 1;
          obj.transMode = transMode;
          obj.streamMode = streamMode;
          obj.gpuMode = gpuMode;
          temp.push(obj);
        })
        this.oWebControl.JS_RequestInterface({
          funcName: "startMultiPreviewByCameraIndexCode",
          argument: JSON.stringify({
            list: temp
          })
        })
      }
    },
    // 视频预览功能
    previewClick() {
      if (this.oWebControl) {
        this.getStopPlay()
        this.oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
      }
      this.initPlugin()
     
      setTimeout(()=> {
        // 如果是回放，重新初始化
        if (this.playMode === 1) {
          this.getStartPlay()
        } else {
          this.getVideo();
        }
      }, 3000)
		},
     // 录像回放功能
    getStartPlay() {
      let cameraIndexCode = this.videoData.videoID;     //获取输入的监控点编号值，必填
      let startTimeStamp = new Date(this.startTime).getTime();    //回放开始时间戳，必填
      let endTimeStamp = new Date(this.endTime).getTime();        //回放结束时间戳，必填
      let recordLocation = 0;                                     //主子码流标识：0-主码流，1-子码流
      let transMode = 1;                                      //传输协议：0-UDP，1-TCP
      let gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
      let wndId = -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）
      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      this.oWebControl.JS_RequestInterface({
        funcName: "startPlayback",
        argument: JSON.stringify({
            cameraIndexCode:cameraIndexCode,                //监控点编号
            startTimeStamp: Math.floor(startTimeStamp / 1000).toString(),  //录像查询开始时间戳，单位：秒
            endTimeStamp: Math.floor(endTimeStamp / 1000).toString(),      //录像结束开始时间戳，单位：秒
            recordLocation: recordLocation,                          //主子码流标识
            transMode: transMode,                           //传输协议
            gpuMode: gpuMode,                               //是否开启GPU硬解
            wndId:wndId                                     //可指定播放窗口
        })
      })
    },
    // 停止回放
    getStopPlay() {
      this.oWebControl.JS_RequestInterface({
        funcName: "stopAllPlayback"
      })
    },
    // 创建播放实例
    initPlugin() {
      this.playWndWidth = this.$refs.playBox.offsetWidth
      this.playWndHeight = this.$refs.playBox.offsetHeight
      this.playText = ""
      let that = this;
      that.oWebControl = new WebControl({
        szPluginContainer: "playWnd", // 指定容器id
        iServicePortStart: 15900, // 指定起止端口号，建议使用该值
        iServicePortEnd: 15900,
        szClassId: "23BF3B0A-2C56-4D97-9C03-0CB103AA8F11", // 用于IE10使用ActiveX的clsid
        cbConnectSuccess: function () {
          // 创建WebControl实例成功
          that.oWebControl.JS_StartService("window", {
            // WebControl实例创建成功后需要启动服务
            dllPath: "./VideoPluginConnect.dll", // 值"./VideoPluginConnect.dll"写死
          })
          .then(function () {
            that.$emit('loadingSuccess')
            // 启动插件服务成功
            that.oWebControl.JS_SetWindowControlCallback({
              // 设置消息回调
              cbIntegrationCallBack: that.cbIntegrationCallBack,
            });

            that.oWebControl.JS_CreateWnd("playWnd", that.playWndWidth, that.playWndHeight)
              .then(function () {
                //JS_CreateWnd创建视频播放窗口，宽高可设定
                that.init(); // 创建播放实例成功后初始化
              });
            },
            function () {
              // 启动插件服务失败
              that.playerType = 'error';
            }
          ).catch(() => {

          });
        },
        cbConnectError: function () {
          // 创建WebControl实例失败
          that.oWebControl = null;
          this.playText = "插件未启动，正在尝试启动，请稍候..."
          that.initCount++;
          if (that.initCount < 3) {
            setTimeout(function () {
              that.$nextTick(() => {
                // if (that.videoData.videoID) {
                  that.initPlugin()
                // }
              })
            }, 3000);
          } else {
            this.playText = "插件启动失败，请检查插件是否安装！"
          }
        },
        cbConnectClose: function (bNormalClose) {
          // 异常断开：bNormalClose = false
          // JS_Disconnect正常断开：bNormalClose = true
          that.oWebControl = null;
          this.playText = "插件未启动，正在尝试启动，请稍候..."
          // WebControl.JS_WakeUp("VideoWebPlugin://");
          that.initCount++;
          if (that.initCount < 3) {
            setTimeout(function () {
              that.$nextTick(() => {
                // if (that.videoData.videoID) {
                  that.initPlugin()
                // }
              })
            }, 3000);
          } else {
            // that.$message.info("插件未安装，请下载后安装！")
          }
        },
      });
    },

    // 推送消息
    cbIntegrationCallBack(oData) {
      console.log(oData.responseMsg, 'cbIntegrationCallBack')
    },

    //初始化
    init() {
      let that = this;
      that.getPubKey(function () {
        // 请自行修改以下变量值	
        let appkey = that.videoList && that.videoList.length > 0 && that.videoList[0] && that.videoList[0].appkey ? that.videoList[0].appkey : that.videoData.appkey; //综合安防管理平台提供的appkey，必填
        let secret = that.videoList && that.videoList.length > 0 && that.videoList[0] && that.videoList[0].secret ? that.setEncrypt(that.videoList[0].secret) : that.setEncrypt(that.videoData.secret); //综合安防管理平台提供的secret，必填
        let ip = "10.128.89.2"; //综合安防管理平台IP地址，必填
        let playMode = that.playMode; //初始播放模式：0-预览，1-回放
        let port = 443; //综合安防管理平台端口，若启用HTTPS协议，默认443
        let snapDir = "D:\\SnapDir"; //抓图存储路径
        let videoDir = "D:\\VideoDir"; //紧急录像或录像剪辑存储路径
        let layout = that.videoList && that.videoList.length > 0 ? that.getLayout(that.videoList) : '1x1'
        let enableHTTPS = 1; //是否启用HTTPS协议与综合安防管理平台交互，这里总是填1
        let encryptedFields = "secret"; //加密字段，默认加密领域为secret
        let showToolbar = that.playMode; //是否显示工具栏，0-不显示，非0-显示
        let showSmart = that.playMode; //是否显示智能信息（如配置移动侦测后画面上的线框），0-不显示，非0-显示
        let buttonIDs = "0,16,256,257,258,259,260,512,513,514,515,516,517,768,769"; //自定义工具条按钮
        // 请自行修改以上变量值	

        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窗口重合问题
          });
      });
    },

    //获取公钥
    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();
          }
        });
    },

    //RSA加密
    setEncrypt(value) {
      let that = this;
      let encrypt = new JSEncrypt();
      encrypt.setPublicKey(that.pubKey);
      return encrypt.encrypt(value);
    },
    destroyWnd() {
      if(this.playMode == 1) {
        this.getStopPlay()
      }
      if (this.oWebControl) {
        this.playShow = false
        this.oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
        this.oWebControl.JS_DestroyWnd().then(function(){}, function() {})
        this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" })
        this.oWebControl.JS_Disconnect().then(function(){}, function() {});
      }
    },
    getLayout(list) {
      let layout = "1x1"
      let number = list.length;
      if (list && number > 0) {
        if (number > 1 && number <= 2) {
          layout = "1x2"
        } else if (number > 2 && number <= 4){
          layout = "2x2"
        } else if (number > 4 && number <= 9){
          layout = "3x3"
        } else if (number > 9){
          layout = "4x4"
        }
      }
      return layout;
    }
  },
  destroyed() {
    if (this.oWebControl) {
      this.playShow = false
      this.oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避插件窗口滞后于浏览器消失问题
      this.oWebControl.JS_DestroyWnd().then(function(){}, function() {})
      this.oWebControl.JS_RequestInterface({ funcName: "destroyWnd" })
      this.oWebControl.JS_Disconnect().then(function(){}, function() {});
    }
  }
}
</script>

<style lang="scss" scoped>
.player {
  .error {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #cccccc;
    background: #000;
    .parent-wnd {
      display: none;
    }
  }
}
.black {
  background: #000;
}

</style>

5、组件使用

该组件集成了web视频的三种播放方式，预览、回放和分屏播放。参数说明如下：

videoData：视频信息参数对象，包含appkey、secret、监控点编码-videoID

videoWidth和videoHeight：用于定义视频容器的宽高

startTime和endTime：用于定义视频的开始时间和结束时间，视频回放时使用

playMode：初始播放模式  1 预览 0 回放，默认为预览模式

videoList：多个videoData的集合，分屏播放时使用

isPaging：分屏视频是否显示分页，和videoList组合使用

isFocus：分页选择是否获取焦点，获取焦点扣除部分插件窗口，失去焦点扣除窗口还原

• 预览  

 <VideoWebPlugin
    :videoData="videoData" 
    ref="webPlugin" 
    videoWidth="100%" 
    videoHeight="70vh"
></VideoWebPlugin>

• 回放

<VideoWebPlugin 
    :videoData="videoData"
    ref="webPlugin"
    videoWidth="100%"
    videoHeight="63vh"
    playMode="1" 
    :startTime="startTime"
    :endTime="endTime"
></VideoWebPlugin>

• 分屏播放

<VideoWebPlugin
    :videoList="videoList" 
    :videoData="null" 
    :isFocus="isFocus" 
    :isPaging="isPaging" 
    ref="webPlugin" 
    videoWidth="100%" 
    videoHeight="70vh"
></VideoWebPlugin>