EasyNVR攝像機網頁無插件直播方案H5前端構建之：如何區分PC端和移動端

背景分析

隨着互聯網基礎設施建設的不斷完善和發展，帶寬的不斷提速，尤爲是光纖入戶，4G/5G/NB-IoT各類網絡技術的大規模商用，視頻隨時隨地可看、可控的訴求愈來愈多，尤爲是移動應用技術和前端技術的普及和發展，PC、手機、微信各類終端的支持需求在各行各業愈來愈受到青睞和重視，強制性地要求用戶只能使用IE系列瀏覽器、強制用戶只能到設備內網才能看到監控的限制，已經愈來愈不符合商業規律，而在傳統監控行業裏面，互聯網思惟、架構和技術徹底能夠成功引入，尤爲是在移動互聯網、物聯網方面的技術，徹底可以知足新形勢下的各類行業的全終端監控的須要。

也就是說，EasyNVR前端爲了給用戶更好的使用體驗，不單單設有PC客戶端，還適用移動客戶端；

EasyNVR流媒體服務器客戶端中PC端和移動端差別有哪些呢？

例如：
因爲PC端、移動端自身硬件的差別，所須要展現的樣式會存在必定的差異。攝像機接入類型是ONVIF時，EasyNVR視頻實時播放界面中，PC端會提供雲臺控制界面；而爲了用戶有更好的觀感和體驗，移動端則會隱藏此界面。

在初始加載時如何判斷出前端設備的類型呢？

• 在全局中定義一個js方法；在須要區分客戶端類型的地方自動執行該方法；

function isPC() {
         var ua = navigator.userAgent.toLowerCase();
         var agents = ["android", "iphone",
             "symbianos", "windows phone",
             "ipad", "ipod"
         ];
         var flag = true;
         for (var v in agents) {
             if (ua.indexOf(agents[v]) > 0) {
                 flag = false;
                 break;
             }
         }
         return flag;
     }

• EasyNVR播放頁面在加載時判斷爲PC端時，將雲臺控制界面展現出來；

  if(isPC()){
       $("#ipcam_div").show();
   }

• 若是須要細分到移動端的具體類型能夠根據isPC中agents數組中具體元素來進行區分；

• 區分pc端的瀏覽器類型能夠根據navigator.userAgent來進行判斷區分

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