Achieve internal search function: EasyNVR RTSP turn RTMP-HLS-FLV streaming server front end of Construction

（Creative Commons）

EasyNVR live web camera program

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

background analysis

Previous describes the data processing interface obtained herein, this explains how to search out their own qualified data in the received data;
for the beauty pages, we tend to be in the form of pages of data presentation. However, when too much data needs to show up when it is difficult to quickly find the data they want. At this point, we need to find the data you want to achieve through the search function;

Search within a page and more generally for retrieving the content they want through the search box:

• Implementation:

1. The search box is bound to a trigger event

• HTML code

  <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>
  

• The searchChannel method to bind to the onkeyup event;

2. By triggering event to trigger search method

• JS code

   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);
                }
            }
        );
   }  
  

To filter the raw data to be retrieved by the filter () function, filter elements for screening expression match specified collection, the method for matching narrow, a plurality of expressions separated by commas.

filter(expr|obj|ele|fn)
exprString  字符串值，包含供匹配当前元素集合的选择器表达式。
jQuery objectobject  现有的jQuery对象，以匹配当前的元素。
element Expression  一个用于匹配元素的DOM元素。 
function(index) Function  一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

The array does not change after the filter processing by the filter array of the original structure, use the filter to filter out elements that match the search criteria input box, and then filtered out of the search element to display paging or according to specific business requirements for corresponding processing.

EasyNVR deployment architecture

A single point in the network

A single point of public

Multi-public network

RTMP Streaming

EasyNVR scenarios

EasyNVR live for many years in the Internet security industry experience in actual combat, by all sectors of the market testing has become a convenient and secure wide coverage of a mature product, a combination of hardware products and services in all walks of life video infrastructure, while providing secondary development interface to facilitate integration into their enterprise business systems, designed to build their own internet video monitoring platform.

Phone housekeeping

Air monitoring

Scenic monitoring