rtsp流浏览器播放方案

Posted 2023-05-03

参考技术A rtsp流在主流浏览器并不支持直接播放。比如大华的视频流：rtsp://admin:123456@

192.168.10.129/cam/realmonitor?channel=1&subtype=0，用vlc可以直接播放。但在浏览器会报ERR_UNKNOWN_URL_SCHEME。那如何在浏览器中播放呢。

以下列出几种方案。

1、安装插件（chrome最新版基本都不支持）

类如：kurento，vlc插件（谷歌浏览器版本41以下),vgx插件(不支持高版本，chrome72.0版本可用)等。

2、安装软件（中间件，基本都付费）

类如：Appemit（调用vlc插件播放rtsp），可以免安装的，目前只能windows,免费版会有提示。

猿大师中间件（底层调用VLC的ActiveX控件，实现在主流浏览器网页中内嵌播放多路RTSP的实时视频流），中间件收费的。

PluginOK(牛插)中间件。底层调用ActiveX控件VlcOcx.dll。（商业用途需付费使用）

3、服务器拉流转发及协议转换

示意图如下所示：

推流--------------服务器转发--------------拉流

方法一览：

a,vlc软件串流到http协议 ，网页显示几个视频需启动几个vlc,只适合应急场景。

b,html5 + websocket_rtsp_proxy 实现视频流直播 ，基于MSE（Media Source Extensions,W3C），扩展H5的功能。

步骤：服务器安装streamedian服务器，客户端通过video标签播放。

原型图：

价格：

c.基于nginx的rsmp转发

基于nginx实现rtmp转化，用flash实现播放。由于flash目前大多浏览器默认禁用，不推荐此方式。

步骤：安装ffmpeg工具,安装nginx。

另外nginx-rtmp-module也支持HLS协议,可以搭建基于hls的直播服务器。

d.rtsp转hls播放,通过ffmpeg转码

步骤：安装ffmpeg工具，ffmpeg转码。

形如：

ffmpeg -i "rtsp://admin:123456@192.168.10.129/cam/realmonitor?channel=1&subtype=0" -c copy -f hls -hls_time 2.0 -hls_list_size 0 -hls_wrap 15 "D:/hls/test.m3u8"

缺点是直播流延时很大，对实时要求比较高的不满足要求。

案例：基于EasyDarwin拾建转码服务器。参考地址:https://blog.csdn.net/jyt0551/article/details/84189498

通过存储的m3u8去读取。

e.websocket代理推送，FFMPEG转码

此方法与a，b类似。但更实用。

以下提供两种方案：

（1）Gin+WebSocket+FFMPEG实现rtsp转码,参考：https://juejin.cn/post/6844904024072798216

通过FFMPEG把rstp转成http，ginrtsp作为转发服务器，但需要自己写相应接口，需要了解go语言。

（2）node + ffmpeg + websocket + flv.js，参考：https://juejin.cn/post/6908641550046068744

步骤：在node服务中建立websocket；通过fluent-ffmpeg转码，将RTSP 流转为flv格式；通过flv.js连接websocket，并对获取的flv格式视频数据进行渲染播放。

import WebSocket from 'ws'import webSocketStream from 'websocket-stream/stream'import ffmpeg from 'fluent-ffmpeg'// 建立WebSocket服务const wss = new WebSocket.Server( port: 8888, perMessageDeflate: false )// 监听连接wss.on('connection', handleConnection)// 连接时触发事件function handleConnection (ws, req)   // 获取前端请求的流地址（前端websocket连接时后面带上流地址）  const url = req.url.slice(1)  // 传入连接的ws客户端 实例化一个流  const stream = webSocketStream(ws, binary: true )  // 通过ffmpeg命令 对实时流进行格式转换 输出flv格式  const ffmpegCommand = ffmpeg(url)    .addInputOption('-analyzeduration', '100000', '-max_delay', '1000000')    .on('start', function () console.log('Stream started.') )    .on('codecData', function () console.log('Stream codecData.') )    .on('error', function (err)       console.log('An error occured: ', err.message)      stream.end()    )    .on('end', function ()       console.log('Stream end!')      stream.end()    )    .outputFormat('flv').videoCodec('copy').noAudio()  stream.on('close', function ()     ffmpegCommand.kill('SIGKILL')  )  try     // 执行命令 传输到实例流中返回给客户端    ffmpegCommand.pipe(stream)  catch (error)     console.log(error) 

优点全部基于js。前端即可搞定。

参考:https://www.zhihu.com/question/29973696

WEB页面实时播放海康大华等摄像头RTSP视频流完全方案

一、背景

