海康威视二次开发笔记（附WebComponentsKit插件及开发Demo）
最近遇到客户需要在web页面实时查看监控视频，故写此文章。为记录、也为分享，希望大家对本文的不足之处加以指正。
这里将我用到的方法一一说明，页面尾部附下载连接。
首先设置页面宽高
var oPlugin = { iWidth: 730, iHeight: 400 };
其次传递参数
var oLiveView = { iProtocol: 1, // 协议 1：http, 2:https szIP: "@ip", // ip szPort: "@port", // port szUsername: "@userName", // username szPassword: "@password", // password iStreamType: 1, // stream 1：main stream 2：sub-stream 3：third stream 4：transcode stream bZeroChannel: false };
检查插件是否已安装（安装插件完成后需要重新启动浏览器），未安装则提示安装插件。其次也要考虑插件版本问题。登录设备开始预览实时画面（这里需注意登录设备时存在无法播放的情况，需要先行登出设备以防无法播放影响用户体验）。
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort; $(function () { //检查插件是否已经安装过 var iRet = WebVideoCtrl.I_CheckPluginInstall(); if (-1 == iRet) { alert("您还未安装过插件，双击开发包目录里的WebComponents.exe安装！"); return; } // 初始化插件参数及插入插件 WebVideoCtrl.I_Logout(szDeviceIdentify); //登出 WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, { bWndFull: true, //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持 iWndowType: 1, cbInitPluginComplete: function () { WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); // 检查插件是否最新 if (-1 == WebVideoCtrl.I_CheckPluginVersion()) { alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！"); return; } // 登录设备 WebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, { success: function (xmlDoc) { getChannelInfo(); //获取通道 // 开始预览 setTimeout(function () { WebVideoCtrl.I_Stop(); WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iStreamType: oLiveView.iStreamType, iChannelID: oLiveView.iChannelID, bZeroChannel: oLiveView.bZeroChannel }); }, 1000); } }); } });
获取模拟通道、数字通道、零通道
function getChannelInfo() { var channels = $("#channels").empty(); // 模拟通道 WebVideoCtrl.I_GetAnalogChannelInfo(szDeviceIdentify, { async: false, success: function (xmlDoc) { var oChannels = $(xmlDoc).find("VideoInputChannel"); $.each(oChannels, function (i) { var id = $(this).find("id").eq(0).text(), name = $(this).find("name").eq(0).text(); if ("" == name) { name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1)); } channels.append("<li><a onclick=clickStartRealPlay('" + id + "')> " + name + "</a></li>"); }); //获取模拟通道成功; }, error: function (status, xmlDoc) { //获取模拟通道失败！ } }); // 数字通道 WebVideoCtrl.I_GetDigitalChannelInfo(szDeviceIdentify, { async: false, success: function (xmlDoc) { var oChannels = $(xmlDoc).find("InputProxyChannelStatus"); $.each(oChannels, function (i) { var id = $(this).find("id").eq(0).text(), name = $(this).find("name").eq(0).text(), online = $(this).find("online").eq(0).text(); if ("false" == online) { // 过滤禁用的数字通道 return true; } if ("" == name) { name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1)); } channels.append("<li><a onclick=clickStartRealPlay('" + id + "')> " + name + "</a></li>"); }); //获取模拟通道成功; }, error: function (status, xmlDoc) { //获取模拟通道失败！ } }); // 零通道 WebVideoCtrl.I_GetZeroChannelInfo(szDeviceIdentify, { async: false, success: function (xmlDoc) { var oChannels = $(xmlDoc).find("ZeroVideoChannel"); $.each(oChannels, function (i) { var id = $(this).find("id").eq(0).text(), name = $(this).find("name").eq(0).text(); if ("" == name) { name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1)); } if ("true" == $(this).find("enabled").eq(0).text()) { // 过滤禁用的零通道 channels.append("<li><a onclick=clickStartRealPlay('" + id + "')> " + name + "</a></li>"); } }); //获取模拟通道成功; }, error: function (status, xmlDoc) { //获取模拟通道失败！ } }); }
以上是HTML页面所有内容。
注意此种方式目前只支持IE浏览器观看视频。
所以浏览器也需设置一些内容以防止安全性较高的浏览器将我们的ActiveX插件自动拦截或过滤。
IE浏览器打开设置-->Internet选项-->安全-->点击自定义级别-->找到ActiveX控件和插件 设置以下内容：
a)对标记为可安全执行脚本的ActiveX控件执行脚本。启用 b)对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本。提示 c)二进制和脚本行为。启用 d)下载未签名的ActiveX控件。提示 e)下载已签名的ActiveX控件。提示 f)允许运行以前未使用的ActiveX控件而不提示。启用 g)运行ActiveX控件和插件。启用 h)设置完毕后重启浏览器。
在这里需要说明一下，安装插件是一定要注意插件版本及操作系统的版本。
附件下载连接 提取码：16b4
使用该文件时将codebase文件夹放至项目根目录。
以上内容就是本次的开发过程（有用别忘记点 推荐），为记录、也为分享。
