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

最新推荐文章于 2024-05-28 16:13:22 发布

asdfadafd

最新推荐文章于 2024-05-28 16:13:22 发布

阅读量2.9k

点赞数 1

分类专栏：前端 html 文章标签： vue.js 前端 websocket

本文链接：https://blog.csdn.net/asdfadafd/article/details/123397672

版权

前端同时被 2 个专栏收录

47 篇文章 6 订阅

订阅专栏

html

47 篇文章 0 订阅

订阅专栏

首言：

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

三、在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%", {
    bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
    iPackageType: 2,
    //szColorProperty:"plugin-background:0000ff; sub-background:00B2BF; sub-border:e7eaec; sub-border-select:0000ff",   //2:PS 11:MP4
    iWndowType: 3,
    bNoPlugin: true,//是否启用无插件
    cbSelWnd: function (xmlDoc) {
      g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
      const szInfo = "当前选择的窗口编号：" + g_iWndIndex;
      console.log(szInfo);
    },
    cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
      let szInfo = "当前放大的窗口编号：" + iWndIndex;
      if (!bFullScreen) {
        szInfo = "当前还原的窗口编号：" + iWndIndex;
      }
      console.log(szInfo);
    },
    cbEvent: function (iEventType, iParam1, iParam2) {
      if (2 == iEventType) {// 回放正常结束
        showCBInfo("窗口" + iParam1 + "回放结束！");
      } else if (-1 == iEventType) {
        showCBInfo("设备" + iParam1 + "网络错误！");
      } else if (3001 == iEventType) {
        clickStopRecord(g_szRecordType, iParam1);
      }
    },
    cbRemoteConfig: function () {
      console.log("关闭远程配置库！");
    },
    cbInitPluginComplete: function () {
      WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
      //WebVideoCtrl.I_InsertOBJECTPlugin("divPluginTwo");

      // 检查插件是否最新
      if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
        Notification.warning({
          title: '提示',
          message: "检测到新的插件版本，双击WebComponentsKit.exe升级！",
        });
        return;
      }
    }
  });
}


// 登录
function clickLogin(szIP, szPort, szUsername, szPassword) {
  /*
  * szIP 设备的 IP 地址或者普通域名(比如花生壳域名)
  iPrototocol  http 协议，1 表示 http 协议 2 表示 https 协议
  iPort  登录设备的 http/https 端口号，根据 iPrototocol 选择传入不同的端口
  szUserName  登录用户名称
  szPassword  用户密码
  options 可选参数对象:
  async  http 交互方式，true 表示异步，false 表示同步
  cgi  CGI 协议选择，1 表示 ISAPI，2 表示 PSIA，如果不传这个参数，会
  自动选择一种设备支持的协议.
  success  成功回调函数，有一个参数，表示返回的 XML 内容。
  error  失败回调函数，有两个参数，第一个是 http 状态码，第二个是设
  备返回的 XML(可能为空)
  * */
  var iRet = WebVideoCtrl.I_Login(
    szIP,
    1,
    szPort,
    szUsername,
    szPassword,
    {
      success: function (xmlDoc) {
        console.log('登录成功')
      }, error: function () {
        console.log('登录失败！');
      }
    });
}

//获取数字通道


// 开始预览
function clickStartRealPlay(szIP, iStreamType, iWndIndex, iChannelID) {
  console.log("窗口"+iWndIndex+"开始预览");
  var iRet = WebVideoCtrl.I_StartRealPlay(szIP, {
    //码流类型 1-主码流，2-子码流，默认使用主码流预览
    iStreamType: iStreamType,
    //播放窗口，如果不传，则默认使用当前选择窗口播放（默认选中窗口 0）
    iWndIndex: iWndIndex,
    //播放通道号，默认通道 1
    iChannelID: iChannelID,
    bZeroChannel: false,
    success: function () {
      console.log("预览成功");
    },error: function (status, xmlDoc) {
      console.log("预览error");
      let szInfo;
      if (403 === status) {
        szInfo = "设备不支持Websocket取流！";
      } else {
        szInfo = "开始预览失败！";
      }
      console.log(szIP + " " + szInfo+xmlDoc);
    }
  });
}

其他功能详情请见开发文档。

3、注意事项

a、插件初始化的div必须指定宽高度

<div id="divPlugin" class="plugin"></div>

<style scoped>
  .plugin{
    width:100%;
    height:48.7%;
  }
</style>

b、同时初始化插件宽高需要指定为100%

函数： I_InitPlugin(szWidth, szHight, options)
功能： 初始化插件的各种属性
参数： szWidth 插件的宽度（单位为”px”， 100%表示撑满插件容器）
szHight  插件的高度（单位为”px”， 100%表示撑满插件容器）

否则则会在高版本浏览器初始化直接显示16个窗口