海康威視 web端開發經驗 （二）

  上篇博客介紹了海康威視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，成功展示多個攝像頭。歡迎大家留言討論。