海康威视、浙江大华RTSP在Chrome、Firefox等浏览器低延迟(300ms)播放解决方案

简介: 在遍地都是摄像头的今天,往往需要在各种B/S信息化系统中集成视频播放功能,海康、大华、华为等大厂摄像头遵循监控行业标准,一般只支持RTSP传输协议,而Chrome、Firefox、Edge等现代浏览器的主流版本并不支持RTSP流的直接原生播放!

一、历史背景


在遍地都是摄像头的今天,往往需要在各种B/S信息化系统中集成视频播放功能,海康、大华、华为等大厂摄像头遵循监控行业标准,一般只支持RTSP传输协议,而Chrome、Firefox、Edge等现代浏览器的主流版本并不支持RTSP流的直接原生播放!


二、现有方案


在未来也没有计划支持的情况下,想要在网页中实现播放RTSP流,目前常用可选方案有以下3种:


1、先在服务器端把RTSP流转码到浏览器可直接播放的视频流后再提供给终端浏览器播放,这也是号称无插件播放的方法,虽然这种方案对操作系统和浏览器兼容性好,但延迟往往很高,时常达到数秒之久,尤其是首屏画面显示很慢,体验糟糕。实际使用时,由于需要在服务器端搭建一个始终高负荷运转的视频转码转流服务,CPU和内存消耗大,带宽占用大,长期使用成本很高,如果摄像头路数比较多或在线播放视频的终端比较多,服务器的压力就会很大。终端想要看到多路、高分辨率或H.265视频时,此方案实际使用过程中常出现播放卡顿、花屏,缺陷就越发明显。尤其是在在一些非常关键的应用场合,如果不能通过监控视频早一点发现险情并及时排除,可能就无法规避不可承受的风险,失去了上视频监控的重要意义。


2、与第1种方案不同,此方案把服务器端转码过程转移到前端来进行,压力也就转移到了终端电脑之上。因为在现代高版本浏览器中,都已经支持WASM技术(IE除外),所以纷纷采用此技术在前端实现将RTSP流转码后播放。由于终端电脑的硬件参差不齐,在一些中低配电脑上,就很难获得比较好的播放效果。最主要的问题还是受限于WASM的缺陷,只能软解码,无法利用终端电脑的硬件加速能力,而且不支持多线程,这就导致播放多路RTSP流时就非常吃力了,在面对高分辨率和H.265的视频流时,同样效果不好,而且大量占用终端电脑的CPU和内存,无法再做其它事情,所以基本无法满足甲方客户的硬性要求。


3、沿用原有插件技术方案,在2015年前Chrome等浏览器还可以用NPAPI插件技术的时候,前2种方案遇到的问题都不是问题,通过本地原生播放器控件直接播放,服务器也没多少压力,终端也可以充分利用本机硬件加速能力,多路播放时利用多线程技术,可以实现比较好的播放效果。缺点就是需要安装插件,操作系统的兼容性上差一些。此方案如果能解决高版本的Chrome等浏览器兼容使用,无疑这是当下能够实现低延迟多路稳定播放的最佳技术方案,满足甲方客户硬性播放指标也无压力。


二、最终方案


