海康威视二次开发笔记（附WebComponentsKit插件及开发Demo） |
您所在的位置：网站首页 › 海康威视一直提示下载插件 › 海康威视二次开发笔记（附WebComponentsKit插件及开发Demo） |
海康威视二次开发笔记（附WebComponentsKit插件及开发Demo）
|
最近遇到客户需要在web页面实时查看监控视频，故写此文章。为记录、也为分享，希望大家对本文的不足之处加以指正。 这里将我用到的方法一一说明，页面尾部附下载连接。
首先设置页面宽高  
var oPlugin = {
iWidth: 730,
iHeight: 400
};
oPlugin
其次传递参数
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
};
oLiveView
检查插件是否已安装（安装插件完成后需要重新启动浏览器），未安装则提示安装插件。其次也要考虑插件版本问题。登录设备开始预览实时画面（这里需注意登录设备时存在无法播放的情况，需要先行登出设备以防无法播放影响用户体验）。
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);
}
});
}
});
View Code
获取模拟通道、数字通道、零通道
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(" " + name + "");
});
//获取模拟通道成功;
},
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(" " + name + "");
});
//获取模拟通道成功;
},
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(" " + name + "");
}
});
//获取模拟通道成功;
},
error: function (status, xmlDoc) {
//获取模拟通道失败！
}
});
}
getChannelInfo
以上是HTML页面所有内容。 注意此种方式目前只支持IE浏览器观看视频。 所以浏览器也需设置一些内容以防止安全性较高的浏览器将我们的ActiveX插件自动拦截或过滤。 IE浏览器打开设置-->Internet选项-->安全-->点击自定义级别-->找到ActiveX控件和插件 设置以下内容： a)对标记为可安全执行脚本的ActiveX控件执行脚本。启用 b)对未标记为可安全执行脚本的ActiveX控件初始化并执行脚本。提示 c)二进制和脚本行为。启用 d)下载未签名的ActiveX控件。提示 e)下载已签名的ActiveX控件。提示 f)允许运行以前未使用的ActiveX控件而不提示。启用 g)运行ActiveX控件和插件。启用 h)设置完毕后重启浏览器。在这里需要说明一下，安装插件是一定要注意插件版本及操作系统的版本。 附件下载连接 提取码：16b4 点击跳转 海康威视其他版本插件及Demo 使用该文件时将codebase文件夹放至项目根目录。
以上内容就是本次的开发过程（有用别忘记点 推荐），为记录、也为分享。
|
【本文地址】
今日新闻 |
推荐新闻 |