海康威视web3.2开发包开发使用说明

首言：

通过海康威视的最新web开发包工具进行js调用引入至vue项目中，实现监控设备的对接，监控功能的实现。3.2无插件js库同时支持插件安装的模式。

目录

首言：

一、海康威视开发平台：

?1、下载开发工具包文档

2、专家支持在线咨询问题

二、3.2无插件开发

1、需要引用的js包

2、开发api

3、注意事项

三、在VUE项目中多个页面引用插件进行监控视频实时显示

1、把初始化过程抽象为一个组件

2、在不同页面中进行调用

四、其他说明

1、无插件开发包必须使用nginx代理（无论是测试还是生产环境）

2、设备必须要支持webSocket取流

在nginx配置文件中server中添加如下配置

---

一、海康威视开发平台：

网址：https://open.hikvision.com/

可以下载开发包文档，在线咨询客户，需要注册账号使用。

1、下载开发工具包文档

选择对应的开发类型需要的开发包：

进行下载。

2、专家支持在线咨询问题

进行咨询问题

二、3.2无插件开发

1、需要引用的js包

这些是必须引入的。

其中

这三个js需要直接script引入至项目中

其他的只要按照对应的路径复制到项目中，会被其他代码自动加载。

2、开发api

//参数
bNoPlugin: true,//是否启用无插件

//初始化
// 全局保存当前选中窗口
var g_iWndIndex = 0; //可以不用设置这个变量，有窗口参数的接口中，不用传值，开发包会默认使用当前选择窗口
function initWebKIK() {
  //检查浏览器是否支持无插件
  if (!WebVideoCtrl.I_SupportNoPlugin()) {
    Notification.warning({
      title: '提示',
      message: "当前浏览器不支持无插件预览监控视频，已自动切换成插件模式，如果还未安装插件请安装",
    });
    // 检查插件是否已经安装过
    const iRet = window.WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
      Notification.warning({
        title: '提示',
        message: "您还未安装过插件，请先下载WebComponentsKit.exe双击安装！",
      });
      return;
    }
  }
  // 初始化插件参数及插入插件
  WebVideoCtrl.I_InitPlugin("100%", "100%&