最近在開發(fā)過程中 需要用到?？低暤臄z像頭 在web端展示 在各種百度之后 發(fā)現(xiàn)網(wǎng)上很難找到一個(gè) 簡(jiǎn)便，可靠的教程

在摸索著完成項(xiàng)目之后 ，決定寫一篇攻略 造福有需求的小伙伴

言歸正傳

首先需要下載一個(gè)?？低曢_發(fā)包（百度搜索“ ?？低晈eb開發(fā)包”）也可以給我留言索要 提供3.0開發(fā)包

第一步：打開下載好的文件之后在找到demo文件夾下codebase

點(diǎn)擊webComponents.exe安裝 注意版本號(hào)和 32位 64位（這里跟正一下 木有64位）

如果沒有合適的 請(qǐng)去官網(wǎng)下載

第二步：將文件夾中

demo.js

demo.css

webVideoCtrl.js

這3個(gè)文件導(dǎo)入你的項(xiàng)目，還需要jquery 沒有的小伙伴可以導(dǎo)開發(fā)包里面的1.7

這時(shí)候?qū)腴_發(fā)包的html文件 是可以打開這樣一個(gè)頁(yè)面

OK demo 打開了 在登錄輸入你攝像機(jī)配置的地址 和賬號(hào) 密碼 端口號(hào) 點(diǎn)擊登錄

可以查看到 已登錄 設(shè)備 點(diǎn)擊 已登錄 設(shè)備 選中窗口 點(diǎn)擊預(yù)覽

這時(shí)候畫面就可以出來了 （引入的JS注意地址哦 ）

第一步 完成 我們已經(jīng)連接上攝像頭了

下面 就開始做我們需要的功能的 web開發(fā)包里面 已經(jīng)提供了 API的說明文檔 我們只需要對(duì)照API 調(diào)用webVideoCtrl.js里面的方法 來實(shí)現(xiàn)我們需要的功能

比如我需要的是一個(gè) 在頁(yè)面打開的時(shí)候 打開事件匹配的監(jiān)視器同時(shí)展示在頁(yè)面，根據(jù)監(jiān)視器的數(shù)量打開一定的窗口。

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

// 初始化插件

// 全局保存當(dāng)前選中窗口
var g_iWndIndex = 0; //可以不用設(shè)置這個(gè)變量，有窗口參數(shù)的接口中，不用傳值，開發(fā)包會(huì)默認(rèn)使用當(dāng)前選擇窗口
$(function () {
// 檢查插件是否已經(jīng)安裝過
if (-1 == WebVideoCtrl.I_CheckPluginInstall()) {
alert("您還未安裝過插件，下載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ì)打不開窗口 ，因?yàn)榧虞d時(shí)需要時(shí)間的

window.setTimeout(clickLogin(),1000);
window.setTimeout(clickStartRealPlay(),1000);

});

2寫一個(gè)登錄方法

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], {
});
}

}

WebVideoCtrl.I_Login()需要傳4個(gè)值 賬號(hào) 地址 密碼 端口 端口默認(rèn)是80 可以不傳

我是從后臺(tái)接收了一個(gè)list<model>在JS里面用forEach遍歷進(jìn)Array()

3.打開頁(yè)面

function clickStartRealPlay() {
for(var i=0;i<szIP.length;i++){
iWndIndex=i;
var iRet = WebVideoCtrl.I_StartRealPlay(szIP[i], {
iWndIndex:iWndIndex
});
}

//幾個(gè)賬號(hào)打開幾個(gè)窗口

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

WebVideoCtrl.I_StartRealPlay需要傳地址 ，這是必須的

iWndIndex是選定的窗口號(hào) ，在不傳的情況下是默認(rèn)為0，我用I表示，可以按循環(huán)打開固定的窗口號(hào) changeWndNum這個(gè)方法是打開幾個(gè)窗口 默認(rèn)4種格式 1*1 2*2

3*3 4*4根據(jù)分別對(duì)應(yīng)參數(shù) 1 2 3 4

剩下jsp只需要調(diào)用一下窗口樣式 和映入的js CSS文件

<div id="divPlugin" class="plugin"></div>

如果需要調(diào)整窗口大小 去CSS里面找到plugin

/*插件*/
.plugin
{
width:951.5px;
height:360px;
}

注意 哦 在加載的時(shí)候也要做一次調(diào)整 不然窗口是無變化的

// 初始化插件參數(shù)及插入插件
WebVideoCtrl.I_InitPlugin(951.5, 360, {}

OK 功能完美實(shí)現(xiàn)