Chrome低延迟播放RTSP方案—VLC网页播放浏览器小程序.pdf_游戏内的服务器浏览器最大延迟

需积分: 50 476 浏览量更新于2023-05-27 评论 1 收藏 623KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

VLC

网页播放浏览器小程序

—网页中低延迟播放 RTSP 不二之选

索引

一、概述

二、在线体验

三、个性化配置

四、开发集成

五、常见问题

一、概述

在遍地都是摄像头的今天，往往需要在各种 B/S 信息化系统中集成其视频流

播放功能，海康、大华、华为等大厂摄像头遵循监控行业标准，普遍支持的是

RTSP 传输协议，而 Chrome、Firefox、Edge 等现代浏览器主流版本并不支持 RTSP

流的直接原生播放，在未来也没有计划支持的情况下，对于绝大部分没有视频处

理经验的前端工程师来说，确实是一个非常头疼的问题。目前想要在网页中实现

播放 RTSP 流，常用可选方案有以下 3 种：

1、先在服务器端把 RTSP 流转码到浏览器可支持播放的视频流后再提供给终

端网页中播放，这也是号称无插件播放的方法，虽然这种方案对操作系统和浏览

器兼容性好，也有不少开源解决方案，但延迟往往很高，时常达到数秒之久，尤

其是首屏画面显示很慢，稳定性存疑，体验非常差。实际使用时，由于还需要在

服务器端搭建一个始终高负荷运转的视频转码转流服务，CPU 和内存消耗大，带

宽占用大，长期使用成本高，如果摄像头路数比较多或在线播放的终端比较多，

服务器的压力就会很大。此方案实际使用时常出现卡顿、花屏，终端电脑想要持

续稳定的看多路、高分辨率或 H.265 编码视频时，播放效果就更差强人意了。尤

其是在一些非常关键的应用场合，如果不能通过视频监控早一点发现险情并及时

排除，出现不可承受的安全事故，也就失去了上视频监控系统的重要意义。网上

有号称低延迟的无插件方案，最多也就只适用于单路、低分辨率的 H.264 编码视

频的预览，而视频监控使用场景往往是大屏幕，其基本无实用价值。

2、与第 1 种方案不同，此方案把服务器端转码过程转移到前端来进行，甲

方客户要求的播放性能压力也就转移到了终端电脑之上。因为在主流版本的现代

浏览器中，都已经支持 WASM(IE 除外)，所以技术上可采用此方案在前端实现将

RTSP 流转码后播放。由于终端电脑的硬件参差不齐，在一些中低配电脑上，就

很难获得比较好的播放效果。即使配置了性能不错的电脑，最主要的问题还是受

限于 WASM 的缺陷，只能软解码，无法利用终端电脑的硬件加速能力，而且不

支持多线程，这就导致播放多路 RTSP 流时就非常吃力了，在面对当前越来越多

的高分辨率和 H.265 编码的视频流时，同样效果不好，而且大量占用终端电脑的

CPU 和内存，几乎无法再做其它事情，所以基本无法满足甲方客户的硬性要求。

3、沿用原有插件技术方案，在 2015 年前 Chrome、Firefox 等浏览器支持 NPAPI

插件运行的时候，前 2 种方案的缺陷都不是问题，通过本地原生播放器控件直接

播放，服务器也没多少压力，终端也可以充分利用本机硬件加速能力，多路播放

时还可利用多线程技术，完全可实现良好的播放效果，成本也较低。缺点就是需

要安装插件，实施时对操作系统和浏览器的兼容性上差一些。此方案如果能解决

高版本 Chrome 等浏览器兼容使用，无疑这是当下能够实现低延迟多路稳定播放

的最佳技术方案，满足甲方客户硬性播放指标也无压力。

基于当前市场的迫切需要，VLC 网页播放小程序应运而生，基于跨浏览器的

原生小程序系统-PluginOK 中间件开发，通过借助 PluginOK 中间件提供的内嵌网

页运行的独家专利技术，在 Chrome 等现代浏览器高版本中完全模拟实现了

ActiveX 控件和 NPAPI 插件的播放效果，底层调用 VLC(是一款自由、开源的跨平

台多媒体播放器及框架，可播放大多数多媒体文件，以及 DVD、音频 CD、VCD

及各类流媒体协议)桌面客户端的 ActiveX 控件实现在网页中低延迟直接播放海康、