在遍地都是摄像头的今天，往往需要在各种信息化、数字化、可视化B/S系统中集成实时视频流播放等功能，海康、大华、华为等厂家摄像头或录像机等设备一般也都遵循监控行业标准，支持国际标准的主流传输协议RTSP输出，而Chrome、Firefox、Edge等新一代浏览器从2015年开始取消了NPAPI插件技术支持导致RTSP流无法直接原生播放了，这对于绝大部分没有视频处理经验的前、后端工程师来说是一个非常头疼的问题，专业性强，技术门槛高，而对做B/S信息化系统集成的公司来说，为了这个模块的功能单独招聘专职研发人员来负责的话，成本高昂不说，还未必做的好。

二、现状

当前主流版本浏览器已经都不支持原生播放RTSP流，而且浏览器厂家也明确宣布不考虑支持的情况下，为了在全终端和全平台播放RTSP流，一般来说就只能采取在后端先转码再转流给前端播放的方案，这也是号称无插件的技术方案。而对于终端硬件配置较好的场景，也可以采用在后端转流到前端，前端再通过WASM程序转码播放的方案，但IE并不支持。转码到前端时，即使配置了性能不错的电脑，还受限于WASM的固有缺陷，比如多线程支持差、能使用的内存始终受限、只能软解码等，无法充分利用终端电脑的硬件加速能力(GPU)，这就导致同时播放多路或高清RTSP流时也会比较吃力，而且大量占用终端电脑的CPU和内存资源，其它操作基本无法进行，对音视频格式的兼容能力也很有限。

虽然无插件播放方案能够播放出画面，但是往往延迟很高，基本上都在数秒之久，在一些对延迟敏感的场合客户要求毫秒级延迟，显然无插件技术方案是无法满足的；而且首屏画面显示慢，基本上是数秒级别，这就导致切换播放源时迟迟看不到画面出来，用户体验很差；况且无插件技术方案，需要在后端持续运行高负荷运转的视频转码转流服务，如果摄像头路数多或需要在线播放的终端比较多，服务器的压力就会很大，播放卡顿、花屏、黑屏、断播等现象就会时常出现，很难让客户满意。为了解决这些问题，相关硬件、软件的投入和持续不断的带宽占用往往也让客户难以接受。现在越来越多的客户追求高大上的视频播放效果，采用高清摄像头的越来越多，播放显示器1080P已是低配，2K甚至4K大屏正在成为主流之选。这种无插件技术方案，在中高配的屏幕上如果只能播放出慢如蜗牛的画面，想不让客户吐槽实在是太难了。

一个好的视频流网页播放方案，首先要能做到持续稳定播放多路视频，需同时支持H.264和H.265编码，最核心的还是要做到低延迟、切换画面快，另外就是对当前主流版本的浏览器兼容能力要强，还有就是开发接口丰富并可定制，如果还能做到开源或采用免费开源的主流播放引擎，那就最好不过了，毕竟开源在商业领域的应用越来越多，是个大趋势，从系统集成商的角度来说，开源意味着有更多的自主可控机会来降低整个系统的实施风险。

三、最终

猿大师针对当前行业痛点研发出了具有专利技术的猿大师中间件产品，成功突破了浏览器收紧其插件技术的限制，在浏览器之上重新搭建了一套外接程序系统并可无缝嵌入浏览器网页运行，成功模拟了2015年之前Chrome、Firefox、IE等浏览器支持的ActiveX控件和NPAPI插件技术运行效果，是原来采用了跨浏览器插件框架FireBreath的最佳替代技术方案。在2020年发布了基于猿大师中间件的VLC网页播放小程序，基本完成网页中低延迟稳定播放多路视频流的方案拼图，已经在一些客户现场成功实施，赢得了客户的一致好评。友情提醒：猿大师中间件是此领域全球实现商用的成熟中间件，技术实现方案在2019年就申请了中国软件发明专利保护，请大家注意识别仿冒或抄袭者，选择那些冒牌货不仅仅会因为其产品不成熟对您造成巨大损失不说，还有侵犯本公司知识产权的巨大风险！

猿大师免费下载试用地址：​​​​​​​下载试用_猿大师http://www.yuanmaster.com/xiazai/

四、特点

1.低延迟播放

从播放性能上说，摄像头和录像机的硬件厂家提供的私有协议播放方式无疑是最快的，延迟可做到100-300毫秒级，其次是RTSP协议流播放，大致是200-500毫秒级，再次是无插件方案的转码流，优化比较好的单路播放大致在1-3秒级。猿大师近期发布的海康网页播放小程序，除了支持海康设备的私有协议直接播放之外，还内置了格式兼容更好的MP4播放库和网络兼容能力强大的LibVLC开源播放引擎。2020年发布的VLC网页播放小程序，基于VLC的ActiveX控件开发，完整封装了控件的所有接口给前端调用，在同等条件下，延迟时间和VLC桌面程序播放保持一致，并可支持多路组合实现分屏播放。

