EasyNVR攝像機網頁無插件直播方案H5前端構建之：通道內部搜索功能的實現方案與代碼

EasyNVR網頁攝像機直播方案

EasyNVR是一款擁有完整、自主、可控知識產權，同時又可以具有軟硬一體功能的安防互聯網化流媒體服務器，可以經過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP、Onvif協議輸出的設備接入到EasyNVR，EasyNVR可以將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發。詳情可訪問EasyNVR官網：http://www.easynvr.com

背景分析

上一篇介紹了處理接口獲取的數據，本篇將介紹如何在接收到的數據中搜索出本身符合條件的數據；
爲了頁面的美觀，咱們每每會以分頁的形式來進行數據的展現。可是，當須要展現出來的數據太多的時候，咱們很難迅速的找出本身想要的數據。此時，就須要經過檢索功能來實現對想要的數據的查找；

頁面內的搜索通常多爲經過搜索框來檢索出本身想要的內容：

• 實現方法：

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>

• 將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部署架構

單點內網

單點公網

多點公網

RTMP推流

EasyNVR應用場景

EasyNVR在互聯網安防直播行業已有多年實戰經驗，經過各行業的市場檢驗已成爲一套便捷、安全、覆蓋範圍廣的成熟產品，結合硬件產品，服務於各行各業視頻基礎建設，同時提供二次開發接口便於企業集成到本身的業務系統中，打造專屬於本身的互聯網視頻監控平臺。

手機看家

航空監控

景區監控