最近项目中遇到访问摄像头画面的需求,从来没接触过,最后参考一个老版本的webplugins控件接口实现了,但是版本比较老,2014年的接口说明,而且关于云台控制,调用接口后并不好使,也就是说仅仅查看监控画面,这些接口是足够了。
下面附上实现代码:
参数定义
//监控等参数声明
var agent = navigator.userAgent.toLowerCase();
var g_ocx;
var PLUGINS_CLASSID = '7F9063B6-E081-49DB-9FEC-D72422F2727F';
var VERSION_GUI = 'version=3,1,0,4'; //注意:本地GUI上版本信息显示需要的字符串,修改版本的时候这个字符串也要修改
var Sys = {};
var isMac = navigator.userAgent.toLowerCase().indexOf("mac") != -1;
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();
var g_PlayTime;
var g_curSpeed = 4;//默认的正常速度
var htmlStChn1 = '';
var realpath = '';
var realport = '';
var mainOcxHtml = '';
var checkHtml = TestLL();
var realIp = '';
检查浏览器是否存在视频插件
/**
* 检测浏览器是否存在视频插件
* @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);
}
}
初始化播放监控画面控件
function TestLL()
{
if (Sys.ie) {
mainOcxHtml = '<object id="ocx" width="100%" height="100%" classid="CLSID:{' + PLUGINS_CLASSID + '}"codebase="/webrec.cab"></object>';
}
else {
mainOcxHtml = '<object id="ocx" width="100%" height="100%" type="application/media-plugin-version-3.1.0.2" VideoWindTextColor="9c9c9c" VideoWindBarColor="414141"></object>';
}
}
function initPageOcx() {
g_ocx = document.getElementById('ocx');
}
根据ip和端口号登录及播放监控画面
function LoginDevice() {
if (realpath != '' && realport != '') {
g_ocx.DisConnectRealVideo(0);
var bat = g_ocx.LoginDeviceEx(realpath, realport, "admin", "admin2018", 0);//"172.16.20.31"
}
g_ocx.SetModuleMode(1); //监视模式
g_ocx.ConnectRealVideo(0, 1);
WinSet();
switch (bat) {
case 1:
alert('密码不正确');
break;
case 2:
alert('用户名不存在');
break;
case 3:
alert('登录超时');
break;
case 4:
alert('帐号已登录');
break;
case 5:
alert('帐号已被锁定');
break;
case 6:
alert('帐号被列为黑名单');
break;
case 7:
alert('资源不足,系统忙');
break;
case 8:
alert('子连接失败');
break;
case 9:
alert('主连接失败');
break;
case 10:
alert('超过最大用户连接数');
break;
}
}
全屏
function FullScreen() {
g_ocx.OnFullScreenClk();
}
//设置窗口数量
function WinSet()
{
g_ocx.SetWinBindedChannel(1, 1, 1, 10);
}
云台控制的接口虽然不好使,但还是把写的源码分享一下
function test()
{
Ext.get("testUp").on("mousedown", function () {
try { g_ocx.ControlPtzEx(0, 1, 0, 8, 0, 0); }
catch (e) { alert(e.message);}
});
Ext.get("testUp").on("mouseup", function () {
try { g_ocx.ControlPtzEx(0, 1, 0, 8, 0, 1); }
catch (e) { alert(e.message); }
});
Ext.get("testDown").on("mousedown", function () {
try { g_ocx.ControlPtzEx(0, 2, 0, 8, 0, 0); }
catch (e) { alert(e.message); }
});
Ext.get("testDown").on("mouseup", function () {
try { g_ocx.ControlPtzEx(0, 2, 0, 8, 0, 1); }
catch (e) { alert(e.message); }
});
}
另外使用这个方法需要使用webplugins控件,控件和所有源码下载地址:https://download.csdn.net/download/qq_25086397/10765627
参考demo:https://download.csdn.net/download/qq_25086397/10766724