2.兼容性强

1. 绝大部分浏览器兼容，同时兼容Chrome、Edge、Firefox、IE、Opera、Electron、Vivaldi、Brave、360、QQ等浏览器的低版本到最新版都可以使用；
2. 设备兼容性强，同时支持海康、大华、宇视、华为等厂家的硬件设备，只要能输出RTSP、RTMP、HLS、HTTP、TCP、UDP等流媒体协议，就可以直接播放；
3. 支持多种视频编码方式，不管是H.264还是H.265都可以同时支持播放，在一些采用WASM的无插件技术方案中，往往只支持H.265编码的视频流，服务器转码方案中，编码兼容能力直接依赖这个转码服务的实现；
4. 几乎能播放任何内容，依托开源的VLC著名播放引擎，支持文件、光盘、摄像头、设备及流媒体可直接播放MPEG-2, MPEG-4, H.264, H.265, MKV, WebM, WMV, MP3, MP4等文件，而无插件技术方案往往能播放的内容有限，比如不支持本地文件播放，不支持高速播放；
5. 分辨率支持范围广，从480P到1080P，还是更高的2K或4K，都能轻松应对，无插件方案从1080P开始，播放效果基本上就差强人意了。

3.功能丰富

1. 最核心的无疑是播放功能，包含单路播放、多路播放、全屏播放、快播、慢播等等，其中多路播放分屏风格支持多达26种，总有一款适合您，没有需要的分屏风格时也可以委托定制开发，还有指定视频名称或指定时间段回看视频等；
2. 抓图功能，定时批量抓、支持保存指定本地路径或图片数据直接返回前端、图片质量可控制等，无插件方案由于无法访问本地文件系统是无法抓图直接保存到本地的，也不是基于视频原有分辨率进行抓取，图片质量无法保证；
3. 录像功能，支持直接录像保存到本地MP4文件，而无插件方案由于无法访问本地文件系统，自然也无法直接完成此功能；
4. 弹幕及水印功能，播放状态实时提示等支持，无插件方案基本只能在服务器端先行添加，无法针对终端区别对待；
5. 语音对讲及云台控制，无插件方案基本无此功能；
6. 人脸识别、车牌识别并显示画框等个性化功能，可通过定制设备厂家原生SDK功能实现。

4.集成简单

延续原有插件播放技术路线，可实现平滑升级，前后端改造小，提供VUE集成范例，集成简单，节省成本。

五、优势

借助猿大师中间件独特的专利技术，相对于无插件播放方案来说，具有无可替代的技术优势，具体表现如下：

1. 可充分利用终端电脑硬件加速能力(GPU)，在同等硬件、网络带宽及流输出条件下，延迟可做到毫秒级，可播放更多视频源、支持更高的分辨率、实现更流畅的播放效果。
2. 播放程序可直接调用操作系统及硬件厂家提供的原生播放功能，也可以调用其它程序模块，不受浏览器的限制，实现丰富的个性化播放功能。这个优势或许有人认为也是缺点，比如有安全隐患，其实对于企业的各种业务系统来说，都是需要经过充分测试才会上线，而猿大师中间件承诺本身无任何病毒或木马行为，不会有未授权的网络请求行为，也提供了运行过程中的安全调用验证机制，即使未授权的第三方拿到了播放小程序的开发接口，没有经过安全验证也是无法请求播放的，一定程度上解决了浏览器原有插件技术不安全的缺陷。安全问题关键是具体如何看待，其实B/S等各种系统前端代码的运行在浏览器厂家看来，其实就是裸奔的状态，只要浏览器厂家想要获取前端代码中的敏感信息，从技术角度完全没有任何问题，相反的是，通过猿大师的技术方案，浏览器可获得的信息反而受限，除非和操作系统开发商一起配合来进行才有可能。
3. 猿大师中间件不依赖浏览器的插件和扩展技术支持，浏览器的升级不会导致技术方案失效，通讯技术采用国际标准的WebSocket技术，数据采用主流的JSON打包，通用性强。
4. 猿大师中间件提供了前端可调用的自动升级中间件或小程序的机制，解决了传统C/S系统升级终端软件的大难题，具有了和B/S接近的分发便利优势。

1.猿大师与大华官方网页延迟对比：

用猿大师VLC播放程序与大华官方网页播放器同时在高版本Chrome中播放RTSP视频流延迟效果对比，结果令人惊讶！

2.猿大师VLC播放程序与海康威视官方网页延迟对比：

海康威视摄像头RTSP视频流在高版本谷歌Chrome零延迟播放效果演示视频

3.猿大师VLC播放程序VUE测试页面效果演示：

在VUE中实时多路同时播放海康威视RTSP视频流，兼容Chrome、Firefox等浏览器