Extjs访问大华摄像头第一版

最近项目中遇到访问摄像头画面的需求，从来没接触过，最后参考一个老版本的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