EasyNVR无插件IPC摄像机直播方案前端构建之:如何区分PC端和移动端
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/
获取更多信息
Copyright © EasyDarwin.org 2012-2017
分类:
EasyNVR
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 提示词工程——AI应用必不可少的技术
2016-08-31 EasyPusher直播推送中用到的缓冲区设计和丢帧原理
2016-08-31 EasyPusher直播推送中用到的缓冲区设计和丢帧原理