EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息...
背景介绍
EasyNVR核心在于摄像机的音视频流的获取、转换、转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器、Android、iOS、微信)进行录像文件的检索、回放和下载。
在保证EasyNVR和前端设备之间网络相通的基础条件下,EasyNVR通过获取数字网络摄像机视频流完成音视频的采集,然后由EasyNVR内部实现流媒体协议转换、转码和流媒体分发工作,最终可以分发出RTMP、HTTP-FLV和HLS流,EasyNVR自身也可以对实时视频流进行存储和管理,同时EasyNVR自身也会提供一套可供各种平台、开发语言进行二次开发的HTTP接口,这样可以更加方便地与客户的业务系统相结合,达到更加丰富的管理功能。
问题分析
上一篇介绍通过接口来获取数据,本篇将介绍如何以分页形式展示出接口获取到的数据
通过接口获取到的数据往往会很多,为了追求页面的美观和方便用户检索,需要进行分页展示。EasyNVR可接入多通道,当我们的通道越来越多,一通篇的展示所有通道,不仅不方便用户的检索,对于页面的美观来说也不是很适合。
实际操作(以EasyNVR前端分页来进行演示):
使用BootstrapPagination首先需要进入相应的js文件(还有其他引用看具体的项目需求),
- 需要引入的控件
<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代码
<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代码(通过程序代码来设置分页参数)
function renderPortPage(ports){function pageChanged(pageIndex,size){ //size 是 pageSizevar $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:是经过处理过后需要使用的对象数据;
layoutScheme: “firstpage,pagenumber,lastpage”,//需要的分页样式展示的项目;
total : ports.length,//需要分页的数据总数;
pageGroupSize : 3,//默认显示的分页选择个数
pageSize : 8,//每页展示条数;
firstPageText : ‘首页’,//定义标签样式;
lastPageText : ‘尾页’, //定义标签样式;
pageChanged : pageChanged//调用函数
可以根据自己的项目需求来定义其他一些样式
其他组件:
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应用场景
EasyNVR可以说已经成为国内视频互联网化基础建设的排头兵,几乎各个民生行业都已经有了EasyNVR视频能力输出的身影,EasyNVR多年服务于各行各业视频基础建设,EasyNVR的可靠性、完整性、稳定性已经受到了业界的广泛认可!
智慧校园
平安厂区
智慧家居
EasyNVR安防摄像机网页流媒体服务
EasyNVR是一款拥有完整、自主、可控知识产权,同时又能够具备软硬一体功能的安防互联网化流媒体服务器,能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP、Onvif协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发。详情可访问EasyNVR官网:http://www.easynvr.com
转载于:https://www.cnblogs.com/babosa/p/11123976.html
EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息...相关推荐
- EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息
背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap弹窗功能的实现方案与代码
前言介绍 在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加 ...
- EasyNVR摄像机网页无插件直播方案H5前端构建之:关于接口调用常见的一些问题(401 Unauthorized)...
背景分析 最近在使用EasyNVR的过程中,很多小伙伴咨询关于接口调用的问题,初步判断应该是遇到权限问题(401 Unauthorized).EasyNVR为第三方系统和应用提供了标准的API接口,方 ...
- 基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案...
我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...
- 基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案
我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...
- RTSP安防网络摄像头/海康大华硬盘录像机网页无插件直播方案EasyNVR之主要功能模块及相关技术特点与性能指标分析
EasyNVR安防流媒体服务解决方案,支持RTSP稳定拉流接入,支持Onvif协议接入,支持RTSP/RTMP/HLS/HTTP-FLV分发,将传统安防监控设备互联化,无插件直播等. 功能模块 1.设 ...
- EasyNVR网页摄像机直播方案H5前端构建之:如何播放HLS
背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...
- RTSP安防网络摄像头/海康大华硬盘录像机网页无插件直播方案EasyNVR出现操作和画面显示不一致问题如何优化?
诞生背景 众所周知,EasyNVR可以将局域网/广域网上的海康/大华等网络摄像头由rtsp转换为rtmp.rtsp.hls.flv协议转换,并提供推流服务,可以将拉到的网络摄像头直接转发到流媒体服务器 ...
- EasyNVR摄像头网页无插件直播H5、谷歌Chrome直播方案中如何降低播放延迟问题
背景分析 众所周知,为了让用户更好的了解与使用EasyNVR,熟悉EasyNVR的相关功能,将EasyNVR与本地应用场景更好的融合,我们团队提出产品免费试用的理念.只要我们的产品符合用户的使用场景, ...
最新文章
- IDEA IntelliJ/ DataGrip 修改自动补全快捷键
- 上交三月月赛[SJTU] 1105 path
- linux课程教学设计,《LINUX操作系统》课程整体教学设计.doc
- java 高级编程进阶_JAVA高级编程之hibernate进阶学习
- Win11正版和盗版有什么区别
- 结合计算机专业谈创新,计算机专业学生创新能力培养论文
- VMWAre+centeros7下tomcat的安装
- 阅读《梦断代码》计划
- 打造“5G+IoT”生态,共创产业繁荣沃土
- 中国企业信息化发展史
- 用python预测小孩的身高_python按公式预测身高
- jenkins调查总结
- 生鲜配送APP软件开发快速制作
- 个人投资理财太平亿康的五种方式
- java 日期计算星座_Java日期时间API系列25-----Jdk8中java.time包中的新的日期时间API类,使用MonthDay计算十二星座。...
- vue页面路由跳转重复报错的问题
- Python爬虫教程-16-破解js加密实例(有道在线翻译)
- Win7 easy connect 提示:选路连接失败,可能当前连接网络异常,请稍后重试
- 在APP盛行的移动时代,域名还有用吗?
- java末日之城手机单机游戏_末日之城手游下载