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