大华、华为等摄像头的标准 RTSP 流，由于实际调用的是 VLC 本地原生播放控件，

因此可充分利用本机硬件加速能力实现高效硬解码播放多路、高清和 H.265 编码

视频，最多可支持 25 路同时播放(具体能播多少路，取决于终端电脑的性能、网

络带宽情况和 RTSP 流输出能力)，最低可用在 Chrome 41、Firefox 50、Edge

80(Chromium 内核)、360 极速/安全、IE、Oprea 36、QQ 等浏览器，也兼容运行

于这些浏览器的最新版本。

总的来说，采用 VLC 网页播放小程序具有如下优点：

1、在支持所有主流版本浏览器的前提下，是当前市场中可实现低延迟(300 毫秒)

稳定播放的不二之选技术方案；

2、支持多路同时播放、动态切换播放源，首屏画面显示快、支持回放、抓图和

录像、支持添加水印和字幕、支持双击全屏播放，尤其是高分辨率和 H.265 编码

视频播放体验好；

3、底层播放采用的是 VLC 开放源代码方案，播放器后续服务有保障，对播放流

和视频格式的兼容能力无与伦比，同时支持 H.264 和 H.265 无压力；

4、VLC 网页播放小程序额外付费后可获得其源代码进行定制开发，实现源代码

自主可控；

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

以正常播放；

6、此方案简单高效，在原有技术路线下实现平滑升级兼容各种浏览器，降低了

方案大改造带来的技术路线和延期交付风险，可节省大量研发成本；

7、提供了丰富的前端开发接口，前端集成简单，支持 VUE 等主流框架，无需视

频专业知识，无需关心系统和浏览器是 32 位还是 64 位，一套代码即可打天下；

8、移动端可直接采用 VLC 开放源代码的 APP 程序来使用，苹果和安卓系统都有

对应版本，无需单独开发，投入少见效快。

终端电脑采用 VLC 网页小程序播放时需部署 PluginOK 中间件，并搭配 VLC

网页播放小程序包，还需安装 VLC 桌面客户端，因此为简化部署，可将 VLC 绿色

版程序包文件解压放入中间件绿色版的 VLC 小程序目录后，再将这些程序文件统

一做一 MSI 或 EXE 安装包放到 B/S 服务器上提示用户下载安装或实施工程师统一

部署。一般来说，需要看视频监控的地方基本上集中于监控室，电脑数量有限，

只需安装一个程序包即可完成部署，还是很简单的。之后借助 PluginOK 中间件

的在线升级机制，还可彻底解决传统客户端软件升级维护的难题，一箭双雕。

一个好的技术实施方案，首先是要满足甲方客户的刚性需求，其次是要尽量

降低采购、开发、实施及维护的总成本，再次是需要有良好的兼容性、稳定性和

易用性，最后还需尽可能做到技术方案不能因为浏览器的升级而失效，如还能实

现一些自主可控的要求那就更好了。VLC 网页播放小程序正好提供了这样一个稳

定可靠、兼容性好、易集成、低延迟又可同时播放多路 RTSP 的低成本半开源技

术方案，无疑是当前安防、交通等行业在网页端低延迟播放 RTSP 流的最佳选择。

二、在线体验

打开在线测试网页 http://local.zorrosoft.com/ ，点击网络高级版安装包

