? 上篇博客介紹了海康威視sdk以及web端的開發，成功預覽。還沒有成功的朋友可以去看一下上一篇文章

??關于?？低晄dk與海康威視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端开发经验 （二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。