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

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

获取更多信息

邮件:support@easydarwin.org

WEB:www.EasyDarwin.org

Copyright © EasyDarwin.org 2012-2017

EasyNVR无插件IPC摄像机直播方案前端构建之:如何区分PC端和移动端的更多相关文章

  1. EasyNVR无插件IPC摄像机直播方案前端构建之:区分页面是自跳转还是分享依据

    区分分享还是跳转 对于前端一些页面的展示,通常有两种方式:通过入口链接一步步进入,或是通过分享链接直接进入:对于这两种方式的区别是什么?在进行前端书写时又应该如何处理? 以EasyNVR为例来进行说明 ...

  2. EasyNVS摄像机公网全终端无插件网页摄像机直播管理服务运行出现“请求服务不存在或已停止”

    背景分析 了解我们产品线的小伙伴都知道,EasyNVR产品主要用于互联网安防直播,通过EasyNVR拉取摄像机的RTSP视频流,客户端通过访问EasyNVR服务端就可以实现音视频流分发.在此情况下会出 ...

  3. EasyNVR网页H5无插件播放摄像机视频功能二次开发之直播通道接口保活示例代码

    背景需求 随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...

  4. EasyNVR无插件H5/HLS/m3u8直播解决方案中Windows系统服务启动错误问题的修复:EasyNVR_Service 服务因 函数不正确。 服务特定错误而停止。

    最近在做某地市移动公司景观直播的项目时,遇到一个问题,当我们部署EasyNVR为系统服务后,居然出现了无法启动服务的现象,表面上看,提示是系统服务启动失败,实际通过查看windows 系统日志: 查找 ...

  5. EasyNVR无插件直播流媒体服务器云端集中管控的EasyNVS云管理平台安装使用文档

    EasyNVS - EasyNVR云端集中管理服务 EasyNVS云管理平台是一套专门用于集中化管理EasyNVR 的解决方案. EasyNVR 采用主动注册的方式接入到 EasyNVS, 再由 Ea ...

  6. EasyNVR无插件直播服务器软件接口调用返回“Unauthorized”最简单的处理方式

    背景需求 对于EasyNVR的受众群体十分的广泛,不仅仅有将EasyNVR作为视频直播平台直接使用的,更多的是使用EasyNVR的对应功能集成到自身系统.对于前者,只需要将软件的使用功能搞清楚即可,对 ...

  7. 使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件

    1.背景需求 很多客户在使用EasyNVR无插件流媒体服务器时,不喜欢产品化的界面,有时可能满足不了日常观看使用的需求.因此软件提供丰富的HTTP接口,供第三方平台调用集成.但是有时客户这边可能没有专 ...

  8. EasyNVR摄像机网页无插件直播方案H5前端构建之:区分页面是自跳转页面还是分享页面

    背景分析 EasyNVR整套方案的架构中,涉及到前端设备(摄像机IPC.硬盘录像机NVR.编码器等).流媒体服务端(EasyNVR).客户端终端设备(PC.浏览器.Android.iOS.微信). 在 ...

  9. EasyNVR无插件播放HLS/RTMP网页直播方案前端完善:监听表单变动

    在上一篇博客中我们表述完了防止提交成功后多余操作提交的一个过程:其中的精髓在于ajax的触发事件的使用. 而这篇博客主要想说明一下如何实时的判断出表单是否发生变化. 问题表述: 在网页前端的开发过程中 ...

随机推荐

  1. Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 <TextView android:id="@+id/uppaid_time" an ...

  2. HDU 4343 Interval query(贪心 + 倍增)

    题目链接  2012多校5 Problem D 题意  给定$n$个区间,数字范围在$[0, 10^{9}]$之间,保证左端点严格大于右端点. 然后有$m$个询问,每个询问也为一个区间,数字范围在$[ ...

  3. [Python Cookbook] Numpy: Multiple Ways to Create an Array

    Convert from list Apply np.array() method to convert a list to a numpy array: import numpy as np myl ...

  4. Display LOV (List Of Values) Using Show_Lov In Oracle Forms

    Show_Lov Function is used to display list of values (LOV) in Oracle Forms. It returns TRUE if the us ...

  5. Taskaffinity属性使用小结

    TaskAffinity属性小结 最近在项目中用到了TaskAffinity属性,发现这个还是挺有意思,可以用来控制activity所属的任务栈.但同时只设置这一个属性又是不能完成功能的,需要与其它属 ...

  6. 【温故知新】——BABYLON.js学习之路·前辈经验(二)

    前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...

  7. jsp页面中,动态调用系统时间的实现

    在做WEB项目时,经常会须要 在页面中显示当前时间,以下介绍一个简单的调用系统时间的方法,效果如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvczI5 ...

  8. centos DHCP

    yum install dhcp cat /usr/share/doc/dhcp-4.2.5/dhcpd.conf.example > /etc/dhcp/dhcpd.conf vim /etc ...

  9. 一波三折ST-Link

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用Markdown写成,为获得更好的阅读体验和正常的链接.图片显示,请访问我的博客原文: http://www.cnblog ...

  10. es6 - 导入导出

    今天用node纠结了半天,明明是正确的语法,一直报错,原来node和chrome并不支持es6语法.... 1. npm install package.json { "name" ...