最近项目中遇到访问摄像头画面的需求，从来没接触过，最后参考一个老版本的webplugins控件接口实现了，但是版本比较老，的接口说明，而且关于云台控制，调用接口后并不好使，也就是说仅仅查看监控画面，这些接口是足够了。
下面附上实现代码：
参数定义
//监控等参数声明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", "admin", 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控件，控件和所有源码下载地址：/download/qq_25086397/10765627
参考demo：/download/qq_25086397/10766724
