欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Onvif/RTSP网络安防摄像机网页无插件直播方案EasyNVR如何判断前端设备的类型?

程序员文章站 2022-07-05 21:48:44
...

进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选择。

Onvif/RTSP网络安防摄像机网页无插件直播方案EasyNVR如何判断前端设备的类型?

 

EasyNVR核心在于摄像机的音视频流的获取、转换、转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器、Android、iOS、微信)进行录像文件的检索、回放和下载。

Onvif/RTSP网络安防摄像机网页无插件直播方案EasyNVR如何判断前端设备的类型?

 

EasyNVR客户端的PC端和移动端差异

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

Onvif/RTSP网络安防摄像机网页无插件直播方案EasyNVR如何判断前端设备的类型?

 

在初始加载时如何判断前端设备的类型

  • 在全局中定义一个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来判断区分。