EasyNVR has the function of retrieving and playback the video, and first put aside the playback of the video, in order to better user experience, so that users can easily and quickly find the corresponding channel corresponding to the date of the video, is a necessary function.
Based on the above requirements, a calendar plug-in is added to the front end to display all the video information on the calendar, which is used to inform users that the dates have replay videos, and those dates do not have replay videos are very important.
How to implement the calendar plug-in to display the corresponding date information:
1. Controls to be introduced
<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 Trigger Style HTML Code Displayed by Calendar Control
<div class="form-group pull-right">
<div class="input-group input-group-sm">
<input type="text" class="form-control date" placeholder="Selection date">
<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. Formatting of 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 : "No video", enabled : false};
} else {
return {classes : "text-green text-bold", tooltip : "Videos"};
}
}
}).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)
}
})
});
It should be noted that beforeShowDay () handles some style or other changes made to the calendar plug-in before the plug-in is loaded. When we want to see the calendar showing information about the corresponding date, we must operate on it before it is loaded. Since the information displayed on the calendar is obtained in real time through the request interface, we need to use synchronous requests in the process of requesting the interface through Ajax. Only the data we get in real time need to be displayed on the calendar accordingly.
On EasyNVR
EasyNVR can connect the traditional high-definition network cameras IP Camera, NVR and other devices with RTSP protocol output to EasyNVR through simple network camera channel configuration. EasyNVR can extract the audio and video data from these video sources, convert them into RTMP/HLS, and carry out H5 live broadcasting (Web, Android, iOS) on the whole platform terminal, and EasyNVR can provide video sources. The live data is connected to the third-party CDN network to realize the live distribution at the Internet level.
Detailed description: http://www.easydarwin.org/easynvr/
Get more information
Mail: support@easydarwin.org
WEB: www.EasyDarwin.org
Copyright © EasyDarwin.org 2012-2017
