海康大华等摄像头RTSP低延迟(小于300毫秒)网页播放解决方案！

客官°小女子只卖身不卖艺 2024-03-24 19:17 105阅读 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)，且无法利用本机硬件加速实现解码和渲染播放。优点是可兼容移动端网页播放。

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)。由于存在诸多兼容性问题，此方案实际应用的案例较少。

6.liveweb方案

liveweb是一款超低延时(150-200毫秒)、秒启动、无插件web实时视频播放器，h5视频播放器，支持egde、firefox、Chrome、safari等常见浏览器。支持h264、h265、AAC、G711等常见音视频格式。

支持协议：RTSP、RTMP、HLS、HTTP-FLV、WebSocket-FLV、GB28181、HTTP-TS、WebSocket-TS、HTTP-fMP4、WebSocket-fMP4、MP4、WebRTC。

支持RTSP/Onvif/GB/T28181/EHome/海康SDK/大华SDK等设备或者平台接入

服务器包含设备接入、音视频直播、流媒体分发服务器、录像存储和回放服务等功能。

提供GB28181信令转接和平台级联

支持HTTPS 加密等；

对外提供HTTP API二次开发接口；