EasyNVR RTSP turn RTMP-HLS-FLV streaming media server front end of the building: real-time dynamic show bootstrap-datepicker calendar plugin

Disclaimer: This article is EasyNVR technical team of the original article, shall not be reproduced without the bloggers allowed. https://blog.csdn.net/EasyNVR/article/details/91819061

EasyNVR scene needs

  • Basics: either the city or park management or monitoring kindergartens monitoring, security monitoring these requirements have become an integral part of our lives an important part, not only to enhance the level of city management and the practical needs of the people a sense of security, but also to improve fire important social security sector;

  • Convenient: With the improvement of scientific and technological level for the Internet service, the computer is no longer the only choice, smart phones, tablet PCs, mobile terminals and other specific user terminal are optional hardware, therefore, we have reason to ask our camera live view can also keep up with trends, it can be done anywhere, anytime I want to see;

  • Complete: demand for security inevitably accompanied by live storage need real-time video, so the video stream in real-time search playback is also an important part of the essential security, all terminals in the Internet, no obstacles, no plug-ins live, video retrieval and playback, will also let users experience greatly improved.

  • Controlled: For operation and maintenance system or operator, the video system upgrade iteration, fault protection operation and maintenance, on-site support, these products are an essential prerequisite applications, but how can cost a minimum of labor costs, time under the premise of complete operation and maintenance services and system upgrade services, has become a major issue in video applications beginning of the construction should seriously consider.

EasyNVR construction goal is to make users want to see anytime, anywhere, according to the general needs of the industry, targeted to provide the appropriate functionality! Which retrieves video playback function, in consideration of the user experience, convenient principle, to quickly find the corresponding channel corresponding to the video recording date, is the necessary functions.

Based on the above requirements, add a calendar in front-end plug, video exhibits all the information on the calendar, the date used to inform the user which has video playback, which does not play back the record date.

Calendar Show Play Video

Calendar plug-in to show how to implement the corresponding date information?

1. The need to introduce controls


<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. The calendar control display HTML code of web trigger style


 <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 format


 $(".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)
            }
        })
    });

Note that, beforeShowDay () is dealing with some style changes before loading the plug out of the plug-made calendar or otherwise. When we want to see a calendar date to show the corresponding information, it is necessary for him to operate in the calendar before loading it. As access to information displayed on the calendar in real time via the request interface available, so we will need to use synchronous request during the request interface through Ajax, only we have real-time access to the data necessary in the respective calendar show.

EasyNVR streaming solution

EasyNVR network camera through a simple channel configuration, the traditional industry, which monitor network camera HD IP Camera, NVR equipment having access to the RTSP protocol output EasyNVR, EasyNVR these audio and video data can be video sources is a pull converter as RTMP / HLS, full platform terminal H5 live (Web, Android, iOS), and EasyNVR able to live video source of data on to a third party CDN network, live internet-scale distribution, the main building is the goal of each EasyNVR every kind of security cameras, NVR unified access and management, and control the output stream on demand, to provide a unified platform for the whole terminal H5 standard output stream:

No plug-ins live EasyNVR

EasyNVR application scenarios

EasyNVR

EasyNVR

EasyNVR

EasyNVR applicable Case

Based EasyNVR achieved in many sectors scene live demand, has been widely used in oil fields, irrigation dams, parks monitoring, kindergartens live, scenic live:

EasyNVR web monitoring

The project is a water monitoring applications, EasyNVR server side of the network have access to the side with a public fixed IP, the program uses a 1x

EasyNVR web monitoring

On a construction site for the Web page monitoring project, EasyNVR program used to 1x

EasyNVR web monitoring

The monitoring program is a live broadcast in kindergarten, nursery for parents for live micro-channel, EasyNVR scheme adopted for the 1x

EasyNVR web monitoring

The park is monitoring a Web page monitoring project, EasyNVR program used to 1x

EasyNVR web monitoring

On a construction site for the Web page monitoring project, EasyNVR program used to 1x

EasyNVR web monitoring

On page monitoring locations in the oil project, EasyNVR program uses to 2x

EasyNVR

Huangshan scenic area on a micro-channel live project, EasyNVR program uses to 2x

Guess you like

Origin blog.csdn.net/EasyNVR/article/details/91819061
Recommended