背景分析

随着互联网基础设施建设的不断完善和发展,带宽的不断提速,尤其是光纤入户,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看、可控的诉求越来越多,尤其是移动应用技术和前端技术的普及和发展,PC、手机、微信各种终端的支持需求在各行各业越来越受到青睐和重视,强制性地要求用户只能使用IE系列浏览器、强制用户只能到设备内网才能看到监控的限制,已经越来越不符合商业规律,而在传统监控行业里面,互联网思维、架构和技术完全可以成功引入,尤其是在移动互联网、物联网方面的技术,完全能够满足新形势下的各种行业的全终端监控的需要。

也就是说,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系统,实现把传统的本地监控提升到随时随地的远程监控,把传统的纯粹的监控上升到管理,使视频监控成为学校教学管理的有力工具。更重要的是让家长一起参与,提升教学的主动性,提升学校声誉和学校品牌。

平安校园

  • 将工地的摄像头通过平台对施工方、监理方和监管部门开放,方便实时了解工程进度,工地人员安全以及财产情况,自成力能平台,专为工地构建的视频监控平台。

平安工地

  • 随着互联网和移动互联网被广大消费者接受,“社会共治”将是是明厨亮灶目前的核心理念。采用社会共治方式,将各餐饮企业的后厨视频通过EasyNVR系统让老百姓通过手机可实时看到后厨的情况,既起到全社会监督的效果也是对餐饮企业的宣传。

明厨亮灶

  • 企业直播是以将企业内的环境、产品制作流程和产品等以直播的方式呈现出来,让客户看到企业的环境和透明化的生产,通过直播可以清清楚楚地看到所购买的产品生产过程。

企业直播

关于EasyNVR

EasyNVR是一款拥有完整、自主、可控知识产权,同时又能够具备软硬一体功能的安防互联网化流媒体服务器,能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP、Onvif协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发。详情可访问EasyNVR官网:http://www.easynvr.com

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

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

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

  2. EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap-datepicker日历插件的实时动态展现

    EasyNVR场景需求 基础:不管是城市监控还是园区管理或者是幼儿园监控,这些安防监控需求已经成为我们生活中不可或缺的重要一环,这不仅仅是提升城市管理水平和人民群众安全感的现实需求,也是完善社会治安消 ...

  3. EasyNVR摄像机网页无插件直播方案H5前端构建之:接口调用获取实时信息

    背景分析 熟悉EasyNVR产品的小伙伴应该知道,EasyNVR主要针对的是安防类的项目,通过RTSP/onvif协议将前端高清网络摄像机IPC.NVR等接入进来,然后将设备端的音视频通过采集.转换, ...

  4. EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap弹窗功能的实现方案与代码

    前言介绍 在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加 ...

  5. EasyNVR摄像机网页无插件直播方案H5前端构建之:通道内部搜索功能的实现方案与代码

    EasyNVR网页摄像机直播方案 EasyNVR是一款拥有完整.自主.可控知识产权,同时又能够具备软硬一体功能的安防互联网化流媒体服务器,能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络 ...

  6. EasyNVR摄像机网页无插件直播方案H5前端构建之:关于接口调用常见的一些问题(401 Unauthorized)

    背景分析 最近在使用EasyNVR的过程中,很多小伙伴咨询关于接口调用的问题,初步判断应该是遇到权限问题(401 Unauthorized).EasyNVR为第三方系统和应用提供了标准的API接口,方 ...

  7. EasyNVR摄像机网页无插件直播方案H5前端构建之:使用BootstrapPagination以分页形式展示数据信息

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

  8. EasyNVR摄像机网页无插件直播方案H5前端构建之:如何播放HLS(m3u8)直播流

    背景描述 HLS (HTTP Live Streaming)是Apple的动态码率自适应技术,主要用于PC和Apple终端的音视频服务,包括一个m3u(8)的索引文件,TS媒体分片文件和key加密串文 ...

  9. 基于EasyNVR摄像机网页无插件直播服务二次开发实现H5播放页面的简单集成方案

    我们通常在构架一套视频SaaS应用的过程中,将平台设计为3层:视频硬件层(视频源).视频能力平台(vPaaS).视频应用平台(vSaaS),视频硬件包括各种IPC.NVR.编码器等视频生成设备,vPa ...

随机推荐

  1. P1486 [NOI2004]郁闷的出纳员[权值线段树]

    权值线段树. 我们只用维护一个人是否存在,以及他当前排名,而不关心工资的具体值,这个可以直接算. 不难发现,如果不考虑新的员工,所有员工的工资的差值是不变的. 而加进来一个新的员工时,其工资为\(x\ ...

  2. “为了交项目干杯”对“那周余嘉熊掌将得队”、“男上加男,强人所男”的Beta产品测试报告

    "为了交项目干杯"对"那周余嘉熊掌将得队"."男上加男,强人所男"的Beta产品测试报告 格式描述 课程名称:软件工程1916|W(福州大学 ...

  3. 使用tensorflow时,关于GPU的设置

    查看显卡使用情况: nvidia-smi 设置tensorflow按需分配资源: import os os.environ["CUDA_DEVICE_ORDER"] = " ...

  4. solr根据id删除索引

    删除solr索引数据,使用XML有两种写法: 1) <delete><id>1</id></delete> <commit/> 2) < ...

  5. 使用NSProxy和NSObject设计代理类的差异

    经常发现在一些需要使用消息转发而创建代理类时, 不同的程序员都有着不同的使用方法, 有些采用继承于NSObject, 而有一些采用继承自NSProxy. 二者都是Foundation框架中的基类, 并 ...

  6. swift的柯里化demo

    func baseFunc(go:String, goo:String) -> String { return "hello" + go + goo; } func Curr ...

  7. extern与头文件(*.h)的区别和联系

    原文网址为:http://lpy999.blog.163.com/blog/static/117372061201182051413310/ 个人认为有一些道理:所以转过来学习了. 用#include ...

  8. tomcat和apache的区别--http server vs application server

    1. Apache是web服务器,Tomcat是应用(java)服务器,它只是一个servlet容器,是Apache的扩展. 2. Apache和Tomcat都可以做为独立的web服务器来运行,但是A ...

  9. Ferguson游戏&&Ua12293——打表找规律

    题意 有两个盒子分别有m颗糖果和n颗糖果,每次移动是将一个盒子清空而把另一个盒子里得一些糖果拿到被清空的盒子,使得两个盒子至少各有一个.无法移动者输. 分析 设初始状态为(m, n),显然(1, 1) ...

  10. SparkStreaming消费kafka中数据的方式

    有两种:Direct直连方式.Receiver方式 1.Receiver方式: 使用kafka高层次的consumer API来实现,receiver从kafka中获取的数据都保存在spark exc ...