最近在開(kāi)發(fā)過(guò)程中? 需要用到海康威視的攝像頭 在web端展示? 在各種百度之后 發(fā)現(xiàn)網(wǎng)上很難找到一個(gè)? 簡(jiǎn)便，可靠的教程

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

言歸正傳??

首先需要下載一個(gè)海康威視開(kāi)發(fā)包（百度搜索“ 海康威視web開(kāi)發(fā)包”）也可以給我留言索要 提供3.0開(kāi)發(fā)包

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

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

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

第二步：將文件夾中?

demo.js?

demo.css?

webVideoCtrl.js

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

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

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

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

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

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

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

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

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í)間的

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

2寫(xiě)一個(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.打開(kāi)頁(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)打開(kāi)幾個(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)打開(kāi)固定的窗口號(hào)? changeWndNum這個(gè)方法是打開(kāi)幾個(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)整?? 不然窗口是無(wú)變化的

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

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

總結(jié)

以上是生活随笔為你收集整理的java开发调用海康威视摄像头的web端页面开发心得的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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