基于vue2和海康威视WEB3.3控件开发包 V3.3实现监控预览

---

一、环境准备

1.官网下载开发包

官网链接：海康开放平台

2.引入资源包

资源包引入方式有多种，我采用以下方式引入

资源包：

在pubilic下新建一个文件夹用来存放资源包

将资源包引入项目中。

3.启动视频播放插件

二、使用步骤

1.检查浏览器

WEB3.3插件支持Win32&Win64，支持的浏览器：Chrome57+、Firefox52+

if (
  this.ua.match(/chrome/) != null &&
  parseInt(this.ua.match(/chrome(e|ium)\/([0-9]+)\./)[2], 10) >= 57
) {
   
  this.browserType = "谷歌";
} else if (
  this.ua.match(/firefox/) != null &&
  parseInt(this.ua.match(/firefox\/([0-9]+)\./)[1], 10) >= 52
) {
   
  this.browserType = "火狐";
} else {
   
  this.$notify({
   
    title: "失败",
    message: "请在Chrome57+或Firefox52+模式下查看摄像头",
    type: "error",
  });
}

2.检测是否按照插件

videoInitPlugin() {
   
  this.$nextTick(() => {
   
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (iRet === -1) {
   
      console.log("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装");
      //自动安装插件
      window.location.href = "/WebComponentsKit.exe"; //插件WebComponentsKit.exe实际位置
      return;
    }
    this.initPlugin();
  });
}

3.初始化插件

initPlugin() {
   
  WebVideoCtrl.I_InitPlugin({
   
    bWndFull: true, //单窗口双击全屏，默认支持，true(支持)，false(不支持)。 (最大显示数值为 4*4 分割，数字超过 4 返回 16 分割)
    iWndowType: 2, //分屏类型：1- 1*1，2- 2*2，3- 3*3，4- 4*4 默认值为 1，单画面
    cbInitPluginComplete: function () {
   	//插件初始化完成回调，必须要定义
      ......
    },
  });
}

4.嵌入插件

//"divPlugin"为插件容器的 ID，HTML 的 DOM 元素
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin").then(() => {
   	
  ......
});

5.登录设备

WebVideoCtrl.I_Login(
  that.hkvInfo.ip,	//设备的 IP 地址
  1,	//http 协议，1 表示 http 协议 2 表示 https 协议
  that.hkvInfo.port,	//登录设备的 http/https 端口号，根据 iPrototocol 选择传入不同的端口
  that.hkvInfo.username,	//登录用户名称
  that.hkvInfo.password,	//用户密码
  {
   
    timeout: 3000,
    success: function (xmlDoc) {
   
      that.getChannelInfo();
      that.getDevicePort(that.hkvInfo.ip);
    },
    error: function (oError) {
   
      var ERROR_CODE_LOGIN_NOLOGIN = 2000; // 未登录
      var ERROR_CODE_LOGIN_REPEATLOGIN = 2001; //设备已登录，重复登录
      var ERROR_CODE_LOGIN_NOSUPPORT = 2002; //当前设备不支持Digest登录
      if (ERROR_CODE_LOGIN_REPEATLOGIN === status) {
   
        console.log(" 已登录过！");
      } else {
   
        console.log(" 登录失败！", oError);
      }
    },
  }
);

6.获取设备通道

获取通道，实际上可以根据自己的项目，获取数字通道，模拟通道，零通道中的一个或多个，不用全部获取（提高效率），以下是获取数字通道。

async getChannelInfo() {
   
  var that = this;
  var szDeviceIdentify =