上篇博客介绍了海康威视sdk以及web端的开发,成功预览。还没有成功的朋友可以去看一下上一篇文章
关于海康威视sdk与海康威视web的史上最精细的教程 (一)
但都是单个摄像头,心里总有个疑问,俩个摄像头同时预览该怎么实现呢,经过和前端同时半天的探索,终于弄明白了,得到了如下的成果。
下面就简单说一下流程:
1.打开页面初始化插件
// 初始化插件
// 全局保存当前选中窗口
var g_iWndIndex = 0; //可以不用设置这个变量,有窗口参数的接口中,不用传值,开发包会默认使用当前选择窗口
$(function () {
// 检查插件是否已经安装过
if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
alert("您还未安装过插件,下载WebComponents.exe安装!");
return;
}
// 初始化插件参数及插入插件
WebVideoCtrl.I_InitPlugin(951.5, 360, {
iWndowType: 2,
cbSelWnd: function (xmlDoc) {
g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
var szInfo = "当前选择的窗口编号:" + g_iWndIndex;
showCBInfo(szInfo);
}
});
WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
// 检查插件是否最新
if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
alert("检测到新的插件版本,请将WebComponents.exe升级!");
return;
}
// 窗口事件绑定
$(window).bind({
resize: function () {
var $Restart = $("#restartDiv");
if ($Restart.length > 0) {
var oSize = getWindowSize();
$Restart.css({
width: oSize.width + "px",
height: oSize.height + "px"
});
}
}
});
//初始化日期时间
var szCurTime = dateFormat(new Date(), "yyyy-MM-dd");
$("#starttime").val(szCurTime + " 00:00:00");
$("#endtime").val(szCurTime + " 23:59:59");
//这里要用setTimeout调用登录和预览方法 ,如果直接调用 会打不开窗口 ,因为加载时需要时间的
clickLogin();
setTimeout(function () {
clickStartRealPlay()
}, 2000)
});
2写一个登录方法,将后台每台摄像机的属性信息传过来,循环登陆。
var ce02m=new Array();
var ce03m=new Array();
var ce04m=new Array();
var ce05m=new Array();
<c:forEach items="${monitor}" var="monitor11">
ce02m.push("${monitor11.ce02}");
ce03m.push("${monitor11.ce03}");
ce04m.push("${monitor11.ce04}");
ce05m.push("${monitor11.ce05}");
</c:forEach>
var szIP = ce02m;
var szPort = ce05m;
var szUsername = ce03m;
var szPassword = ce04m;
// 登录
function clickLogin() {
for(var i=0;i<szIP.length;i++){
var iRet = WebVideoCtrl.I_Login(szIP[i], 1, szPort[i], szUsername[i], szPassword[i], {
});
}
}
3.这一步相当于点击预览功能,将每个设备的ip传入I_StartRealPlay()方法中.
function clickStartRealPlay() {
for(var i=0;i<szIP.length;i++){
iWndIndex=i;
var iRet = WebVideoCtrl.I_StartRealPlay(szIP[i], {
iWndIndex:iWndIndex
});
}
}
iWndIndex是选定的窗口号 ,在不传的情况下是默认为0,我用I表示,可以按循环打开固定的窗口号
这一步用于展示窗口,有1*1,2*2,3*3,4*4四种展示格式,分别对应1,2,3,4。以自己的设备为准。
if(ce02m.length>9){
changeWndNum(4);
}else{
if(ce02m.length>4){
changeWndNum(3);
}else{
changeWndNum(2);
}
ok,成功展示多个摄像头。欢迎大家留言讨论。