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

時間 2019-11-10

標籤 easynvr 插件 ipc 攝像機直播方案前端構建如何區分移動欄目無線简体版

原文原文鏈接

EasyNVR前端爲了更好的用戶體驗，不單單設有PC客戶端，還適應移動客戶端；前端

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

在初始加載時是如何判斷出前端設備的類型的？
在全局中定義一個js方法；在須要區分客戶端類型的地方自動執行該方法；windows

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可以經過簡單的網絡攝像機通道配置，將傳統監控行業裏面的高清網絡攝像機IP Camera、NVR等具備RTSP協議輸出的設備接入到EasyNVR，EasyNVR可以將這些視頻源的音視頻數據進行拉取，轉換爲RTMP/HLS，進行全平臺終端H5直播（Web、Android、iOS），而且EasyNVR可以將視頻源的直播數據對接到第三方CDN網絡，實現互聯網級別的直播分發；markdown

詳細說明：http://www.easydarwin.org/easynvr/網絡