最近客戶提需要，需要在現(xiàn)有的系統(tǒng)中集成視頻監(jiān)控功能，攝像頭是大華的。而大華又沒有關(guān)于java的sdk，官網(wǎng)只能下載到c++的demo和dll文件。無奈只能自己在網(wǎng)上找了，最后找到了一些解決辦法，把實現(xiàn)方法記錄一下。

使用Jna技術(shù)調(diào)用大華dll

在大華官網(wǎng)下載sdk，傳送門；下載完成后解壓，將里面的庫文件復制到其他文件夾以方便jna的調(diào)用。具體可以查看demo：java后端大華攝像頭二次開發(fā)demo，因為這種方式使用java的swing窗口開發(fā)比較方便，由于這次是做web端開發(fā)，所以沒有詳細的去了解，這里不作詳細分析，可以查看上面的demo。

使用ie的activex插件

參考：通過WEB調(diào)用大華網(wǎng)絡(luò)攝像頭

這種方式實現(xiàn)的功能較少，只有實時視頻、抓圖、錄制視頻功能。而且只支持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調(diào)用開啟實時視頻

//獲取object元素js對象
var SSOcx = document.getElementById(id);
//登錄視頻
var flag = SSOcx.SetDeviceInfo("ip", "端口", "通道", "用戶名", "密碼");
if (flag) {
    //開啟實時視頻監(jiān)控
    SSOcx.StartPlay();
} else {
    return false;
}

4.實時視頻全屏實現(xiàn)

全屏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);
        });
    }
    //監(jiān)聽esc事件
     $(document).keyup(function (event) {
         switch (event.keyCode) {
             case 27:
                 exitFullscreen();
                 break;
         }
    });
</script>

5.總結(jié)

這種方式實現(xiàn)起來還算方便，但是功能較少。不支持音頻等。

使用webplugin.exe插件

這種方式也是使用別人開發(fā)的插件，但是功能幾乎都有。在web開發(fā)這種方式應(yīng)該也是最好的了。但是也有局限性，使用谷歌瀏覽器和火狐瀏覽器不行；對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連接攝像頭開啟實時監(jiān)控

這個視頻控件已經(jīng)實現(xiàn)了抓圖、音頻和錄制功能

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) {
    //設(shè)置窗口數(shù)量
    g_ocx.SetWinBindedChannel(1, 0, 63, 64);
    //設(shè)置截圖保存地址
    g_ocx.SetConfigPath(1,"C:\\視頻監(jiān)控\\images");
    //設(shè)置錄制視頻保存地址
    g_ocx.SetConfigPath(2,"C:\\視頻監(jiān)控\\vidos");
    //設(shè)置畫質(zhì) 0 高 1 低
    // g_ocx.SetPicQuality(0);
    //設(shè)置視頻實時性 0-10 實時登記依次降低
    g_ocx.SetAdjustFluency(0);
    //監(jiān)視模式
    g_ocx.SetModuleMode(1); 
    //連接視頻
    g_ocx.ConnectRealVideo(0, 1);
} else {
    alert("網(wǎng)絡(luò)連接錯誤！");
    return false;
}

5.全屏實現(xiàn)

在這個控件中已經(jīng)實現(xiàn)了全屏方法，經(jīng)過測試不同的瀏覽器全屏的實現(xiàn)也有點不同：

 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();

• 關(guān)閉音頻

var ele_id = element.getAttribute("id");
var g_ocx = element;
var soundStatus =  g_ocx.PlayStopSound();

里面還有很多方法可以二次開發(fā)，具體可以參考壓縮包里面的文檔。

最后

文件打包下載：傳送門