海康威视web开发包开发使用说明

首言：

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

首言：

一、海康威视开发平台：

1、下载开发工具包文档

2、无插件下载直达通道

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

二、3.2无插件开发

1、需要引用的js包

2、开发api

3、注意事项

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

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

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

四、其他说明

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

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

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

一、海康威视开发平台：

网址：海康开放平台

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

1、下载开发工具包文档

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

进行下载。

2、无插件下载直达通道

无插件版本-2022-0726-下载直达链接https://www.aliyundrive.com/s/2pSQbebKTPA

双击打开解压包含demo，接口文档，插件,升级包。-前端大佬-Blueming-提供-大佬亲测新版本

有兴趣的，可以加他微信，进行相关技术友好交流-wx:yujy0905

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

进行咨询问题

二、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:MP4iWndowType: 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,//播放通道号，默认通道 1iChannelID: 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个窗口