(http://local.zorrosoft.com/Files/PluginOK.zip) 下载，或直接在浏览器中访问

http://zorrosoft.com/Files/WRL.zip 下载这个绿色版程序包，成功后解压并执行安

装(绿色版执行 InstallWrl.bat)即可完成 PluginOK 中间件的安装。一般来说，此安

装包已经默认内置了 2 个不同 PID 的 VLC 网页播放小程序的程序包，分别演示不

VLC 网页播放小程序最低支持在 Windows XP 系统中使用，在当前主流的

Windows 10 和最新的 11 版本也可以正常播放，Linux 等系统的信创版也在路上。

其浏览器兼容性如下：

1、IE 8 及以上版本；

2、Chrome 41 及以上版本；

3、FireFox 50 及以上版本；

4、Opera 36 及以上版本；

5、Edge(Chrome 内核) 80 及以上版本；

6、360 极速浏览器 9.5 及以上版本；

7、360(企业)安全浏览器；

8、QQ 浏览器 10 及以上版本；

9、搜狗浏览器…

如您另有特殊需求，也可以付费定制支持需要支持的专有浏览器适配版本。

三、个性化配置

找到 PluginOK 中间件程序的运行目录，其子目录下的 VLC 网页播放小程序

配置文件 Plugins\90FC7E0E-0D2F-4C38-9875-B06407CE4556\Config.json，可用记事

本打开编辑，主要内容如下：

{"COM": "axvlc.dll","Caching":300,"RTSPTCP":1,"ToolBar":0,"FillWnd":0,

"BlockFlag":9,"PORT": 930}

其中 COM 是为打包 VLC 绿色版后安装中间件时需要自动注册的 COM 组件准备的。

ToolBar 设置播放画面中是否显示控制播放的工具栏，FillWnd 设置播放画面是否

充满整个窗口区(设置为 1 时充满窗口，这可能会导致画面拉伸)，PORT 设置播放

小程序的 Web Socket 服务侦听默认端口，前端在请求连接到播放小程序端口时，

不能写死这个值，因为可能启动多个实例，不同实例会采用不一样的端口进行侦

听。前端在连接到中间件端口启动播放小程序的过程中，收到以下的 JSON 包中

解析 Port 值，就是实际侦听端口。

{"event":"Wrl_AppletOK","aid":4,"rid":4,"data":{"SID":"221903","PID":"90FC7E0E-0D

2F-4C38-9875-B06407CE4556","Port":930}}

其中 aid 为当前播放小程序的实例 ID，前端可通过此 ID 对其进行各种控制，比

如显示、隐藏、放大缩小播放窗口、滚动等等。

Caching 设置网络缓存，控制播放延迟的关键配置，单位毫秒，不建议设置太低，

尤其是您的电脑配置或网络状态不太好的情况下，如遇到播放画面停滞，就需要

适当调大这个值比如 300 毫秒后保存再启动播放看效果。在甲方客户现场实际实

施时，可进行针对性的测试，找到一个可正常播放又能保证尽量低延迟的数值。

RTSPTCP 配置 Live555 流传输采用 HTTP 还是 TCP 方式，1 为 TCP 方式，0 为 HTTP

方式，如遇无法播放情况，请先检查播放源是否正常，另外就是调整此参数进行

测试。关于检查播放源是否正常或调优播放效果，常见做法就是直接启动 VLC

桌面客户端进行播放测试。以上这些播放参数只是默认值，也可在启动播放小程

序后，再调用对应接口设置其它值来控制播放行为，通过接口调用的参数只在当

时生效，不会修改默认配置中的数值。BlockFlag 为小程序转发 VLC 控件的事件通

知消息过滤掩码，由于几个消息发送的比较多，大多前端不需要，所以通过设置

阻止发送不需要的通知，详细说明请参考这里：信息屏蔽掩码

剩余25页未读，继续阅读

PagiHi

粉丝: 10
资源: 3

会员权益专享

Chrome低延迟播放RTSP方案—VLC网页播放浏览器小程序.pdf

评论0

会员权益专享

最新资源

Chrome低延迟播放RTSP方案—VLC网页播放浏览器小程序.pdf

评论0

超低延迟rtsp/rtmp/http播放器实测小于100ms

ubuntu怎么通过vlc将视频通过RTSP协议播放出去。

rtsp浏览器插件下载

我想把rtsp转成web播放流有什么好方法吗

qt实现vlc rtsp监控显示

vue播放rtsp格式视频

写一个在浏览器中可以播放rtsp协议的视频流前端代码

html5视频流播放rtsp

wpf 播放rtsp 声音

vue2实现播放rtsp视频

ubuntu怎么通过vlc将本地视频通过RTSP协议播放出去。

无插件播放rtsp流webrtc

vue 使用flv.js播放rtsp视频

浏览器不安装任何插件显示 rtsp

web页面实时播放rtsp://

web浏览器通过videojs对接实时视频流rtsp、rtmp格式

ffmpeg获取rtsp流播放python

qt widget 支持播放rtsp流的控件

能否使用html+js实现rtsp流在浏览器中播放

mfc播放rtsp视频

会员权益专享

最新资源