最近在開發過程中? 需要用到海康威視的攝像頭 在web端展示? 在各種百度之后 發現網上很難找到一個? 簡便，可靠的教程

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

言歸正傳??

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

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

點擊webComponents.exe安裝?? 注意版本號和? 32位 64位（這里跟正一下?? 木有64位）

如果沒有合適的? 請去官網下載

第二步：將文件夾中?

demo.js?

demo.css?

webVideoCtrl.js

這3個文件導入你的項目，還需要jquery?? 沒有的小伙伴可以導開發包里面的1.7

這時候導入開發包的html文件? 是可以打開這樣一個頁面

OK??? demo? 打開了?? 在登錄輸入你攝像機配置的地址 和賬號? 密碼? 端口號?? 點擊登錄

? 可以查看到 已登錄 設備?? 點擊 已登錄 設備?? 選中窗口? 點擊預覽???

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

第一步 完成?? 我們已經連接上攝像頭了

下面 就開始做我們需要的功能的?? web開發包里面 已經提供了 API的說明文檔? 我們只需要對照API? 調用webVideoCtrl.js里面的方法? 來實現我們需要的功能

比如我需要的是一個? 在頁面打開的時候? 打開事件匹配的監視器同時展示在頁面，根據監視器的數量打開一定的窗口。

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調用登錄和預覽方法 ，如果直接調用? 會打不開窗口 ，因為加載時需要時間的

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

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

?? ?}

WebVideoCtrl.I_Login()需要傳4個值?? 賬號? 地址 密碼? 端口? 端口默認是80? 可以不傳

我是從后臺接收了一個list<model>在JS里面用forEach遍歷進Array()

3.打開頁面

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

//幾個賬號打開幾個窗口

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

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

iWndIndex是選定的窗口號?? ，在不傳的情況下是默認為0，我用I表示，可以按循環打開固定的窗口號? changeWndNum這個方法是打開幾個窗口? 默認4種格式? 1*1 2*2

3*3 4*4根據分別對應參數 1 2 3 4

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

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

如果需要調整窗口大小? 去CSS里面找到plugin

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

注意 哦? 在加載的時候也要做一次調整?? 不然窗口是無變化的

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

OK?? 功能完美實現

總結

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

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