监控智能摄像头通过国标GB28181协议视频平台接入EasyGBS如何实现移动端的适配?
很多咨询者来问我们,TSINGSEE青犀视频团队开发的视频云智能分析平台是否有手机APP,其实除了EasyRTMP、EasyGBD等推流辅助工具外,视频智能分析平台都是没有APP的。由于我们的平台为网页无插件的直播平台,因此在手机上,我们也有适配页面,可直接由网页进入,无需下载APP。
比如国标GB28181协议视频平台EasyGBS的移动端适配界面如下:
当初我们做手机适配的开发时,也碰到了不少难题,其中第一个就是如何区分页面是不是在移动端打开。在web前端主要做PC端web页面,同时需要做移动端的适配,因此如何区分页面是不是在移动端打开是解决难题的关键。
下面跟大家分享一下我们是如何在移动端适配开发中解决这个问题的。
一般我们前端会采用两种方式,一种是检测页面宽度,另一种是返回值区分。
1、检测页面宽度方式:
我们可以通过以下代码了解到但小于560px就可以认定为移动端,然后渲染指定的样式就行了。
@media screen and (max-width: 560px) {
}
2、返回值区分方式:
通过以下代码可以获取返回值,再通过返回值来区分是否是移动端打开的的登录界面。
isMobile:function() {
return videojs.browser.IS_IOS || videojs.browser.IS_ANDROID;
},
此外,通过国标GB28181协议推流平台EasyGBD推送的视频流也可以直接在web页面或者手机移动端观看,在很多户外安防直播或者警卫执勤中,有很广泛的实用性。EasyGBD是TSINGSEE青犀视频新开发的国标推流平台,如果大家有兴趣,欢迎联系我们了解。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 提示词工程——AI应用必不可少的技术
· 字符编码:从基础到乱码解决
· 地球OL攻略 —— 某应届生求职总结