EasyNVR无插件IPC摄像机直播方案前端构建之：如何区分PC端和移动端

最新推荐文章于 2023-10-03 20:54:58 发布

weixin_30559481

最新推荐文章于 2023-10-03 20:54:58 发布

阅读量120

点赞数

文章标签：前端移动开发 ViewUI

原文链接：http://www.cnblogs.com/babosa/p/9217777.html

版权

EasyNVR前端为了更好的用户体验，不仅仅设有PC客户端，还适应移动客户端；

EasyNVR的客户端中PC端和移动端差异有很多。例如：
由于PC端、移动端自身硬件的差异，所需要展示的样式也会存在一定的差别；在摄像机接入类型是ONVIF时，EasyNVR视频实时播放界面中PC端会提供云台控制界面；而为了用户有一个更好的观感和体验，在移动端会隐藏该界面。

EasyNVR onvif 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能够通过简单的网络摄像机通道配置，将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR，EasyNVR能够将这些视频源的音视频数据进行拉取，转换为RTMP/HLS，进行全平台终端H5直播（Web、Android、iOS），并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络，实现互联网级别的直播分发；

详细说明：http://www.easydarwin.org/easynvr/