仿海康網(wǎng)頁版做一個在線的實時監(jiān)控網(wǎng)站（2）-- 視屏顯示和云臺控制

在上一篇博客仿海康網(wǎng)頁版做一個在線的實時監(jiān)控網(wǎng)站（1）中講了側(cè)邊站點選擇欄的生成，這篇博客主要說一下視屏插件的擺放和一些云臺控制的操作函數(shù)

首先海康的攝像頭可以找他們要一個網(wǎng)頁版的開發(fā)Demo，如果沒有我提供一個：海康開發(fā)Demo包

主要的文件有三個，一個是.exe的插件，要預覽視頻一定要這個插件，然后是demo.js以及webVideoCtrl.js

因為我在站點選擇的時候就自動登錄了，所以我要把原來的的登陸按鈕所需要的參數(shù)封裝起來，我首先定義了幾個全局變量，然后在點擊站點的時候賦值，很好理解，代碼如下：

 1 var szIP = "",
 2     szPort = "",
 3     szUsername = "",
 4     szPassword = "",
 5     szInfo = "";
 6     szChannel = "";
 7     sziWndowType = 3;
 8 
 9 function openvideo(a) {
10     szIP = a.szip;
11     szPort = a.szPort,
12     szUsername = a.szUsername,
13     szPassword = a.szPassword;
14     szChannel = a.szchannel;
15 }

View Code

在點擊站點選擇的時候?qū)嵗痮penvideo()函數(shù)即可

第二需要改變視頻插件框的大小，根據(jù)頁面的大小可以自動適應(yīng)，于是我把初始化的相關(guān)步驟也封裝了起來，在頁面生成的時候加載就行了

 1 var getvideosize =  function (b) {
 2     // 初始化插件參數(shù)及插入插件
 3     WebVideoCtrl.I_InitPlugin(b.videowidth,b.videoheight, {
 4         iWndowType: sziWndowType,
 5         cbSelWnd: function (xmlDoc) {
 6             g_iWndIndex = $(xmlDoc).find("SelectWnd").eq(0).text();
 7         }
 8     });
 9     WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
10 
11     //初始化日期時間
12     var szCurTime = dateFormat(new Date(), "yyyy-MM-dd");
13     $("#starttime").val(szCurTime + " 00:00:00");
14     $("#endtime").val(szCurTime + " 23:59:59");
15 };

封裝函數(shù)

1     var videoheight = document.getElementById("video").offsetHeight;
2     var videowidth = document.getElementById("video").offsetWidth;
3 
4     var b = new videosize(videoheight, videowidth);
5     getvideosize(b);

根據(jù)頁面大小傳參

第三個是選擇的窗口號，在我做的時候窗口號默認是從0開始，也就是第一個窗口，如果我們需要改變窗口號，需要到webVideoCtrl.js里找到顯示視屏的函數(shù)，將窗口號定義成形參即可

知道了這個幾個，其他的根據(jù)Demo開發(fā)就好，還是比較容易上手的，做完之后的界面如圖所示：

這里推薦幾個網(wǎng)站，對于前端來說還是有點用的：

后期我會在碼云上傳一個閹割掉ajax的版本，各位自取

posted @ 2017-09-21 13:38 StephenCurry 閱讀(6575) 評論(14) 收藏舉報

刷新頁面返回頂部

StephenCurry

仿海康網(wǎng)頁版做一個在線的實時監(jiān)控網(wǎng)站（2）-- 視屏顯示和云臺控制

公告