Web端海康威視開發

前言

之前使用海康威視的産品是使用海康的windows安裝的軟體(ivms-8700),但是現在有需求在web頁面上實時檢視監控視訊,有需求就開幹.撸起袖子加油幹.

認識Demo

接下來肯定是上網查找資料,下載下傳檔案咯,我從官網下載下傳了demo檔案

注:Demo必須使用IE浏覽器,這裡可以建議使用360浏覽器或者QQ浏覽器(都是雙核心浏覽器)

開始使用

在開始使用時我們需要先打開codebase檔案夾中的WebComponentsKit.exe進行安裝(這裡有64位和32位),如果你是64位的作業系統,安裝完之後還提示需要安裝插件,那麼最好把32位的也安裝了.

插件安裝

點選之後傻瓜式安裝即可

啟動nginx

接下來先啟動nginx,點選nginx檔案夾中的start.bat,彈幕一閃而逝,即可啟動成功,

首頁界面

成功進入的圖檔如上圖所示,輸入正确的賬号密碼以及端口号,點選登入

已登入裝置中可以檢視到目前登入的ip位址,

點選開始預覽即可成功顯示視訊,

若顯示裝置不支援Websocket取流！則更改浏覽器核心,将核心改為IE核心或者相容模式

更新

代碼更改

海康威視的Demo的插件是固定大小的,我這裡更改為擷取螢幕的寬和高,然後将寬度和高度确定下來

// 初始化插件參數及插入插件
    WebVideoCtrl.I_InitPlugin(document.body.clientWidth-110, document.body.clientHeight-50, {
        bWndFull: true,     //是否支援單視窗輕按兩下全屏，預設支援 true:支援 false:不支援
        iPackageType: 2,    //2:PS 11:MP4
        iWndowType: 2,
        bNoPlugin: true,
        cbSelWnd: function (xmlDoc) {
            g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
            var szInfo = "目前選擇的視窗編号：" + g_iWndIndex;
            showCBInfo(szInfo);
        },
        cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
            var szInfo = "目前放大的視窗編号：" + iWndIndex;
            if (!bFullScreen) {            
                szInfo = "目前還原的視窗編号：" + iWndIndex;
            }
            showCBInfo(szInfo);
                        
            // 此處可以處理單視窗的碼流切換
            /*if (bFullScreen) {
                clickStartRealPlay(1);
            } else {
                clickStartRealPlay(2);
            }*/
        },
        cbEvent: function (iEventType, iParam1, iParam2) {
            if (2 == iEventType) {// 回放正常結束
                showCBInfo("視窗" + iParam1 + "回放結束！");
            } else if (-1 == iEventType) {
                showCBInfo("裝置" + iParam1 + "網絡錯誤！");
            } else if (3001 == iEventType) {
                clickStopRecord(g_szRecordType, iParam1);
            }
        },
        cbRemoteConfig: function () {
            showCBInfo("關閉遠端配置庫！");
        },
        cbInitPluginComplete: function () {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");

            // 檢查插件是否最新
           /* if (-1 == WebVideoCtrl.I_CheckPluginVersion()) {
                alert("檢測到新的插件版本，輕按兩下開發包目錄裡的WebComponentsKit.exe更新！");
                return;
            }*/
        }
    });
           

我這裡進行了更改,将使用者每次登陸更改為當頁面進入後周遊登入所有的攝像頭,供使用者點選預覽

//周遊登入
for (var i=0;i<ips.length;i++){

    (function(i) {

        var szDeviceIdentify = ips[i] + "_80";

        WebVideoCtrl.I_Login(ips[i], 1, 80, '你的賬号', '你的密碼', {
            success: function (xmlDoc) {

                showOPInfo(szDeviceIdentify + " 登入成功！");

                $("#ip").prepend("<option value='" + szDeviceIdentify + "'>" + szDeviceIdentify + "</option>");

                $("#alery").prepend("<a>"+szDeviceIdentify+"</a><br/>");

                var ips0 =szDeviceIdentify.replace(".","").replace(".","").replace(".","").replace(".","").replace("_","");

                $("#mynames").prepend("<button id='ips"+ips0+"' οnclick='namesdianji(\""+szDeviceIdentify+"\")' class=\"layui-btn layui-btn-sm\"></button><br/>");

                setTimeout(function () {
                    $("#ip").val(szDeviceIdentify);
                    getChannelInfo();
                    getDevicePort();
                }, 10);



                (function(i) {
                       // showOPInfo(szDeviceIdentify + " 進來了1"+"i為"+i);
                    if (i<4){
                        clickStartRealPlay(szDeviceIdentify,i);
                    }
                })(i)




            },
            error: function (status, xmlDoc) {
                showOPInfo(szDeviceIdentify + " 登入失敗！", status, xmlDoc);
            }
        });



        if (-1 == iRet) {
            showOPInfo(szDeviceIdentify + " 已登入過！");
        }

        if (i==ips.length-1){
        setTimeout(function() {


        clickStartRealPlay1();
        },  1000);
        }
       /* setTimeout(function() {
            console.log(i);
        }, (i + 1) * 1000);*/
    })(i)





}
           

