内部検索機能を実現:建設のEasyNVR RTSPターンRTMP-HLS-FLVストリーミングサーバのフロントエンドを

クリエイティブコモンズライセンス クリエイティブ・コモンズ

EasyNVRライブウェブカメラプログラム

EasyNVRてきたが、従来の高精細ネットワークカメラIPカメラ内部で業界を監視し、簡単なチャネル構成を通じてフル、独立して、制御可能な知的財産権ですが、また、インターネットのストリーミングメディアサーバーのセキュリティソフトウェアとハードウェアの統合の機能を持つことができ、ネットワークカメラなどNVR RTSP、EasyNVRにONVIFプロトコルの出力デバイスへのアクセスと、EasyNVRこれらのオーディオおよびビデオデータは、ビデオソースすることができことは、RTMP / HLSに変換され、完全なインターネット端末H5は、(ウェブ、Android、iOS版)のプル生きていますおよびサードパーティのCDNネットワークへのデータのライブビデオソースを放送することができEasyNVR、インターネット規模の分散します。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>
    
  • onkeyupのイベントに結合するsearchChannel方法。

検索方法をトリガーするイベントをトリガすることにより、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(expr|obj|ele|fn)
exprString  字符串值,包含供匹配当前元素集合的选择器表达式。
jQuery objectobject  现有的jQuery对象,以匹配当前的元素。
element Expression  一个用于匹配元素的DOM元素。 
function(index) Function  一个函数用来作为测试元素的集合。它接受一个参数index,这是元素在jQuery集合的索引。在函数, this指的是当前的DOM元素。

アレイは、ページングを表示する検索要素から濾過または特定のビジネス要件に応じて、その後、元の構造のフィルタアレイによってフィルタ処理後の変更検索条件入力ボックスに一致する要素をフィルタリングするためにフィルタを使用せず対応する処理のために。

EasyNVR展開アーキテクチャ

EasyNVRプログラム

ネットワーク内の単一のポイント

EasyNVRオプションII

公共のシングルポイント

EasyNVRオプションII

マルチ公衆ネットワーク

EasyNVRオプションIV

RTMPストリーミング

EasyNVRシナリオ

EasyNVRは二提供しながら、便利になって、成熟した製品の広い範囲、ライフビデオインフラストラクチャのあらゆる階層でのハードウェア製品とサービスの組み合わせを確保している市場化テストのすべての部門で、実際の戦闘でのインターネットセキュリティ業界での経験の多くの年のために生きます開発インターフェイスは、独自のインターネットビデオ監視プラットフォームを構築するために設計された、企業のビジネスシステムへの統合を容易にします。
EasyNVR安定性と信頼性
EasyNVR電話のハウスキーピング

電話でのハウスキーピング

大気モニタリングEasyNVR

大気モニタリング

EasyNVR風光明媚なモニター

風光明媚なモニタリング

おすすめ

転載: blog.csdn.net/EasyNVR/article/details/91823286