海康威視Web3.0控件我的開發經驗及問題總結(轉）

時間  2019-11-09
標籤 海康 威視 web3.0 web 控件 我的 開發 經驗 問題 總結 欄目 HTML 简体版
原文   原文鏈接

最近在給公司平臺寫視頻監控的頁面需求，因而接觸到了海康威視的視頻控件，網上查閱一番資料後，發現有不少大佬們給出了簡易的海康視頻控件的上手方法，可是發現仍然有不少地方沒有總結到，因而在這裏對我我的對海康控件開發的經驗作出一點總結。話很少說如今開始。css

1.運行環境與設備支持

海康控件開發包連接：html

32位瀏覽器：java

https://pan.baidu.com/s/160ia40-hlFd1MynbxSBI2Q  密碼：d3pfnode

64位瀏覽器：jquery

https://pan.baidu.com/s/1TbNHqfZSw9PPS4Z-xYvcoQ  密碼：38qqnginx

Web控件V3.0基於ActiveX和NPAPI開發，接口封裝於JavaScript腳本，以JavaScript接口形式提供用戶集成，支持網頁上實現預覽、回放、雲臺控制等功能。該控件僅支持B/S開發，不適用C/S開發。git

Web控件V3.0支持多種我司設備，包括DVR、NVR、DVS、網絡攝像機、網絡球機等，設備須要支持PSIA或ISAPI協議。web

該控件所需運行環境：瀏覽器

操做系統:WindowsXP、Windows七、Windows八、Windows8.1（實際上目前Windows10也能夠用）cookie

瀏覽器：

IE8~IE十一、Chrome31+、Firefox35+，32位瀏覽器

IE8~IE十一、Chrome31~Chrome4四、Firefox35~Firefox51，64位瀏覽器

（ps：這裏其實有很大的坑，瀏覽器一旦版本位數沒有和插件對上，頁面顯示就會有問題，不少人沒看清這點盲目上手就踩在了這一點上）

2.demo

官方文檔給的demo其實有不少咱們不須要的方法，這就須要咱們二次開發時，有選擇的使用他所提供的方法

3.快速二次開發

其實這方面已經有不少人給過差很少的代碼，但我姑且仍是在這裏放一下簡易開發的代碼

首先是頁面文件，頁面須要導入官方的webVideoCtrl.js，建議將該文件放在官方給的codebase文件夾目錄下一同導入項目中，運行項目時，該文件會自動尋找同目錄下的其餘文件。

<!doctype html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="Expires" content="0" />
    <script>
        document.write("<link type='text/css' href='css/demo.css?version=" + new Date().getTime() + "' rel='stylesheet' />");
    </script>
</head>
<body>
<div id="divPlugin" class="plugin"></div>
</body>
<script src="jquery-1.7.1.min.js"></script>
<script id="videonode" src="codebase/webVideoCtrl.js"></script>
<script src="test.js"></script>
</html>

|

接下來是js文件，其中四項參數username，password、ip、port分別對應登陸所必須的用戶名、密碼、設備ip及端口號

// 初始化插件
$(function() {
    initialValue = new Object();
    initialValue.g_iWndIndex = 0;
    initialValue.szDeviceIdentify = '';
    initialValue.deviceport = '';
    initialValue.rtspport = '';
    initialValue.channels = [];
    /*這裏是登陸視頻插件所需的四項參數*/
    initialValue.ip = '';
    initialValue.port = '';
    initialValue.username = '';
    initialValue.password = '';
    t_init(initialValue);
    t_login(initialValue);
})
  
// 初始化
function t_init(initialValue) {
    // 檢查插件是否已經安裝過
    var iRet = WebVideoCtrl.I_CheckPluginInstall();
    if (-1 == iRet) {
        alert("您還未安裝過插件，雙擊開發包目錄裏的WebComponentsKit.exe安裝！");
        return;
    }
    // 初始化插件參數及插入插件
    WebVideoCtrl.I_InitPlugin(500, 300, {
        bWndFull: true,
        iPackageType: 2,
        iWndowType: 1,
        cbInitPluginComplete: function() {
            WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin");
        }
    });
}
  
function t_login(initialValue) {
    if ("" == initialValue.ip || "" == initialValue.port) {
        return;
    }
    initialValue.szDeviceIdentify = initialValue.ip + "_" + initialValue.port;
    WebVideoCtrl.I_Login(initialValue.ip, 1, initialValue.port, initialValue.username, initialValue.password, {
        success: function(xmlDoc) {
            setTimeout(function() {
                t_getChannelInfo(initialValue);
                t_getDevicePort(initialValue);
            }, 10);
            setTimeout(function() {
                t_StartRealPlay(initialValue);
            }, 500)
        },
        error: function(status, xmlDoc) {}
    });
}
  
// 獲取通道
function t_getChannelInfo(initialValue) {
    initialValue.channels = []
    if (null == initialValue.szDeviceIdentify) {
        return;
    }
    // 模擬通道
    WebVideoCtrl.I_GetAnalogChannelInfo(initialValue.szDeviceIdentify, {
        async: false,
        success: function(xmlDoc) {
            var oChannels = $(xmlDoc).find("VideoInputChannel");
            $.each(oChannels, function(i) {
                var id = $(this).find("id").eq(0).text(),
                    name = $(this).find("name").eq(0).text();
                if ("" == name) {
                    name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                }
                initialValue.channels.push({
                    id: id,
                    name: name
                })
            });
        },
        error: function(status, xmlDoc) {}
    });
    // 數字通道
    WebVideoCtrl.I_GetDigitalChannelInfo(initialValue.szDeviceIdentify, {
        async: false,
        success: function (xmlDoc) {
            var oChannels = $(xmlDoc).find("InputProxyChannelStatus");
 
            $.each(oChannels, function (i) {
                var id = $(this).find("id").eq(0).text(),
                    name = $(this).find("name").eq(0).text(),
                    online = $(this).find("online").eq(0).text()
                ip = $(this).find("ipAddress").eq(0).text(),
                    port = $(this).find("port").eq(0).text();
                if ("false" == online) { // 過濾禁用的數字通道
                    return true;
                }
                if ("" == name) {
                    name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
                }
                var arr = {
                    "id": id,
                    "title": name,
                    "ipaddress": initialValue.szDeviceIdentify
                };
                IPaddress.push(arr);
            });
            console.log("獲取數字通道成功！");
        },
        error: function (status, xmlDoc) {
            console.log("獲取數字通道失敗！");
        }
    });
    // 零通道
    WebVideoCtrl.I_GetZeroChannelInfo(initialValue.szDeviceIdentify, {
        async: false,
        success: function (xmlDoc) {
            var oChannels = $(xmlDoc).find("ZeroVideoChannel");
 
            $.each(oChannels, function (i) {
                var id = $(this).find("id").eq(0).text(),
                    name = $(this).find("name").eq(0).text();
                if ("" == name) {
                    name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
                }
                if ("true" == $(this).find("enabled").eq(0).text()) { // 過濾禁用的零通道
                    console.log("id:" + id + ",name:" + name);
                }
            });
            console.log("獲取零通道成功！");
        },
        error: function (status, xmlDoc) {
            console.log("獲取零通道失敗！");
        }
    });
}
  
// 獲取端口
function t_getDevicePort(initialValue) {
    if (null == initialValue.szDeviceIdentify) {
        return;
    }
    var oPort = WebVideoCtrl.I_GetDevicePort(initialValue.szDeviceIdentify);
    if (oPort != null) {
        initialValue.deviceport = oPort.iDevicePort;
        initialValue.rtspport = oPort.iRtspPort;
    }
}
  
// 開始預覽
function t_StartRealPlay(initialValue) {
    var oWndInfo = WebVideoCtrl.I_GetWindowStatus(initialValue.g_iWndIndex),//獲取當前窗口的狀態
        iChannelID = initialValue.channels[0].value
  
    if (null == initialValue.szDeviceIdentify) {
        return;
    }
  
    var startRealPlay = function() {
        WebVideoCtrl.I_StartRealPlay(initialValue.szDeviceIdentify, {
            iRtspPort: initialValue.rtspport,
            iStreamType: 1,
            iChannelID: iChannelID,
            bZeroChannel: false,
            success: function() {},
            error: function(status, xmlDoc) {
                if (403 === status) {} else {}
            }
        });
    };
  
    if (oWndInfo != null) { // 已經在播放了，先中止
        WebVideoCtrl.I_Stop({
            success: function() {
                startRealPlay();
            }
        });
    } else {
        startRealPlay();
    }
}

|

4.錯誤總結

首先，仍是再強調一點，海康威視的插件時根據瀏覽器位數來的，而不是根據電腦系統位數，好比你用的64位系統，裝的32位瀏覽器，使用插件時就必需要使用32位插件。海康威視WEB3.0多版本開發控件中包含官方控件：CH_32位、CH_64位、以及CN_64位。其中還包含官方指定的測試瀏覽器火狐瀏覽器多版本，4.00/45.0/50.0.1  IE瀏覽器IE7  32位、64位，因此在進行二次開發時，必定要注意插件版本於瀏覽器是否適配的問題。

（1）頁面控制檯報錯:/ISAPI/Security/sessionLogin/capabilities?username=admin Failed to load resource: the server responded with a status of 404 (Not Found)

解決方法：引用js是否有問題，查看頁面js是否引入路徑，是否全面正確。

使用的瀏覽器是否正確，仔細查閱官方注意事項中要求使用的瀏覽器。

若是排查沒有上述錯誤，並且你使用的nginx，請查看壓縮文件中的nginx文件，配置你的nginx.conf內容，能夠試着加上這一段，實現路徑的跳轉

location ~ /ISAPI|SDK/ {
 
    if ($http_cookie ~ "webVideoCtrlProxy=(.+)") {
 
           proxy_pass http://$cookie_webVideoCtrlProxy;
 
            break;
 
    }
 
}

（2）控制檯報錯：TypeError: c.HWP_GetLocalConfig is not a function

解決方法：這個報錯的緣由是由於瀏覽器沒有激活插件，將其激活就好了。

（3）demo操做信息報錯：設備不支持Websocket取流！

demo操做信息及控制檯同時報錯：403錯誤

解決辦法：請換個瀏覽器。。。。。。請使用官方文檔給出的瀏覽器

（4）demo操做信息：獲取零通道失敗！(403, invalidOperation)

獲取數字通道失敗！(403, invalidOperation)

獲取模擬通道成功

登陸成功

解決辦法：若是隻是操做界面報錯而控制檯沒有報錯，點擊開始預覽便能看到視頻了。。。

5.最後

剛開始進行二次開發海康控件時走了很多彎路，光顧着網上找資源了，忽略了官方文檔的查閱，如今回頭看來是浪費了很多時間。這篇博文做爲我入職以來第一篇博文，對我來講也有着深入警醒的意義，但願從此的我也能保持初心，時刻關注着技術，警醒本身不要止步、安於現狀

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程