? 上篇博客介紹了?？低晄dk以及web端的開(kāi)發(fā)，成功預(yù)覽。還沒(méi)有成功的朋友可以去看一下上一篇文章

??關(guān)于?？低晄dk與?？低晈eb的史上最精細(xì)的教程 （一）

但都是單個(gè)攝像頭，心里總有個(gè)疑問(wèn)，倆個(gè)攝像頭同時(shí)預(yù)覽該怎么實(shí)現(xiàn)呢，經(jīng)過(guò)和前端同時(shí)半天的探索，終于弄明白了，得到了如下的成果。

下面就簡(jiǎn)單說(shuō)一下流程：

1.打開(kāi)頁(yè)面初始化插件

// 初始化插件 // 全局保存當(dāng)前選中窗口 var g_iWndIndex = 0; //可以不用設(shè)置這個(gè)變量，有窗口參數(shù)的接口中，不用傳值，開(kāi)發(fā)包會(huì)默認(rèn)使用當(dāng)前選擇窗口 $(function () {// 檢查插件是否已經(jīng)安裝過(guò)if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {alert("您還未安裝過(guò)插件，下載WebComponents.exe安裝！");return;}// 初始化插件參數(shù)及插入插件WebVideoCtrl.I_InitPlugin(951.5, 360, {iWndowType: 2,cbSelWnd: function (xmlDoc) {g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();var szInfo = "當(dāng)前選擇的窗口編號(hào)：" + g_iWndIndex;showCBInfo(szInfo);}});WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");// 檢查插件是否最新if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {alert("檢測(cè)到新的插件版本，請(qǐng)將WebComponents.exe升級(jí)！");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"});}}});//初始化日期時(shí)間var szCurTime = dateFormat(new Date(), "yyyy-MM-dd");$("#starttime").val(szCurTime + " 00:00:00");$("#endtime").val(szCurTime + " 23:59:59");?//這里要用setTimeout調(diào)用登錄和預(yù)覽方法 ，如果直接調(diào)用? 會(huì)打不開(kāi)窗口 ，因?yàn)榧虞d時(shí)需要時(shí)間的clickLogin();setTimeout(function () {clickStartRealPlay()}, 2000)});

?

2寫(xiě)一個(gè)登錄方法，將后臺(tái)每臺(tái)攝像機(jī)的屬性信息傳過(guò)來(lái)，循環(huán)登陸。

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.這一步相當(dāng)于點(diǎn)擊預(yù)覽功能，將每個(gè)設(shè)備的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是選定的窗口號(hào)?? ，在不傳的情況下是默認(rèn)為0，我用I表示，可以按循環(huán)打開(kāi)固定的窗口號(hào)

這一步用于展示窗口，有1*1，2*2，3*3，4*4四種展示格式，分別對(duì)應(yīng)1，2，3，4。以自己的設(shè)備為準(zhǔn)。

?? ???if(ce02m.length>9){changeWndNum(4);}else{if(ce02m.length>4){changeWndNum(3);}else{changeWndNum(2);}

ok，成功展示多個(gè)攝像頭。歡迎大家留言討論。

總結(jié)

以上是生活随笔為你收集整理的海康威视 web端开发经验 （二）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。