EasyNVR攝像機網頁無插件直播方案H5前端構建之：區分頁面是自跳轉頁面仍是分享頁面

背景分析

EasyNVR整套方案的架構中，涉及到前端設備（攝像機IPC、硬盤錄像機NVR、編碼器等）、流媒體服務端（EasyNVR）、客戶端終端設備（PC、瀏覽器、Android、iOS、微信）。
在保證EasyNVR和前端設備之間網絡相通的基礎條件下，EasyNVR經過獲取數字網絡攝像機視頻流完成音視頻的採集，而後由EasyNVR內部實現流媒體協議轉換、轉碼和流媒體分發工做，最終能夠分發出RTMP、HTTP-FLV和HLS流，EasyNVR自身也能夠對實時視頻流進行存儲和管理，同時EasyNVR自身也會提供一套可供各類平臺、開發語言進行二次開發的HTTP接口，這樣能夠更加方便地與客戶的業務系統相結合，達到更加豐富的管理功能。加上自身擁有簡潔、大方的前端界面，EasyNVR徹底能夠做爲一個獨立的視頻直播平臺部署使用。

區分分享和跳轉

對於前端頁面的展現，一般有兩種方式：經過入口連接一步步進入，或是經過分享連接直接進入；這兩種方式的區別是什麼？在進行前端書寫時又應該如何處理？

以EasyNVR爲例來進行如下分析說明：

EasyNVR經過視頻廣場界面能夠進入到對應的通道內進行視頻的觀看；

爲了給用戶更好的使用體驗，播放頁面還設有視頻分享功能，方便用戶經過移動設備隨時觀看視頻信息；

具體的跳轉播放和分享播放區別：

• 從視頻廣場直接跳轉過來：

在視頻廣場界面經過點擊事件來跳轉到播放路徑，進入對應的通道來進行視頻播放；在跳轉路徑前會對獲取到的信息進行處理；將獲取到的信息存入cookie;

$.cookie("videoUrl", videoUrl);
 $.cookie("DeviceType", DeviceType);
 $.cookie("videoImg", $img.attr("src"));
 $.cookie("channel", channel["Channel"]);
 $.cookie("channelName", channel["Name"]);
 top.location.href = "./play.html?channel=" + channel["Channel"];

• 經過連接分享頁面：

對於播放頁面就可經過cookie來判斷頁面是跳轉過來仍是分享過來的；

if (channel == $.cookie("channel")) {
    if ($.cookie("DeviceType") == 'ONVIF') {
         if(isPC()){
           $("#ipcam_div").show();
         }
    }
  player = setupPlayer($.cookie("videoUrl"), $.cookie("videoImg"));
  $(".channel-title").text($.cookie("channelName") || "通道直播");
  } else {         
    $.ajax({
    type: "GET",
    url: "/api/v1/getchannelstream",
    data: {
         Channel: channel,
         Protocol: isPC() ? "RTMP" : "HLS",
         Line: "local",
         From: "lan"

• 若是沒有cookie值則是分享頁面，會經過ajax從新去請求數據在頁面進行調用；

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