海康威视 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，成功展示多个摄像头。欢迎大家留言讨论。

海康威视 web端开发经验 （二）

猜你喜欢

海康威视 web端开发经验（二）