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. 关于webpack的cdn配置

    在webpack中活用cdn可以大幅度减少打包文件的体积,配置方法也非常简单. 首先现在入口html文件(index.html)里引入相应cdn连接,然后配置webpack: module.expor ...

  2. 4C 2018 福到了

    输入字符c(只含有@和空格).数字n.规模n*n的二维字符矩阵. 若倒过来的数组和原数组一样形式输出提示. 最后输出以字符c替换的字符数组. #include <bits/stdc++.h> ...

  3. ansible 2.7.1 常见错误总结

    1.RequestsDependencyWarning (refer to http://blog.51cto.com/mjunetwslinux/2177727?source=dra) python ...

  4. 洛谷——P1690 贪婪的Copy

    P1690 贪婪的Copy 题目描述 Copy从卢牛那里听说在一片叫yz的神的领域埋藏着不少宝藏,于是Copy来到了这个被划分为个区域的神地.卢牛告诉了Copy这里共有个宝藏,分别放在第Pi个(1&l ...

  5. 2.搭建配置最简单的spring mvc 工程-基础版

    目标:用最少的东西,搭建可以运行的最最基础的springMvc登陆校验项目! spring 4 1.首先配置pom.xml引入spring 相关jar, 引用都有注释, 无关的可以暂时不引用. < ...

  6. Eclipse4.4以上版本不能使用easyExplorer,采用OpenExplorer

    如果想在Ecipse里打开目录,一直用easyExplorer,可是现在版本升级了easyExplorer不好使,可以用OpenExplorer到https://github.com/samsonw/ ...

  7. 【spring cloud】对接口调用者提供API使用的安全验证微服务【这里仅通过代码展示一种设计思想】【后续可以加入redis限流的功能,某段时间某个IP可以访问API几次】

    场景: 公司的微服务集群,有些API 会对外提供接口,供其他厂商进行调用.这些公开的API接口,由一个OpenAPI微服务统一提供给大家. 那么所有的调用者在调用公开API接口的时候,需要验证是否有权 ...

  8. 转: RPC框架 远程对象服务引擎Hprose

    http://www.cnblogs.com/chenxizhang/archive/2010/07/18/1780258.html

  9. 奇怪!post提交 地址栏参数竟然可见

    转:    http://blog.csdn.net/yuebinghaoyuan/article/details/7727802 在做项目中,form标签中method="post&quo ...

  10. RPi Cam v2 之一:基础及牛刀小试

    前言 原创文章,转载引用务必注明链接,水平有限,如有疏漏,欢迎指正. 本文使用markdown写成,为获得更好的阅读体验,可以访问我的博客. 1.unboxing & comparison 包 ...