EasyNVR RTSP转HLS（m3u8+ts）流媒体服务器前端构建之：bootstrap-datepicker日历插件的实时动态展现

程序员文章站 2022-07-14 20:24:26

...

EasyNVR中有对录像进行检索回放的功能，且先抛开录像的回放，为了更好的用户体验过、让用户方便快捷的找到对应通道对应日期的录像视频，是必须的功能。
基于上述的需求，为前端添加一个日历插件，在日历上展示出所有的录像信息，用来告知用户那些日期有回放录像，那些日期不没有回放录像是很有要的。

如何实现日历插件展示出对应日期信息：

1.需要引入的控件

<script src="@@docroot/adminlte-2.3.6/plugins/moment/moment-with-locales.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="./adminlte-2.3.6/plugins/daterangepicker/daterangepicker.css" />
<script type="text/javascript" src="@@docroot/adminlte-2.3.6/plugins/daterangepicker/moment.js"></script>
<script type="text/javascript" src="@@docroot/adminlte-2.3.6/plugins/daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" src="@@docroot/js/jquery.qrcode.min.js"></script>
<link rel="stylesheet" href="/bootstrap-datepicker-1.7.1/css/bootstrap-datepicker3.css"/>
<script src="/bootstrap-datepicker-1.7.1/js/bootstrap-datepicker.js"></script>
<script src="/bootstrap-datepicker-1.7.1/locales/bootstrap-datepicker.zh-CN.min.js"></script>

2.日历控件展示的web触发样式HTML代码

 <div class="form-group pull-right">
   <div class="input-group input-group-sm">
       <input type="text" class="form-control date" placeholder="选择日期">
       <div class="input-group-btn">
       <button type="button" class="btn btn-sm btn-default" onclick="$(this).closest('.input-group').find('.date').focus()">
          <i class="fa fa-calendar"></i>
       </button>
   </div>
   </div>
  </div>

3.js的格式化

 $(".box.videos .date").datepicker({
        language : "zh-CN",
        autoclose : true,
        format : "yyyy-mm-dd",
        todayHighlight : false,
        beforeShowDay : function(data){
            var id = $(".box.videos").data("id");
            if(!id) return;
            var gFlags=$(".box.videos").data("gFlags")||{};
            var period = data.format("yyyyMM");
            if(typeof gFlags[period] == "undefined"){
                $.ajax({
                    async : false,
                    url:"/query_record_monthly",
                    type:"get",
                    data:{
                        id:"record_"+$.cookie("portNum"),
                        period:period,
                    },
                }).then(function(xx){
                    if(xx.code != 0){
                        return $.Deferred().reject();
                    }
                    gFlags[period] = xx.data.flags || "0000000000000000000000000000000";

                }).fail(function(){
                    gFlags[period] = "0000000000000000000000000000000";
                });
            }
            var flags = gFlags[period];
            var d = data.format("dd");
            var flag = flags[d - 1];
            if(flag == '0'){
                return {classes : "text-gray", tooltip : "没有录像", enabled : false};
            } else {
                return {classes : "text-green text-bold", tooltip : "有录像"};
            }
        }
    }).datepicker("setDate",new Date()).on('changeDate', function(data){
        var period = data.format('yyyymmdd')
        var id = "record_"+$.cookie("portNum");
        $.ajax({
            url:"/query_record_daily",
            type: "get",
            data: {
                id: id,
                period: period,
            },
            success:function(data) {
                renderVideoPage(data.data.list)
            }
        })
    });

需要注意的是， beforeShowDay（）是处理在插件加载出来之前对日历插件所做的一些样式或其他方面的更改。当我们想要看到日历展示出对应日期得信息的时候，必须在日历加载出来以前对他进行操作。由于获取日历上展示的信息都是实时的通过请求接口获得的，因此，我们需要在通过Ajax请求接口的过程中就要使用同步请求，只有我们实时获得到的数据才有必要在日历上相应的显示出来。

关于EasyNVR

EasyNVR能够通过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR，EasyNVR能够将这些视频源的音视频数据进行拉取，转换为RTMP/HLS，进行全平台终端H5直播（Web、Android、iOS），并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发；

详细说明：http://www.easydarwin.org/easynvr/