通過連線大華dss平臺來實現檢視攝像頭畫面和實現雲臺控制功能Extjs
阿新 • • 發佈：2018-11-06
上個版本的大華攝像頭監控的檢視雖然可以達到初步效果，但是後續實現雲臺的控制等就無法實現了，所以後來採取了通過連線大華的dss平臺來實現監控畫面的檢視和雲臺控制，實際的實現其實就是呼叫大華dss平臺的介面，來實現功能。
程式碼實現：
Ext.onReady(function () { //提示 Ext.QuickTips.init(); Ext.get(window).on('onunload', function (e) { var obj = document.getElementById("DPSDK_OCX"); obj.DPSDK_Logout(); }); //引數定義 var gWndId = 0; var nDirect = -1; var nOper = -1; var gXmlRecords; var gRecordPath; var bLogin = 0; var bIVS = 1; var gVtCallWndNo = 0; var nStep = 1; var szCameraId = ''; //var winPlay = '<object id="DPSDK_OCX" classid="CLSID:D3E383B6-765D-448D-9476-DFD8B499926D" style="width: 100%; height: 80%" codebase="DpsdkOcx.cab#version=1.0.0.0"></object>'; //監控播放控制元件初始化 function init() { var obj = document.getElementById("DPSDK_OCX"); gWndId = obj.DPSDK_CreateSmartWnd(0, 0, 100, 100); ButtonCreateWnd_onclick(); obj.DPSDK_SetLog(2, "D:\\DPSDK_OCX_log", false, false); //初始化後設置日誌路徑 for (var i = 1; i <= 4; i++) obj.DPSDK_SetToolBtnVisible(i, false); obj.DPSDK_SetToolBtnVisible(7, false); obj.DPSDK_SetToolBtnVisible(9, false); obj.DPSDK_SetControlButtonShowMode(1, 0); obj.DPSDK_SetControlButtonShowMode(2, 0); } //設定播放視窗數量 function ButtonCreateWnd_onclick() { var obj = document.getElementById("DPSDK_OCX"); var nWndCount = 1; obj.DPSDK_SetWndCount(gWndId, nWndCount); obj.DPSDK_SetSelWnd(gWndId, 0); } //全屏顯示 function ButtonSetSmartWndFullScreen_onclick() { var obj = document.getElementById("DPSDK_OCX"); var nWndNo = obj.DPSDK_GetSelWnd(gWndId); ShowCallRetInfo(obj.DPSDK_SetSmartWndFullScreen(gWndId), "全屏顯示Smart視窗"); //setTimeout("ExitFullScreenTimeout()", 2000); } //返回載入資訊 function ShowCallRetInfo(nRet, strInfo) { var str = ""; if (nRet == 0) { str = strInfo + " 成功！"; } else { str = strInfo + "失敗！錯誤碼：" + nRet; if (nRet == 19 || nRet == 20) { str += "，請先載入組織結構！"; } } document.getElementById("RetInfo").innerText = str; //alert(str); } //登入 function ButtonLogin_onclick() { var obj = document.getElementById("DPSDK_OCX"); obj.DPSDK_Logout(); var szIp = "192.168.46.155"; var nPort = "9000"; var szUsername = "admin"; var szPassword = "admin2018"; var nRet = obj.DPSDK_Login(szIp, nPort, szUsername, szPassword); //var nRet = obj.DPSDK_SingleLogin(szIp, nPort, szUsername, szPassword); ShowCallRetInfo(nRet, "登入"); if (nRet == 0) { bLogin = 1; } //ButtonLoadDGroupInfo_onclick(); } //載入組織結構，用於雲臺控制 function ButtonLoadDGroupInfo_onclick() { var obj = document.getElementById("DPSDK_OCX"); ShowCallRetInfo(obj.DPSDK_LoadDGroupInfo(), "載入組織結構"); } //播放監控畫面 function ButtonStartRealplayByWndNo_onclick() { var obj = document.getElementById("DPSDK_OCX"); //var szCameraId = '1000002$1$0$0';//通道 var nStreamType = 1;//主碼流 var nMediaType = 1;//視訊 var nTransType = 1;//TCP var nWndNo = obj.DPSDK_GetSelWnd(gWndId); var nRet = obj.DPSDK_StartRealplayByWndNo(gWndId, nWndNo, szCameraId, nStreamType, nMediaType, nTransType); ShowCallRetInfo(nRet, "播放視訊"); if (nRet == 0) { //insertRealplayHistory(szCameraId); ShowCallRetInfo(obj.DPSDK_SetIvsShowFlagByWndNo(gWndId, nWndNo, 1, bIVS), "規則線顯示");//開啟規則線顯示 ShowCallRetInfo(obj.DPSDK_SetIvsShowFlagByWndNo(gWndId, nWndNo, 2, bIVS), "目標框顯示");//開啟目標框顯示 ShowCallRetInfo(obj.DPSDK_SetIvsShowFlagByWndNo(gWndId, nWndNo, 3, bIVS), "軌跡線顯示");//開啟軌跡線顯示 } } //雲臺控制 function ButtonPtzDirection_onclick(nDirects) { var obj = document.getElementById("DPSDK_OCX"); //var szCameraId = '1000002$1$0$0'; nDirect = nDirects; ShowCallRetInfo(obj.DPSDK_PtzDirection(szCameraId, nDirect, nStep, 0), "方向控制"); //setTimeout(function () { ButtonPtzDirection_onclickStop(1); }, 1000); } function ButtonPtzDirection_onclickStop(bStop) { var obj = document.getElementById("DPSDK_OCX"); //var szCameraId = '1000002$1$0$0'; //var nStep = 4; ShowCallRetInfo(obj.DPSDK_PtzDirection(szCameraId, nDirect, nStep, bStop), "方向控制"); } //監控畫面 var video = new Ext.Panel({//Ext.create('Ext.panel.Panel', { id: 'play', width: 1000, height: 560, html: '<object id="DPSDK_OCX" classid="CLSID:D3E383B6-765D-448D-9476-DFD8B499926D" style="width: 100%; height: 95%" codebase="DpsdkOcx.cab#version=1.0.0.0"></object>' + '<div style="width: 90%;height: 30px;overflow: auto;" id="RetInfo"></div>', listeners: { afterRender: function () { setTimeout(init, 100); setTimeout(ButtonLogin_onclick, 100); setTimeout(ButtonLoadDGroupInfo_onclick, 100); //init(); //ButtonLogin_onclick(); } }, dockedItems: [ { xtype: 'toolbar', height: 30, items: [ { text: '開始監控', width: 70, handler: function () { if (szCameraId == "") alert("請先選擇監控攝像頭！"); else ButtonStartRealplayByWndNo_onclick(); } }, '-', { text: '全屏', width: 70, handler: function () { ButtonSetSmartWndFullScreen_onclick(); } }, '-', { text: '下載', width: 70, handler: function () { //window.open("../../../../Files/庫檔案.rar"); window.open("../../../../Files/ocx.exe"); } }, '<div>提示：首次使用監控請下載監控外掛，雙擊執行外掛。</div>', ] }] }); //樹結構 var treeStore = Ext.create('Ext.data.TreeStore', { proxy: { type: "ajax", actionMethods: { read: "POST" }, url: "YTPlay.aspx?method=GetAllYT", reader: { type: 'json' } } }); treeStore.load(); var tree1 = new Ext.create('Ext.tree.Panel', { title: '監控區域', rootVisible: false, listeners: { containercontextmenu: function (ee, e, eOpts) //容器上的右鍵選單 { e.preventDefault(); //禁止容器上進行右鍵 }, itemclick: function (ee, record, item) //單擊 { var theId = record.data["id"]; var parentId = record.data["parentId"]; if (parentId != "root") { //通過ajax方式獲取指標資訊 Ext.Ajax.request({ url: "YTPlay1.aspx?method=GetOneIndex", method: 'POST', params: { indexId: theId }, success: function (response) { var json = eval('(' + response.responseText + ')'); //字串轉換為JSON var jsonStore = Ext.create('Ext.data.JsonStore', { data: json, fields: ['Passageway'], autoLoad: true }); szCameraId = response.responseText; szCameraId = szCameraId.split(':')[1]; szCameraId = szCameraId.split('}')[0]; szCameraId = szCameraId.split('"')[1]; } }); } } }, store: treeStore }); //////////////////////////////////////////////////// /////////////////////頁面總佈局/////////////////// //////////////////////////////////////////////////// var viewport = Ext.create('Ext.container.Viewport', { layout: 'border', items: [ { region: 'center', border: 0, bodyStyle: 'padding: 6px;', layout: 'border', items: [ { region: 'west', width: 250, border: 0, layout: 'fit', collapsible: true, collapsed: false, //控制頁面載入時選單是否展開 split: true, items: tree1 }, { region: 'center', border: 0, layout: 'border', items: video }, { title: '雲臺操作', region: 'east', width: 250, border: 0, layout: 'fit', collapsible: true, collapsed: false, //控制頁面載入時選單是否展開 split: true, dockedItems: [ { xtype: 'toolbar', height: 30, items: [ { id: 'leftTop', text: '左上', width: 70, handler: function () { ButtonPtzDirection_onclick(5); setTimeout(function () { ButtonPtzDirection_onclickStop(1); }, 100); //Ext.get("leftTop").on("mousedown", function () { // ButtonPtzDirection_onclick(5); // alert(1); //}); //Ext.get("leftTop").on("mouseup", function () { // ButtonPtzDirection_onclickStop(1); //}); //ButtonPtzDirection_onclick(5); //ButtonPtzDirection_onclickStop(1); } }, ' ', { id: 'top', text: '上', width: 70, handler: function () { ButtonPtzDirection_onclick(1); setTimeout(function () { ButtonPtzDirection_onclickStop(1); }, 100); //Ext.get("top").on("mousedown", function () { // ButtonPtzDirection_onclick(1); // alert(2); //}); //Ext.get("top").on("mouseup", function () { // ButtonPtzDirection_onclickStop(1); //}); //ButtonPtzDirection_onclick(1); //ButtonPtzDirection_onclickStop(1); } }, ' ', { id: 'rightTop', text: '右上', width: 70, handler: function () { ButtonPtzDirection_onclick(7); setTimeout(function () { ButtonPtzDirection_onclickStop(1); }, 100); //Ext.get("rightTop").on("mousedown", function () { // ButtonPtzDirection_onclick(7); //}); //Ext.get("rightTop").on("mouseup", function () { // ButtonPtzDirection_onclickStop(1); //}); //ButtonPtzDirection_onclick(7); //ButtonPtzDirection_onclickStop(1); } } ] }, { xtype: 'toolbar', height: 30, items: [ { id: 'left', text: '左', width: 70, handler: function () { ButtonPtzDirection_onclick(3); setTimeout(function () { ButtonPtzDirection_onclickStop(1); }, 100); //Ext.get("left").on("mousedown", function () { // ButtonPtzDirection_onclick(3); //}); //Ext.get("left").on("mouseup", function () { // ButtonPtzDirection_onclickStop(1); //}); //ButtonPtzDirection_onclick(3); //ButtonPtzDirection_onclickStop(1); } }, ' ', { text: '', width: 70, handler: function () { //ButtonPtzDirection_onclickStop(1); } }, ' ', { id: 'right', text: '右', width: 70, handler: function () { ButtonPtzDirection_onclick(4); setTimeout(function () { ButtonPtzDirection_onclickStop(1); }, 100); //Ext.get("right").on("mousedown", function () { // ButtonPtzDirection_onclick(4); //}); //Ext.get("right").on("mouseup", function () { // ButtonPtzDirection_onclickStop(1); //}); //ButtonPtzDirection_onclick(4); //ButtonPtzDirection_onclickStop(1); } } ] }, { xtype: 'toolbar', height: 30, items: [ { id: 'leftBottom', text: '左下', width: 70, handler: function () { ButtonPtzDirection_onclick(6); setTimeout(function () { ButtonPtzDirection_onclickStop(1); }, 100); //Ext.get("leftBottom").on("mousedown", function () { // ButtonPtzDirection_onclick(6); //}); //Ext.get("leftBottom").on("mouseup", function () { // ButtonPtzDirection_onclickStop(1); //}); //ButtonPtzDirection_onclick(6); //ButtonPtzDirection_onclickStop(1); } }, ' ', { id: 'bottom', text: '下', width: 70, handler: function () { ButtonPtzDirection_onclick(2); setTimeout(function () { ButtonPtzDirection_onclickStop(1); }, 100); //Ext.get("bottom").on("mousedown", function () { // ButtonPtzDirection_onclick(2); //}); //Ext.get("bottom").on("mouseup", function () { // ButtonPtzDirection_onclickStop(1); //}); //ButtonPtzDirection_onclick(2); //ButtonPtzDirection_onclickStop(1); } }, ' ', { id: 'rightBottom', text: '右下', width: 70, handler: function () { ButtonPtzDirection_onclick(8); setTimeout(function () { ButtonPtzDirection_onclickStop(1); }, 100); //Ext.get("rightBottom").on("mousedown", function () { // ButtonPtzDirection_onclick(8); //}); //Ext.get("rightBottom").on("mouseup", function () { // ButtonPtzDirection_onclickStop(1); //}); //ButtonPtzDirection_onclick(8); //ButtonPtzDirection_onclickStop(1); } } ] }, ] } ] }] }); });
程式碼沒有做詳細解釋，如果不懂，可以參考大華連線dss平臺的webdemo，裡面包括demo和幾個特例和SDK開發手冊，看完後對於實現應該不會有大問題。
demo連線：https://download.csdn.net/download/qq_25086397/10766756
另外還有兩個一個是64位ocx控制元件打包cab和exe的方法，另一個32位ocx控制元件打包cab和exe的方法，是一個不錯的工具，有需要的可以進行下載。
下載地址32：https://download.csdn.net/download/qq_25086397/10766903
64：https://download.csdn.net/download/qq_25086397/10766908