海康威視二次開發筆記
阿新 • • 發佈:2019-01-15
NPU ase 傳遞參數 light https true username login ipcam
最近遇到客戶需要在web頁面實時查看監控視頻,故寫此文章。為記錄、也為分享,希望大家對本文的不足之處加以指正。
這裏將我用到的方法一一說明,頁面尾部附下載連接。
首先設置頁面寬高
var oPlugin = { iWidth: 730, iHeight: 400 };oPlugin
其次傳遞參數
var oLiveView = { iProtocol: 1, // 協議 1:http, 2:https szIP: "@ip", // ip szPort: "@port", // port szUsername: "@userName", //oLiveViewusername szPassword: "@password", // password iStreamType: 1, // stream 1:main stream 2:sub-stream 3:third stream 4:transcode stream bZeroChannel: false };
檢查插件是否已安裝(安裝插件完成後需要重新啟動瀏覽器),未安裝則提示安裝插件。其次也要考慮插件版本問題。登錄設備開始預覽實時畫面(這裏需註意登錄設備時存在無法播放的情況,需要先行登出設備以防無法播放影響用戶體驗)。
var szDeviceIdentify = oLiveView.szIP + "_" + oLiveView.szPort; $(function () { //檢查插件是否已經安裝過 var iRet = WebVideoCtrl.I_CheckPluginInstall(); if (-1 == iRet) { alert("您還未安裝過插件,雙擊開發包目錄裏的WebComponents.exe安裝!"); return; } // 初始化插件參數及插入插件 WebVideoCtrl.I_Logout(szDeviceIdentify); //View Code登出 WebVideoCtrl.I_InitPlugin(oPlugin.iWidth, oPlugin.iHeight, { bWndFull: true, //是否支持單窗口雙擊全屏,默認支持 true:支持 false:不支持 iWndowType: 1, cbInitPluginComplete: function () { WebVideoCtrl.I_InsertOBJECTPlugin("divPlugin"); // 檢查插件是否最新 if (-1 == WebVideoCtrl.I_CheckPluginVersion()) { alert("檢測到新的插件版本,雙擊開發包目錄裏的WebComponentsKit.exe升級!"); return; } // 登錄設備 WebVideoCtrl.I_Login(oLiveView.szIP, oLiveView.iProtocol, oLiveView.szPort, oLiveView.szUsername, oLiveView.szPassword, { success: function (xmlDoc) { getChannelInfo(); //獲取通道 // 開始預覽 setTimeout(function () { WebVideoCtrl.I_Stop(); WebVideoCtrl.I_StartRealPlay(szDeviceIdentify, { iStreamType: oLiveView.iStreamType, iChannelID: oLiveView.iChannelID, bZeroChannel: oLiveView.bZeroChannel }); }, 1000); } }); } });
獲取模擬通道、數字通道、零通道
function getChannelInfo() { var channels = $("#channels").empty(); // 模擬通道 WebVideoCtrl.I_GetAnalogChannelInfo(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)); } channels.append("<li><a onclick=clickStartRealPlay(‘" + id + "‘)> " + name + "</a></li>"); }); //獲取模擬通道成功; }, error: function (status, xmlDoc) { //獲取模擬通道失敗! } }); // 數字通道 WebVideoCtrl.I_GetDigitalChannelInfo(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(); if ("false" == online) { // 過濾禁用的數字通道 return true; } if ("" == name) { name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1)); } channels.append("<li><a onclick=clickStartRealPlay(‘" + id + "‘)> " + name + "</a></li>"); }); //獲取模擬通道成功; }, error: function (status, xmlDoc) { //獲取模擬通道失敗! } }); // 零通道 WebVideoCtrl.I_GetZeroChannelInfo(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()) { // 過濾禁用的零通道 channels.append("<li><a onclick=clickStartRealPlay(‘" + id + "‘)> " + name + "</a></li>"); } }); //獲取模擬通道成功; }, error: function (status, xmlDoc) { //獲取模擬通道失敗! } }); }getChannelInfo
以上是HTML頁面所有內容。
註意此種方式目前只支持IE瀏覽器觀看視頻。
所以瀏覽器也需設置一些內容以防止安全性較高的瀏覽器將我們的ActiveX插件自動攔截或過濾。
IE瀏覽器打開設置-->Internet選項-->安全-->點擊自定義級別-->找到ActiveX控件和插件 設置以下內容:
a)對標記為可安全執行腳本的ActiveX控件執行腳本。啟用 b)對未標記為可安全執行腳本的ActiveX控件初始化並執行腳本。提示 c)二進制和腳本行為。啟用 d)下載未簽名的ActiveX控件。提示 e)下載已簽名的ActiveX控件。提示 f)允許運行以前未使用的ActiveX控件而不提示。啟用 g)運行ActiveX控件和插件。啟用 h)設置完畢後重啟瀏覽器。
在這裏需要說明一下,安裝插件是一定要註意插件版本及操作系統的版本。
附件下載連接 提取碼:16b4
使用該文件時將codebase文件夾放至項目根目錄。
以上內容就是本次的開發過程,為記錄、也為分享。
海康威視二次開發筆記