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