最近在給公司平台寫視頻監控的頁面需求，於是接觸到了海康威視的視頻控件，網上查閱一番資料后，發現有很多大佬們給出了簡易的海康視頻控件的上手方法，但是發現仍然有很多地方沒有總結到，於是在這里對我個人對海康控件開發的經驗做出一點總結。話不多說現在開始。
運行環境與設備支持
海康控件開發包鏈接：
32位瀏覽器：
https://pan.baidu.com/s/160ia40-hlFd1MynbxSBI2Q 密碼：d3pf
64位瀏覽器：
https://pan.baidu.com/s/1TbNHqfZSw9PPS4Z-xYvcoQ 密碼：38qq
Web控件V3.0基於ActiveX和NPAPI開發，接口封裝於JavaScript腳本，以JavaScript接口形式提供用戶集成，支持網頁上實現預覽、回放、雲台控制等功能。該控件僅支持B/S開發，不適用C/S開發。
Web控件V3.0支持多種我司設備，包括DVR、NVR、DVS、網絡攝像機、網絡球機等，設備需要支持PSIA或ISAPI協議。
該控件所需運行環境：
操作系統:WindowsXP、Windows7、Windows8、Windows8.1（實際上目前Windows10也可以用）
瀏覽器：
IE8~IE11、Chrome31+、Firefox35+，32位瀏覽器
IE8~IE11、Chrome31~Chrome44、Firefox35~Firefox51，64位瀏覽器
（ps：這里其實有很大的坑，瀏覽器一旦版本位數沒有和插件對上，頁面顯示就會有問題，很多人沒看清這點盲目上手就踩在了這一點上）
demo
官方文檔給的demo其實有很多我們不需要的方法，這就需要我們二次開發時，有選擇的使用他所提供的方法
快速二次開發
其實這方面已經有很多人給過差不多的代碼，但我姑且還是在這里放一下簡易開發的代碼
首先是頁面文件，頁面需要導入官方的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();
}
}
錯誤總結
首先，還是再強調一點，海康威視的插件時根據瀏覽器位數來的，而不是根據電腦系統位數，比如你用的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)
獲取模擬通道成功
登錄成功
解決方法：如果只是操作界面報錯而控制台沒有報錯，點擊開始預覽便能看到視頻了。。。
最后
剛開始進行二次開發海康控件時走了不少彎路，光顧着網上找資源了，忽略了官方文檔的查閱，現在回頭看來是浪費了不少時間。這篇博文作為我入職以來第一篇博文，對我來說也有着深刻警醒的意義，希望今后的我也能保持初心，時刻關注着技術，警醒自己不要止步、安於現狀。