通过连接大华dss平台来实现查看摄像头画面和实现云台控制功能Extjs
上个版本的大华摄像头监控的查看虽然可以达到初步效果，但是后续实现云台的控制等就无法实现了，所以后来采取了通过连接大华的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 = '';
//监控播放控件初始化
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: ''
+ '',
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");
}
},
'提示：首次使用监控请下载监控插件，双击运行插件。',
]
}]
});
//树结构
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