最近在給公司平台寫視頻監控的頁面需求，於是接觸到了海康威視的視頻控件，網上查閱一番資料后，發現有很多大佬們給出了簡易的海康視頻控件的上手方法，但是發現仍然有很多地方沒有總結到，於是在這里對我個人對海康控件開發的經驗做出一點總結。話不多說現在開始。
1|0運行環境與設備支持
海康控件開發包鏈接：
32位瀏覽器：https://pan.baidu.com/s/160ia40-hlFd1MynbxSBI2Q 密碼：d3pf
64位瀏覽器：https://pan.baidu.com/s/1TbNHqfZSw9PPS4Z-xYvcoQ 密碼：38qq
瀏覽器等相關環境看開發包內的官方文檔，主流瀏覽器基本不支持
（ps：經過測試，win10下64位瀏覽器安裝64位插件基本都有問題，只在IE11(win10 64自帶應該是64位，但插件需要32位)和360(32位)切換至IE11內核 安裝32位插件的情況可以使用；
但是IE有另一個問題，本地開發環境正常，測試環境會卡死，360測試環境正常）
2|0Demo測試
建議先使用demo進行本地測試顯示是否正常，一般情況下瀏覽器支持就可以正常顯示圖像了，如果登錄成功但點擊預覽沒有圖像，則可能是攝像頭的端口未開放或碼率設置不正確，demo測試正常后就可以搬運到Vue+TS項目了
3|0遷移
- 官方demo功能比較復雜，實際項目需要的只是在網頁顯示實時監控，所以很多代碼進行簡化
1.將官方js文件放至Public文件夾（編譯的出口文件），在index.html，將官方的webVideoCtrl.js文件導入頁面（PS:記得要jsPlugin-1.0.0.min.js和webVideoCtrl.js兩個文件都放入文件夾，webVideoCtrl.js會引用jsPlugin-1.0.0.min.js）
<body> <div id="app"></div> <!-- built files will be auto injected --> <script src="./static/webVideoCtrl.js"></script> </body>
2.在vue新建webVideo.ts視頻配置文件作為類導出，
// 初始化插件 export default class WebVideo { g_iWndIndex: number = 0; szDeviceIdentify: string = ''; deviceport: string = ''; channels: any; ip: string = '192.168.1.1'; port: string = '80'; username: string = 'admin'; password: string = 'G123456'; init() { // 檢查插件是否已經安裝過 let iRet = WebVideoCtrl.I_CheckPluginInstall(); console.log(iRet); if (-1 == iRet) { alert('您還未安裝過插件，雙擊開發包目錄里的WebComponentsKit.exe安裝！'); return; } // 初始化插件參數及插入插件 WebVideoCtrl.I_InitPlugin('100%', '100%', { bWndFull: true, iPackageType: 2, iWndowType: 1, cbInitPluginComplete() { WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin'); } }); } // 登錄 clickLogin() { if ('' == this.ip || '' == this.port) { return; } this.szDeviceIdentify = this.ip + '_' + this.port; WebVideoCtrl.I_Login(this.ip, 1, this.port, this.username, this.password, { success: (xmlDoc: any) => { setTimeout(() => { this.getChannelInfo(); this.getDevicePort(); }, 10); setTimeout(() => { this.clickStartRealPlay(); }, 500); console.log('登錄成功'); }, error: function(status: any, xmlDoc: any) { console.log('登錄失敗', status, xmlDoc); } }); } // 退出 clickLogout() { if (null == this.szDeviceIdentify) { return; } let iRet = WebVideoCtrl.I_Logout(this.szDeviceIdentify); if (0 == iRet) { this.getChannelInfo(); this.getDevicePort(); } } // 獲取通道 getChannelInfo() { this.channels = []; if (null == this.szDeviceIdentify) { return; } // 模擬通道 WebVideoCtrl.I_GetAnalogChannelInfo(this.szDeviceIdentify, { async: false, success: (xmlDoc: any) => { let oChannels = xmlDoc.getElementsByTagName('VideoInputChannel'); console.log('獲取模擬通道成功', xmlDoc); for (let i = 0; i < oChannels.length; i++) { let id = oChannels[i].querySelector('id').firstChild.nodeValue; let name = oChannels[i].querySelector('name').firstChild.nodeValue; if ('' == name) { name = 'Camera ' + (i < 9 ? '0' + (i + 1) : i + 1); } this.channels.push({ id: id, name: name }); } }, error: function(status: any, xmlDoc: any) { console.log('獲取模擬通道失敗', status); } }); } // 獲取端口 getDevicePort() { if (null === this.szDeviceIdentify) { return; } let oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify); if (oPort != null) { this.deviceport = oPort.iDevicePort; this.deviceport = oPort.iRtspPort; } console.log('端口:', oPort); } // 開始預覽 clickStartRealPlay() { let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex), iChannelID = +this.channels[0].id; if (null == this.szDeviceIdentify) { return; } const startRealPlay = () => { WebVideoCtrl.I_StartRealPlay(this.szDeviceIdentify, { iRtspPort: this.deviceport, iStreamType: 1, iChannelID: iChannelID, bZeroChannel: false, success: (status: any) => { console.log('預覽成功', status); }, error: (status: any, xmlDoc: any) => { console.log('預覽失敗', status); if (403 === status) { } else { } } }); }; if (oWndInfo != null) { // 已經在播放了，先停止 WebVideoCtrl.I_Stop({ success: function() { startRealPlay(); } }); } else { startRealPlay(); } } // 停止預覽 clickStopRealPlay() { let oWndInfo = WebVideoCtrl.I_GetWindowStatus(this.g_iWndIndex); if (oWndInfo != null) { WebVideoCtrl.I_Stop({ success: function() { console.log('停止播放成功'); }, error: function() { console.log('停止播放失敗'); } }); } } }
可能會出現WebVideoCtrl 報錯提示不存在此模塊，需要在shims-vue.d.ts（Vue-cli3以上創建TS的Vue項目會在src下自動生成此文件）文件內定義WebVideoCtrl 模塊
declare var WebVideoCtrl: any;
3.做完以上操作后，只需要在.vue頁面導入自定義配置的webVideo.ts文件並進行初始化即可
import WebVideo from "@/config/webVideo"; let webVideo: any; mounted() { webVideo = new WebVideo(); } // 在要進行播放的函數進行初始化並登陸預覽 webVideo.init(); webVideo.clickLogin();