EasyNVR摄像机网页无插件直播方案H5前端构建之：bootstrap-datepicker日历插件的实时动态展示

EasyNVR场景需求

• 基础：无论是城市监控仍是园区管理或者是幼儿园监控，这些安防监控需求已经成为咱们生活中不可或缺的重要一环，这不单单是提高城市管理水平和人民群众安全感的现实需求，也是完善社会治安消防的重要板块；

• 便捷：随着科技水平的提升，对于互联网服务，电脑再也不是惟一选择，智能手机、平板电脑、特定的移动终端等都是可选择的用户终端硬件方式，所以，咱们有理由要求咱们的摄像机直播观看也能跟上潮流，能够作到随时随地看我想看；

• 完整：安防直播的需求必然会伴随着是否须要实时录像的存储，所以将实时的视频流进行检索回放也是安防上不可或缺的重要一环，互联网下的全终端、无阻碍、无插件直播、视频录像检索与回放，也将会让用户的体验获得极大的提高。

• 可控：对于系统运维或者运营者来讲，视频系统升级迭代、故障运维保障、现场支撑，这些都是产品应用必不可少的前提条件，然而如何可以在最少的人力成本、时间成本的前提下，完成对系统的运维服务和升级改造服务，就成为了各大视频应用系统在建设之初就要认真考虑的问题。

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网络，实现互联网级别的直播分发，EasyNVR的主要建设目标是将各类各样的安防摄像机、NVR进行统一接入和管理，并控制流的按需输出，对全平台终端提供统一的标准H5流输出：

EasyNVR适用场景

EasyNVR适用案例

基于EasyNVR实现了不少行业场景的直播需求，目前已经普遍应用于石油油田、水利大坝、园区监控、幼儿园直播、景区直播：

上为一水利监控项目应用，EasyNVR服务器一边拥有内网访问权限，一边拥有公网固定IP，采用的是方案1x

上为一施工工地网页监控项目，采用的EasyNVR方案为1x

上为一幼儿园直播监控项目，面向家长进行幼儿园微信直播，采用的EasyNVR方案为1x

上为一园区监控网页监控项目，采用的EasyNVR方案为1x

上为一施工工地网页监控项目，采用的EasyNVR方案为1x

上为中石油地点网页监控项目，采用的EasyNVR方案为2x

上为黄山某景区微信直播项目，采用的EasyNVR方案为2x