通過文檔可以查詢該 WebVideoCtrl.I_Login接口是登入攝像頭使用的,登入成功後可得到該攝像頭可以預覽的按鈕.

在這裡周遊登入後最後又調用了一次 clickStartRealPlay1();函數,該函數主要是為了給第一個框框預覽使用的,因為通過周遊得到的視訊第一個是有問題的(原因不知),如果有知道的可以留言告訴我一聲.萬分感謝

下面貼出循環周遊調用的函數(也就是預覽2 3 4視窗的函數)和隻調用一次的函數(視窗1)

// 開始預覽
function clickStartRealPlay(szDeviceIdentify,ckId) {
   // showOPInfo(szDeviceIdentify + " 進來了3"+"ckId:"+ckId);
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
        /* szDeviceIdentify = $("#ip").val(),
         iRtspPort = parseInt($("#rtspport").val(), 10),
         iChannelID = parseInt($("#channels").val(), 10),
         bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
         szInfo = "";

     if ("undefined" === typeof iStreamType) {
         iStreamType = parseInt($("#streamtype").val(), 10);
     }
 */

    szInfo = "";
    if (null == szDeviceIdentify) {
        return;
    }
    if (null == ckId || "" == ckId) {
        return;
    }
   // showOPInfo(szDeviceIdentify + " 進來了2");
    var startRealPlay = function () {
        WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, {
            iWndIndex:ckId,
            iRtspPort: 554,
            iStreamType: 2,
            iChannelID: 1,
            bZeroChannel: false,
            success: function () {
                szInfo = "開始預覽成功！";
                showOPInfo(szDeviceIdentify + " " + szInfo);
            },
            error: function (status, xmlDoc) {
                if (403 === status) {
                    szInfo = "裝置不支援Websocket取流！";
                } else {
                    szInfo = "開始預覽失敗！";
                }
                showOPInfo(szDeviceIdentify + " " + szInfo);
            }
        });
    };

    if (oWndInfo != null) {// 已經在播放了，先停止
        WebVideoCtrl.I_Stop({
            success: function () {
                startRealPlay();
            }
        });
    } else {
        startRealPlay();
    }
}

// 開始預覽通道1
function clickStartRealPlay1() {

    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
     

    /* if ("undefined" === typeof iStreamType) {
         iStreamType = parseInt($("#streamtype").val(), 10);
     }*/

    if (null == szDeviceIdentify) {
        return;
    }

    var startRealPlay = function () {
        var ip =ips[0]+'_80'
        WebVideoCtrl.I_StartRealPlay(ip, {
            iRtspPort: ips[0],
            iStreamType: 2,
            iChannelID: 1,
            bZeroChannel: false,
            success: function () {
                szInfo = "開始預覽成功！";
                showOPInfo(szDeviceIdentify + " " + szInfo);
            },
            error: function (status, xmlDoc) {
                if (403 === status) {
                    szInfo = "裝置不支援Websocket取流！";
                } else {
                    szInfo = "開始預覽失敗！";
                }
                showOPInfo(szDeviceIdentify + " " + szInfo);
            }
        });
    };

    if (oWndInfo != null) {// 已經在播放了，先停止
        WebVideoCtrl.I_Stop({
            success: function () {
                startRealPlay();
            }
        });
    } else {
        startRealPlay();
    }
}
           

下面就是我的界面

點選左邊的按鈕就可以更換新的視訊監控.

檔案下載下傳

應廣大博友的呼聲,将需要下載下傳的檔案Demo共享出來