最近客戶提需要,需要在現有的系統中集成視頻監控功能,攝像頭是大華的。而大華又沒有關於java的sdk,官網只能下載到c++的demo和dll文件。無奈只能自己在網上找了,最後找到了一些解決辦法,把實現方法記錄一下。
使用Jna技術調用大華dll
在大華官網下載sdk,傳送門;下載完成後解壓,將裏面的庫文件複製到其他文件夾以方便jna的調用。具體可以查看demo:java後端大華攝像頭二次開發demo,因爲這種方式使用java的swing窗口開發比較方便,由於這次是做web端開發,所以沒有詳細的去了解,這裏不作詳細分析,可以查看上面的demo。
使用ie的activex插件
這種方式實現的功能較少,只有實時視頻、抓圖、錄製視頻功能。而且只支持ie瀏覽器。
1.下載插件並註冊
2.使用object元素添加視頻
<object classid="clsid:30209FBC-57EB-4F87-BF3E-740E3D8019D2" codebase="" id="id" name="playOcx" align="center" width="350" height="300px">
</object>
3.js調用開啓實時視頻
//獲取object元素js對象
var SSOcx = document.getElementById(id);
//登錄視頻
var flag = SSOcx.SetDeviceInfo("ip", "端口", "通道", "用戶名", "密碼");
if (flag) {
//開啓實時視頻監控
SSOcx.StartPlay();
} else {
return false;
}
4.實時視頻全屏實現
全屏button:
<button class="btn btn-white btn-sm" onclick="reqFullScreen(document.getElementById('id'))">
<i class="fa fa-arrows-alt"></i>全屏 </button>
全屏js:
<script type="text/javascript">
var width = "";
var height = "";
//進入全屏
function reqFullScreen(element) {
console.log(element.width)
var de = element;
if (de.requestFullscreen) {
de.requestFullscreen();
remoceWH(de);
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
remoceWH(de);
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
remoceWH(de);
} else if (de.msRequestFullscreen) {
de.msRequestFullscreen();
doc = de;
remoceWH(de);
} else {
console.log("進入全屏失敗")
}
}
function remoceWH(element) {
//保存原始的寬高
width = element.getAttribute("width");
height = element.getAttribute("height");
//移除object元素的寬高
element.removeAttribute("width");
element.removeAttribute("height");
}
//退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
setWH();
}
function setWH() {
$("object[name='playOcx']").each(function () {
$(this).attr("width", width);
$(this).attr("height", height);
});
}
//監聽esc事件
$(document).keyup(function (event) {
switch (event.keyCode) {
case 27:
exitFullscreen();
break;
}
});
</script>
5.總結
這種方式實現起來還算方便,但是功能較少。不支持音頻等。
使用webplugin.exe插件
這種方式也是使用別人開發的插件,但是功能幾乎都有。在web開發這種方式應該也是最好的了。但是也有侷限性,使用谷歌瀏覽器和火狐瀏覽器不行;對360瀏覽器支持,但是如果使用兼容模式還是需要下載另外下載activex插件。
1.下載插件
點擊下載;解壓後安裝裏面的webplugin.exe,如果是ie瀏覽器,另外註冊上面的ocx插件。
2. object元素
ie模式:
<object id="id" width="100%" height="87%"
classid="clsid:7F9063B6-E081-49DB-9FEC-D72422F2727F"
codebase="">
</object>
其他:
<object name="playOcx" id="id" width="100%" height="87%"
type="application/media-plugin-version-3.1.0.2"
VideoWindTextColor="9c9c9c" VideoWindBarColor="414141">
</object>
3. 判斷是否安裝插件
<script type="text/javascript">
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/(msie\s|trident.*rv:)([\d.]+)/)) ? Sys.ie = s[2] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
var PLUGINS_NAME = 'WebActiveEXE.Plugin.1';
var hasPlugin = checkPlugins();
/**
* 檢測瀏覽器是否存在視頻插件
* @return {Boolean}
*/
function checkPlugins() {
var result;
if (Sys.ie) {
try {
result = new ActiveXObject(PLUGINS_NAME);
delete result;
} catch (e) {
return false;
}
return true;
} else {
navigator.plugins.refresh(false);
result = navigator.mimeTypes["application/media-plugin-version-3.1.0.2"];
return !!(result && result.enabledPlugin);
}
}
</script>
4. js連接攝像頭開啓實時監控
這個視頻控件已經實現了抓圖、音頻和錄製功能
var g_ocx = document.getElementById(sxtList[i].id);
var bRet = g_ocx.LoginDeviceEx('' + sxtList[i].ip, sxtList[i].dkh - 1 + 1, '' + sxtList[i].yhm, '' + sxtList[i].mm, 0);
if (bRet == 0) {
//設置窗口數量
g_ocx.SetWinBindedChannel(1, 0, 63, 64);
//設置截圖保存地址
g_ocx.SetConfigPath(1,"C:\\視頻監控\\images");
//設置錄製視頻保存地址
g_ocx.SetConfigPath(2,"C:\\視頻監控\\vidos");
//設置畫質 0 高 1 低
// g_ocx.SetPicQuality(0);
//設置視頻實時性 0-10 實時登記依次降低
g_ocx.SetAdjustFluency(0);
//監視模式
g_ocx.SetModuleMode(1);
//連接視頻
g_ocx.ConnectRealVideo(0, 1);
} else {
alert("網絡連接錯誤!");
return false;
}
5.全屏實現
在這個控件中已經實現了全屏方法,經過測試不同的瀏覽器全屏的實現也有點不同:
function reqFullScreen(element) {
var ocx = element;
if (Sys.ie) {
//ie瀏覽器
ocx.SwitchToFullScreen();
} else {
//其他瀏覽器
ocx.OnFullScreenClk();
}
}
6. 其他方法
- 開啓音頻
var ele_id = element.getAttribute("id");
var g_ocx = element;
var soundStatus = g_ocx.PlayOpenSound();
- 關閉音頻
var ele_id = element.getAttribute("id");
var g_ocx = element;
var soundStatus = g_ocx.PlayStopSound();
裏面還有很多方法可以二次開發,具體可以參考壓縮包裏面的文檔。
最後
文件打包下載:傳送門