海康摄像头录像回放功能

海康摄像头录像回放功能

主要使用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分 记录。