150-200毫秒超低延迟RTSP H5播放 web播放解决方案

╰半橙微兮° 2023-10-13 20:58 8阅读 0赞

在浏览器中实现播放RTSP实时视频流，大体上有如下几个方案：

1.浏览器插件方案

此方案主要适用于在IE及Chrome 45以下版本的浏览器，在2015年前是绝对主流的选择。使用ActiveX播放控件或NPAPI播放插件实际调用的是本地原生程序进行直接播放，从而可充分利用本机硬件解码和硬件加速渲染播放，可实现低延迟、低成本多路稳定播放的良好效果。一般使用VLC这个最流行的开源跨平台多媒体播放器，IE及Chrome、Firefox低版本浏览器分别有对应的播放插件实现，VLC对移动端支持也非常好。此方案非常灵活，可以方便的对接各品牌的视频流，也可以很容易实现截图和录像功能。缺点是需要额外安装VLC客户端软件，对个别明确要求不能用插件的场景不适用。摄像头厂家一般也会提供适配的播放插件，比如海康威视提供的播放控件Web版，是和自己的DSS系统捆绑使用的，但不支持在Firefox高版本中运行。

2.先转码再转流方案此方案需要架设一个或多个视频流转码服务器，先在服务器上对RTSP流用ffmpeg进行转码串流成RTMP，然后前端使用VideoJS再调用Adobe Flash Player进行播放，然而2021年开始基于Chromium内核的所有浏览器彻底取消了对Flash Player的支持，VideoJS因此失效。不过幸好还有开源的替代播放方案flv.js(https://github.com/bilibili/flv.js)工作原理是要求在服务端先把RTSP视频流转换为flv后用Web Socket或WebRTC推送到前端，前端收到后再转换为Video所支持的MP4后播放，这就导致RTSP视频流，需要经过2次转码才播放，画面延迟时间大幅增加，保守估计延迟至少是2-3秒级别了。况且如果有多路视频流时，服务器端转码和转流对CPU、内存、网络带宽的压力大幅度增加，长期使用综合成本很高，对高分辨率的视频流播放经常出现花屏、卡顿现象。此方案要求浏览器支持流媒体扩展特性(MSE)，且无法利用本机硬件加速实现解码和渲染播放。优点是可兼容移动端网页播放。

![b55dcd4a74252063381a8ea706e93303.jpeg][]

3.先转流再转码方案

此方案的典型代表是Streamedian公司的免插件播放器Html5 RTSP Player，项目地址https://github.com/Streamedian/html5\_rtsp\_player。此方案需要架设一个Web Socket的视频流转发服务器，前端连接到此服务器后，服务端不断把RTSP视频流通过Web Socket不断转发给前端的JS处理库，JS处理库再把视频流转换为Video所支持的MP4后播放。

此方案不支持IE浏览器，最大的问题是画面延迟达数秒，首屏内容显示慢，也无法利用本机硬件加速实现解码和渲染播放，CPU占用高，播放时花屏、卡顿现象，体验比较差。另外无法实现本地自动截图、录像等操作。此方案同样要求浏览器支持流媒体扩展特性(MSE)，对延迟不敏感的单源播放尚可，多路播放就只能洗洗睡了，另外根据一些用户的反馈，对各品牌摄像头的兼容性也不太友好，作为商业用途使用是不可行的。

4.扩展程序方案

此方案典型代表是基于Chrome浏览器的PPAPI插件技术实现的开源播放器VXG RTSP Player，项目地址是https://github.com/VideoExpertsGroup/Chrome.RTSP.Player。此方案很显然不适用于IE和Firefox等浏览器，也不适用于低于45版的Chrome 浏览器。VXG RTSP Player是Chrome浏览器的扩展程序，对国内客户来说，由于谷歌服务器在墙外，想要大规模自主可控部署是不现实的。另外最关键的是谷歌已官方宣布，2021年6月终止对NaCl，PNaCl和PPAPI API的支持，因而此方案也无继续探讨的必要。

5.双内核方案

此方案典型实现是采用Chrome浏览器上的扩展程序IETab来实现，官方网站是https://www.ietab.net，通过在Chrome标签页界面覆盖加载显示一个IE内核渲染的网页，此网页再调用比如VLC的ActiveX控件实现。此方案和方案4一样，存在大规模自主可控部署难问题。另外和上面的浏览器插件方案类似，需要在播放终端电脑中下载运行IEHelpTab.exe程序，对一些高安全要求无插件播放的场景来说不适用。最大的问题是在Chrome网页中对播放控件的控制很难实现，只有网页和播放控件都是在IE内核环境下才可以，而IE对当前一些新技术和前端主流框架的兼容已经不行了，况且IE对运行和下载安装ActiveX控件经常弹出警告，用户体验很差，维护升级也很麻烦。

6.Wasm方案

此方案采用的是Chrome等高版本浏览器所支持的一种方便把更复杂的原生应用直接搬进 Web 的标准技术，然而对浏览器的兼容存在很大问题，IE肯定是不支持的，低版本的Chrome及Firefox等浏览器也不支持Wasm，具体兼容性可看这里https://caniuse.com/wasm。实现的基本思路就是把RTSP视频流通过ffmpeg的Wasm版软解码成Video所支持的MP4后播放，由于Wasm不支持硬件解码，对多路同时播放来说，终端电脑的CPU和内存占用会比较高，性能也堪忧。此方案有时应用在需要支持H265编码的场景，同样要求浏览器支持流媒体扩展特性(MSE)。由于存在诸多兼容性问题，此方案实际应用的案例较少。

二、升级方案

通过上述总结的现有技术方案可以看出，想要在浏览器中实现低延迟、低成本的多路RTSP同时稳定播放，只有不转码并充分利用终端电脑的硬件加速特性这两条才行，这样就只能采用类插件的外接方案。核心就在于如何在各浏览器中实现一个统一的不依赖浏览器自身扩展技术的外接系统，同时必须对各品牌及各版本的浏览器有比较好的兼容能力才具有较大的实用价值。所以改进方案思路就是要在浏览器网页中的指定位置和大小，实现一个内嵌到网页中显示的播放窗口，前端还必须可对这个内嵌播放窗口进行控制，而且播放窗口必须跟随浏览器窗口的移动和缩放、网页滚动、标签页切换、关闭等操作进行自动联动。这就要求播放窗口必须是本地原生程序实现，最好用高性能的C++语言来开发，还可充分利用终端电脑的硬件加速特性。这个播放窗口同时提供Web Socket的服务端和JSON打包命令的解析执行模块，前端就可以通过Web Socket连接后发送JSON打包的控制命令实现控制播放窗口。

目前市场上已经有采用此思路实现的相关软件和实施案例，比如深圳好游科技开发的liveweb提供了一个统一的不依赖浏览器本身扩展技术的外接系统，能实现当前主流浏览器的全兼容，包括低版本的Chrome和IE浏览器；而且小程序的下载和安装提供了类似ActiveX控件的机制，去掉了一些影响用户体验的告警并附加了调用方安全验证机制。而这个播放窗口程序也提供了比较好的范例实现，难能可贵的是在这个播放窗口还直接实现了多路RTSP的同时播放支持，可点选切换播放窗口焦点和全屏播放。此方案已经成功在机场、地铁站、交管局等客户现场完成实施并取得了良好的效果，获得了客户的一致好评，毕竟能实现低延迟、低成本的多路同时播放是硬道理。

某视频监控大厂最近也发布了类似的版本，不过经过测试发现，不支持Firefox高版本浏览器不说，其播放窗口程序框架采用臃肿的QT来实现的，看上去播放窗口只是模拟显示的效果而不是真正内嵌到浏览器中的，导致和浏览器的联动效果比较差，程序包也很大，且未提供前端自动升级和安全调用机制。另外想用此播放组件还必须购买其DSS系统，而这套DSS系统的售价不菲，对客户来说性价比很低。

对于个别客户提出的免插件播放要求，主要是担心安全问题。其实所谓的免插件实现方案中，也是需要浏览器从服务器端下载JS版播放器的，而外接版只不过下载的是本地版播放器，只需要保证下载到本地的播放器程序是安全的即可，必要的话可通过开放播放器源代码来打消客户对安全的顾虑。还有原因就是需要额外下载外接程序导致部署和升级麻烦，但为了超低延迟的稳定播放效果，这个就是必要的代价了.

四、总结

一个好的技术实施方案，首先是要满足客户的刚性需求，其次是尽量降低采购、开发、实施及维护的总成本，再次是是良好的兼容性和稳定性，最后需尽量确保技术方案不能因为浏览器的升级而失效,Liveweb是好游科技自主开发的网页播放器，支持 RTSP、RTMP、HTTP、HLS、UDP、RTP、File 等多种流媒体协议播放，同时也有多种显示方式 (GDI,D3D) 及格式 (RGB24,YV12,YUY2,RGB565)，经过 7x24 小时连续拷机测试，能够很好的处理断连.

iveweb是可支持H.264/H.265视频播放的流媒体播放器，性能稳定、播放流畅，可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具备较高的可用性。liveweb还拥有Windows、Android、iOS版本，其灵活的视频能力，极大满足了用户的多样化场景需求。

liveweb具备较强的灵活性，在视频直播过程中liveweb可通过H5进行视频解码，只要客户端支持H5，就能完美进行视频的无插件直播，同时还支持大码率视频直播，并可支持H.264、H.265两种编码格式。如果大家正在找寻一款供能强大的流媒体播放器，那么liveweb将会是一个不错的选择，我们也欢迎大家的了解和试用

[b55dcd4a74252063381a8ea706e93303.jpeg]: https://img-blog.csdnimg.cn/img_convert/b55dcd4a74252063381a8ea706e93303.jpeg