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