海康摄像头录像回放功能
主要使用layui,海康web3.0等开发
页面主要功能: 打开这个页面会自动登录已经配置好的摄像头登录参数,用户设置日期后点击搜索可以查询录像,查询到了之后可以自动播放。
主要代码:
登录:
```java
function clickLogin() {
var szIP= [[${@dict.getDictValue('mv_camera_param', 'ipaddress')}]];
var szPort= [[${@dict.getDictValue('mv_camera_param', 'port')}]];
var szUsername= [[${@dict.getDictValue('mv_camera_param', 'username')}]];
var szPassword= [[${@dict.getDictValue('mv_camera_param', 'password')}]];
if ("" == szIP || "" == szPort) {
return;
}
var szDeviceIdentify = szIP + "_" + szPort;
var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
success: function (xmlDoc) {
// showOPInfo(szDeviceIdentify + " 登录成功!");
// $("#ip").prepend("<option value='" + szDeviceIdentify + "'>" + szDeviceIdentify + "</option>");
setTimeout(function () {
$("#mv_ip").val(szDeviceIdentify);
getChannelInfo();
getDevicePort();
}, 10);
},
error: function (status, xmlDoc) {
// showOPInfo(szDeviceIdentify + " 登录失败!", status, xmlDoc);
}
});
if (-1 == iRet) {
// showOPInfo(szDeviceIdentify + " 已登录过!");
}
}
搜索录像`
var g_iSearchTimes = 0;
function clickRecordSearch(iType) {
var szDeviceIdentify = $("#mv_ip").val(),
iChannelID = parseInt($("#channels").val(), 10),
bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
iStreamType = parseInt(1),
szStartTime = $("#startTime").val(),
szEndTime = $("#endTime").val();
if (null == szDeviceIdentify) {
return;
}
if (bZeroChannel) {// 零通道不支持录像搜索
return;
}
if (0 == iType) {// 首次搜索
$("#searchlist").empty();
g_iSearchTimes = 0;
}
WebVideoCtrl.I_RecordSearch(szDeviceIdentify, iChannelID, szStartTime, szEndTime, {
iStreamType: iStreamType,
iSearchPos: g_iSearchTimes * 40,
success: function (xmlDoc) {
if ("MORE" === $(xmlDoc).find("responseStatusStrg").eq(0).text()) {
g_iSearchTimes++;
clickRecordSearch(1);// 继续搜索
} else if ("OK" === $(xmlDoc).find("responseStatusStrg").eq(0).text()) {
var iLength = $(xmlDoc).find("searchMatchItem").length;
// showOPInfo(szDeviceIdentify + " 搜索录像文件成功!");
// alert("搜索录像文件成功!")
clickStartPlayback();
} else if("NO MATCHES" === $(xmlDoc).find("responseStatusStrg").eq(0).text()) {
setTimeout(function() {
// showOPInfo(szDeviceIdentify + " 没有录像文件!");
alert("没有录像文件!")
}, 50);
}
},
error: function (status, xmlDoc) {
// showOPInfo(szDeviceIdentify + " 搜索录像文件失败!", status, xmlDoc);
alert("搜索录像文件失败!");
}
});
}
开始回放
```java
function clickStartPlayback() {
var oWndInfo = WebVideoCtrl.I_GetWindowStatus(g_iWndIndex),
szDeviceIdentify = $("#mv_ip").val(),
iRtspPort = parseInt($("#rtspport").val(), 10),
iStreamType = parseInt(1),//主码流写死
bZeroChannel = $("#channels option").eq($("#channels").get(0).selectedIndex).attr("bZero") == "true" ? true : false,
iChannelID = parseInt($("#channels").val(), 10),
szStartTime = $("#startTime").val(),
szEndTime = $("#endTime").val(),
szInfo = "",
bChecked = false,
iRet = -1;
if (null == szDeviceIdentify) {
return;
}
if (bZeroChannel) {// 零通道不支持回放
return;
}
var startPlayback = function () {
if (bChecked) {// 启用转码回放
var oTransCodeParam = {
TransFrameRate: "14",// 0:全帧率,5:1,6:2,7:4,8:6,9:8,10:10,11:12,12:16,14:15,15:18,13:20,16:22
TransResolution: "1",// 255:Auto,3:4CIF,2:QCIF,1:CIF
TransBitrate: "19"// 2:32K,3:48K,4:64K,5:80K,6:96K,7:128K,8:160K,9:192K,10:224K,11:256K,12:320K,13:384K,14:448K,15:512K,16:640K,17:768K,18:896K,19:1024K,20:1280K,21:1536K,22:1792K,23:2048K,24:3072K,25:4096K,26:8192K
};
WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
iRtspPort: iRtspPort,
iStreamType: iStreamType,
iChannelID: iChannelID,
szStartTime: szStartTime,
szEndTime: szEndTime,
oTransCodeParam: oTransCodeParam,
success: function () {
szInfo = "开始回放成功!";
// showOPInfo(szDeviceIdentify + " " + szInfo);
// alert(szInfo)
$("#startPlay").hide();
$("#stopPlay").show();
},
error: function (status, xmlDoc) {
if (403 === status) {
szInfo = "设备不支持Websocket取流!";
} else {
szInfo = "开始回放失败!";
}
// showOPInfo(szDeviceIdentify + " " + szInfo);
alert(szInfo);
}
});
} else {
WebVideoCtrl.I_StartPlayback(szDeviceIdentify, {
iRtspPort: iRtspPort,
iStreamType: iStreamType,
iChannelID: iChannelID,
szStartTime: szStartTime,
szEndTime: szEndTime,
success: function () {
szInfo = "开始回放成功!";
// showOPInfo(szDeviceIdentify + " " + szInfo);
// alert(szInfo);
$("#startPlay").hide();
$("#stopPlay").show();
},
error: function (status, xmlDoc) {
if (403 === status) {
szInfo = "设备不支持Websocket取流!";
} else {
szInfo = "开始回放失败!";
}
// showOPInfo(szDeviceIdentify + " " + szInfo);
alert(szInfo);
}
});
}
};
if (oWndInfo != null) {// 已经在播放了,先停止
WebVideoCtrl.I_Stop({
success: function () {
startPlayback();
}
});
} else {
startPlayback();
}
}
主要就是上面的代码,为了解决laydate日期插件被object挡住问题,我将日期选择做成了弹出。2020年6月8日10点15分 记录。