猿大师中间件VLC网页播放小程序应需而生,基于跨浏览器的原生小程序系统-猿大师中间件(http://www.yuanmaster.com)开发,通过借助猿大师中间件提供的内嵌网页播放的独家专利技术,在Chrome等现代浏览器高版本中完全模拟实现了ActiveX控件和NPAPI插件的播放效果,底层调用VLC(是一款自由、开源的跨平台多媒体播放器及框架,可播放大多数多媒体文件,以及 DVD、音频 CD、VCD 及各类流媒体协议)桌面客户端的ActiveX控件实现在网页中低延迟直接播放海康、大华、华为等摄像头的标准RTSP流,由于实际调用的是VLC本地原生播放控件,因此可充分利用本机硬件加速能力实现高效硬解码播放多路或高清视频(H.265),最多可支持25路同时播放,最低可用在Chrome 41、Firefox 50、Edge 80(Chromium内核)、360极速/安全、IE、Oprea 36、QQ等浏览器,也兼容运行于这些浏览器的最新版本。


猿大师中间件试用版免费体验网址:http://www.yuanmaster.com/xiazai/

猿大师中间件视频演示网址:https://www.bilibili.com/video/BV1u64y1h75J/


采用猿大师中间件VLC网页播放小程序具有如下优点:


1、在支持主流版本浏览器的前提下,是当前市场中可实现低延迟(300毫秒)的独家播放方案;


2、支持多路同时播放、动态切换播放源、支持回放和抓图,尤其是高分辨率视频或大屏播放体验好;


3、底层播放技术采用VLC的开放源代码方案,播放器后续服务有保障,播放格式兼容好,同时支持H.264和H.265无压力;


4、VLC网页播放小程序额外付费后可获得其源代码进行定制开发,自主可控;


5、支持海康、大华、华为等各厂家的摄像头,只要能提供标准的RTSP流,都可以播放;


6、移动端可直接采用VLC开放源代码的APP来使用,无需单独开发,投入少见效快;


7、此技术方案可实现在原有技术体系下的平滑升级,降低了方案大改造带来的技术路线和延期交付风险,可节省大量研发成本。


终端电脑采用VLC网页播放方案时需要部署猿大师中间件,搭配VLC网页播放小程序,还需安装VLC桌面客户端,为简化部署过程,可将VLC绿色版程序包解压后放入中间件的VLC小程序目录后,再将这些程序文件统一做一MSI或EXE安装包放到B/S服务器上提示用户下载安装或实施工程师统一部署。一般来说,需要看视频监控的地方基本上集中于监控室,电脑数量有限,部署时安装一些软件来并不是件难事。之后借助猿大师中间件的在线升级机制,可彻底解决传统客户端软件升级维护的难题,一箭双雕。


一个好的技术实施方案,首先是要满足客户的刚性需求,其次是尽量降低采购、开发、实施及维护的总成本,再次是需要有良好的兼容性和稳定性,最后需尽量确保技术方案不能因为浏览器的升级而失效,能够实现公司自主可控的要求就更好了。VLC网页播放小程序提供了这样一个稳定可靠、兼容性好、低延迟又可同时稳定播放多路RTSP的低成本半开源技术方案,无疑是当前安防行业在网页端播放RTSP流的最佳选择。

目录
相关文章
|
2月前
|
Web App开发 数据采集 存储
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
本文探讨了如何利用Chrome DevTools Protocol (CDP) 与 Selenium WebDriver 提升浏览器自动化效率,结合代理IP技术高效采集微博数据。通过CDP,开发者可直接操作浏览器底层功能,如网络拦截、性能分析等,增强控制精度。示例代码展示了如何设置代理IP、cookie及user-agent来模拟真实用户行为,提高数据抓取成功率与稳定性。适用于需要频繁抓取互联网数据的应用场景。
443 3
WebDriver与Chrome DevTools Protocol:如何在浏览器自动化中提升效率
|
10天前
|
Web App开发 缓存 安全
WIN11 Chrome 双击打不开闪退及Chrome浏览器不能拖拽文件crx
【11月更文挑战第6天】本文介绍了 WIN11 系统中 Chrome 浏览器双击打不开闪退及不能拖拽文件 crx 的原因和解决方法。包括浏览器版本过旧、扩展程序冲突、硬件加速问题、缓存过多、安全软件冲突、系统文件损坏、用户配置文件损坏等问题的解决方案,以及 crx 文件的屏蔽、权限问题和文件格式问题的处理方法。
|
11天前
|
Web App开发 Linux iOS开发
Chrome浏览器如何导出所有书签并导入书签
【11月更文挑战第4天】本文介绍了如何在 Chrome 浏览器中导出和导入书签。导出时,打开书签管理器,点击“整理”按钮选择“导出书签”,保存为 HTML 文件。导入时,同样打开书签管理器,点击“整理”按钮选择“导入书签”,选择之前导出的 HTML 文件即可。其他主流浏览器也支持导入这种格式的书签文件。
|
18天前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
127 9
|
1月前
|
Web App开发 开发者
|
1月前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】
|
2月前
|
Web App开发 存储 前端开发
Chrome浏览器的跨域问题
Chrome浏览器的跨域问题
|
3月前
|
Web App开发 JSON 安全
【跨域难题终结者】:一键解锁Chrome浏览器神秘设置,彻底告别开发阶段的跨域烦恼!
【8月更文挑战第20天】跨域是前端开发常遇难题,尤其在前后端分离项目中。浏览器因安全考量会阻止不同源间的请求。本文对比CORS、JSONP、代理服务器等解法,并介绍开发阶段通过调整Chrome设置来临时禁用跨域限制的方法,提供启动Chrome及使用`fetch`API示例,适合快速测试。但请注意这不适用于生产环境,存在一定安全风险。
807 1
|
3月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
305 8
|
3月前
|
Android开发 iOS开发 C#
Xamarin.Forms:从零开始的快速入门指南——打造你的首个跨平台移动应用,轻松学会用C#和XAML构建iOS与Android通用界面的每一个步骤
【8月更文挑战第31天】Xamarin.Forms 是一个强大的框架,让开发者通过单一共享代码库构建跨平台移动应用,支持 iOS、Android 和 Windows。使用 C# 和 XAML,它简化了多平台开发流程并保持一致的用户体验。本指南通过创建一个简单的 “HelloXamarin” 应用演示了 Xamarin.Forms 的基本功能和工作原理。
79 0