Background
EasyNVR core is to obtain audio and video streaming camera, conversion, transcoding and high-performance distribution, while simultaneously complete video storage for real-time live streams, retrieve video files on the client (PC browser, Android, iOS, micro-Letter) , playback and download.
Under basal conditions to ensure that the front end of the device and between EasyNVR communication network, audio and video capture EasyNVR completed by acquiring digital network camera video stream, and is implemented inside EasyNVR streaming protocol, transcoding and streaming media distribution and, ultimately, can be divided issued RTMP, HTTP-FLV and HLS streaming, EasyNVR itself can also store and manage real-time video streams while EasyNVR itself will provide for a variety of platforms, development language for secondary development of HTTP interface, so you can more easily combined with the customer's business systems, to achieve a more extensive management functions.
problem analysis
Previous Introduction to retrieve data through the interface herein, this will demonstrate how to form paging interface to obtain data
Acquired by the interface data tend to be a lot, in pursuit of beauty pages and user search needs to be paged show. EasyNVR can access multi-channel, when more and more of our channel, a show throughout all channels, not only inconvenient to the user's search for a beautiful page is not very suitable.
The actual operation (to EasyNVR the front page to demonstrate):
Use BootstrapPagination first need to enter the corresponding js files (see also other references to specific project requirements),
- controls need to be introduced
<link type="text/css" href="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8" src="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap.min.js"></script>
<link rel="stylesheet" href="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap-pagination.css" />
<script src="@@docroot/adminlte-2.3.6/plugins/bootstrap-pagination/bootstrap-pagination.js"></script>
- HTML Code
<div class="ports box">
<div class="box-header">
<h4 class="text-success text-center">通道列表</h4>
<div class="form-inline">
<input type="text" class="form-control pull-right" placeholder="搜索" id="search" onkeyup="searchChannel()" ><!-- <i class="fa fa-search"></i> -->
</div>
</div>
<div class="box-body">
<table class="table table-striped pointer" >
</table>
</div>
<div class="box-footer clearfix">
<nav class='pull-right'>
<ul class='pagination pagination-sm'></ul>//分页展示的位置
</nav>
</div>
</div>
- JS Code (paging parameters to set the program code)
function renderPortPage(ports){
function pageChanged(pageIndex,size){ //size 是 pageSize
var $t = $(".ports .box-body table");
var _ids = ports.slice(pageIndex*size, pageIndex*size + size);
$(".box-body table tr").remove();
if(_ids.length == 0){
$t.append("<tr><td>没有数据</td></tr>");
}
$.each(_ids,function(i,id){
var $tr = $("<tr alt='{channel}' title='{Name}' role='button'><td class='text-success'> <i class='fa fa-folder'></i> {Name}</td></tr>".format({channel:id.Channel,Name:id.Name}));
$t.append($tr);
})
}
var pager = BootstrapPagination($(".ports .box-footer nav ul"),{
layoutScheme: "firstpage,pagenumber,lastpage",
total : ports.length,
pageGroupSize : 3,
pageSize : 8,
firstPageText : '首页',
lastPageText : '尾页',
pageChanged : pageChanged
})
pager.pageIndex(0);//分页索引值
}
ports: object data processing needs through after use;
layoutScheme: "firstpage, pageNumber, the LastPage", pagination style showcase projects // required;
Total: ports.length, the total number of data // paged;
pageGroupSize: 3, // default page number of the selected display
pageSize: 8, // display the number of page;
firstPageText: 'Home', // define the label style;
lastPageText: 'Last', // define the label style;
pageChanged: pageChanged // call the function
Other styles can be defined according to their project requirements
-
Other components:
layoutScheme:"lefttext,pagesizelist,firstpage,prevgrou ppage, prevpage,pagenumber,nextpage,nextgrouppage,lastpage, pageinput,righttext", //记录总数。 total: 101, //分页尺寸。指示每页最多显示的记录数量。 pageSize: 20, //当前页索引编号。从其开始（从0开始）的整数。 pageIndex: 2, //指示分页导航栏中最多显示的页索引数量。 pageGroupSize: 5, //位于导航条左侧的输出信息格式化字符串 leftFormateString: "本页{count}条记录/共{total}条记录", //位于导航条右侧的输出信息格式化字符串 rightFormateString: "第{pageNumber}页/共{totalPages}页", //页码文本格式化字符串。 pageNumberFormateString: "{pageNumber}", //分页尺寸输出格式化字符串 pageSizeListFormateString: "每页显示{pageSize}条记录", //上一页导航按钮文本。 prevPageText: "上一页", //下一页导航按钮文本。 nextPageText: "下一页", //上一组分页导航按钮文本。 prevGroupPageText: "上一组", //下一组分页导航按钮文本。 nextGroupPageText: "下一组", //首页导航按钮文本。 firstPageText: "首页", //尾页导航按钮文本。 lastPageText: "尾页", //设置页码输入框中显示的提示文本。 pageInputPlaceholder: "GO", //接受用户输入内容的延迟时间。单位：毫秒 pageInputTimeout: 800, //分页尺寸列表。 pageSizeList: [5, 10, 20, 50, 100, 200],
EasyNVR scenarios
EasyNVR can be said to have become the vanguard of the domestic Internet video infrastructure, livelihood of the people in almost every industry have already had the ability to output video EasyNVR figure, EasyNVR years of service in all walks of life video infrastructure, EasyNVR reliability, integrity, stability It has been widely recognized in the industry!
EasyNVR security cameras web streaming service
EasyNVR have is a full, independent, controllable intellectual property rights, but also can have the function of security software and hardware integration of Internet streaming media server, network camera through a simple channel configuration, monitoring industry inside traditional high-definition network camera IP Camera , etc. with the NVR RTSP, Onvif protocol output device access to EasyNVR, EasyNVR these audio and video data can be video sources is a pull, is converted to RTMP / HLS, full internet terminal H5 live (Web, Android, iOS), and EasyNVR able to broadcast live video source of data to a third party CDN network, Internet-scale distributed. EasyNVR details you may visit the official website: http://www.easynvr.com
