EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:内部搜索功能的实现
上一篇介绍了处理接口获取的数据,本篇将介绍如何在接收到的数据中搜索出自己符合条件的数据;
为了页面的美观,我们往往会以分页的形式来进行数据的展示。但是,当需要展示出来的数据太多的时候,我们很难迅速的找出自己想要的数据。自时候,我们就需要通过检索功能来实现对想要的数据的查找;
页面内的搜索一般多为通过搜索框来检索出自己想要的内容;
实现方法:
1.给搜索框绑定一个触发事件
HTML代码
<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()" >
</div>
</div>
将searchChannel方法绑定到onkeyup事件上;
2.通过触发事件来触发搜索方法
JS代码
function searchChannel(){
var inputValue = $("#search").val();
$.get(_url + "/getchannels").then(
function(data){
try{
var ret = JSON.parse(data);
ret.EasyDarwin.Body.Channels.sort(function (a, b) {
return parseInt(a["Channel"]) - parseInt(b["Channel"]);
})
var ports = ret.EasyDarwin.Body.Channels;
$.each(ports,function(i,channel){
channel['alias'] = channel.Name+channel.Channel;//添加属性值alias'
})
ports = ports.filter(function(val,idx,array){
return new RegExp(inputValue,"i").test(val.alias);
})
renderPortPage(ports);
}catch(e){
console.log(e);
}
}
);
}
通过filter()函数来对需要检索的原始数据进行筛选;
filter用于筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式
filter(expr|obj|ele|fn)
exprString 字符串值,包含供匹配当前元素集合的选择器表达式。
jQuery objectobject 现有的jQuery对象,以匹配当前的元素。
element Expression 一个用于匹配元素的DOM元素。
function(index) Function 一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。
通过filter进行处理筛选后的数组不会改变原有的数组结构;使用filter来过滤出符合搜索框输入条件的元素;然后再将过滤搜索出来的元素来进行分页展示或是根据具体的业务需求来进行相对应的处理。
关于EasyNVR
EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;
详细说明:http://www.easydarwin.org/easynvr/
获取更多信息
Copyright © EasyDarwin.org 2012-2017
EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:内部搜索功能的实现的更多相关文章
- EasyNVR摄像机无插件直播流媒体服务器前端构建之输入框样式的调整
EasyNVR授权方式分为软件的授权和硬件授权两种方式,软件授权需要在软件输入永久邀请码可以激化永久授权 起初我们的界面设计是为了满足功能的需求就是 ,用户可以输入激活码提交,完成永久授权. 在实际的 ...
- EasyNVR RTSP转HLS(m3u8+ts)流媒体服务器前端构建之:bootstrap-datepicker日历插件的实时动态展现
EasyNVR中有对录像进行检索回放的功能,且先抛开录像的回放,为了更好的用户体验过.让用户方便快捷的找到对应通道对应日期的录像视频,是必须的功能. 基于上述的需求,为前端添加一个日历插件,在日历上展 ...
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之_关于接口调用常见的一些问题(401 Unauthorized)
在之前的博客<EasyNVR H5流媒体服务器方案架构设计之视频能力平台>中我们描述了EasyNVR的定位,作为一个能力平台来进行功能的输出: 也就是说,在通常情况下,我们将一套视频的应用 ...
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:通过接口获取实时信息
对于动态网站,要实时更新网站的信息,通过接口来获取实时信息是一个必不可少的部分.EasyNVR可以接入IPC等前端设备,必须要实时获取到对应的IPC实时信息进行展示. 本篇主要说明Ajax来获取数据. ...
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:使用BootstrapPagination以分页形式展示数据信息
上一篇介绍通过接口来获取数据,本篇将介绍如何以分页形式展示出接口获取到的数据 获取到的数据往往会很多,为了追去页面的美观和方便用户的检索,需要进行分页的展示: EasyNVR可接如多通道,当我们的通道 ...
- EasyNVR RTSP转RTMP-HLS流媒体服务器前端构建之:bootstrap弹窗功能的实现
在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往就会使用弹窗效果 在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加繁琐, ...
- EasyNVR RTSP摄像机转HLS直播服务器中使用Onvif协议控制预置位
EasyNVR支持预置位控制,包括转到指定预置位,设置指定预置位,删除指定预置位 预置位在安防领域有较为普遍的应用,可以进行很多既定位置的跳转,很方便 之前我们说过如何用Onvif协议进行设备的发现, ...
- windows平台最简单的rtmp/hls流媒体服务器
feature: rtmp/hls live server for windows, double click to run,don't need config. run and quit: doub ...
- [SRS流媒体]RTMP/HLS 直播服务器simple-rtmp-server安装
一个采用MIT协议授权的国产的简单的RTMP/HLS 直播服务器,其核心的价值理念在于简单高效. 使用方法: tep 1: build srs tar xf simple-rtmp-server-*. ...
随机推荐
- 查询/删除/建立DB2数据表的主键
一.查询表主键. describe indexes for table <instancename>.<tablename> 例: describe indexes for t ...
- 稀疏编码(Sparse Coding)的前世今生(一) 转自http://blog.csdn.net/marvin521/article/details/8980853
稀疏编码来源于神经科学,计算机科学和机器学习领域一般一开始就从稀疏编码算法讲起,上来就是找基向量(超完备基),但是我觉得其源头也比较有意思,知道根基的情况下,拓展其应用也比较有底气.哲学.神经科学.计 ...
- 分布式配置中心介绍--Spring Cloud学习第六天(非原创)
文章大纲 一.分布式配置中心是什么二.配置基本实现三.Spring Cloud Config服务端配置细节(一)四.Spring Cloud Config服务端配置细节(二)五.Spring Clou ...
- 基于Bootstrap的页面排版知识
标题: Bootstrap定义了所有HTML的标题样式,<h1>...<h6>标签或者在标签内加入.h1 class等可以得到一样的效果 效果: 副标题: 标签<smal ...
- Android Spinner In Toolbar
As the title of the post suggest in this tutorial we will see how to have spinner widget inside the ...
- HDU4004
题目大意,有一条长度为L和河流,中间穿插n个石凳,青蛙跳m次经过石凳后到达对岸,求青蛙每次跳跃的最大距离的最小值 本题数据量大n<500000,显然简单的o(n*n)算法是通过不了的,在输入大量 ...
- python模块相关
aniso8601 pyquery networkx (2.0) - Python package for creating and manipulating grap ...
- 2017.2.28 activiti实战--第七章--Spring容器集成应用实例(五)普通表单
学习资料:<Activiti实战> 第七章 Spring容器集成应用实例(五)普通表单 第六章中介绍了动态表单.外置表单.这里讲解第三种表单:普通表单. 普通表单的特点: 把表单内容写在 ...
- git-for-windows 安装无图标的问题
git-for-windows.ico 安装无图标的问题 一. 问题表现: 桌面图标与右建菜单图标,所是未知文件的图标, 二. 问题解决: 在shard/git/ copy 一个ico 文件(如git ...
- IO流中文件和文件夹的删除程序举例
/* * 删除功能(无论是文件夹还是文件都是用delete方法,仅仅能一级一级的删除.):public boolean delete() * * 注意: * A:假设你创建文件或者目录忘了写盘符路径, ...