在web页面中直接播放rtsp视频流，重点推荐：mediamtx，不仅仅是rtsp

已于 2023-09-25 09:54:21 修改
阅读量2.8w 收藏 129
点赞数 32
文章标签： 音视频 视频编解码 ffmpeg
于 2023-08-25 10:29:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/haixiangyun/article/details/132489160
版权

最近在研究在网页中直接播放rtsp，本人对java、springboot比较熟悉，对vue和nodejs不熟，走了不少弯路，简单分享一下。

文章目录

前言

如果rtsp没有H265的，建议直接使用webrtc-stream，简单好用
项目地址：https://github.com/mpromonet/webrtc-streamer/releases
使用方法参考（感谢博主）：https://blog.csdn.net/qq_20937557/article/details/129879697

2023年9月25日更新：
本文重点建议并讲解的mediamtx，已经更新到了v1.1.1版本，升级了相关功能修复了相关bug，本人也进行了bug提交作者也进行了及时修复。

如果有H265的视频流，可用以下几种方式实现：

一、rtsp2web+ffmpeg

参考：rtsp2web https://blog.csdn.net/csdn_yudong/article/details/124124137
优点：使用方法简单，传入rtsp视频流，直接播放；支持H265；前端使用jsmpeg.js延迟低；能使用H5直接播放；
个人使用认为的不足之处：
1、前端使用jsmpeg.js时，延迟很低，没有卡顿花屏，但是没有全屏功能，不过使用js实现一下也很简单；
使用flv.js时，延迟较大，卡顿比较严重，没有找到合适的办法解决；
2、在windows中部署没有问题，但是我在ubuntu18（其它linux的没有试）中没有部署成功，试过了安装ffmpeg从3、4、5、6各种版本的各种安装方式，使用ffmpeg命令都能正常处理视频流，但是在rtsp2web都没能成功；因为没有日志，没有办法找到问题和解决问题，虽然付费作者也没有给解决办法；（能解决的请私信我一下，感谢）
rtsp2web后台打印

3、作者在视频加了水印，需找作者付费去除水印，知识付费也能理解，但是遇到的问题作者都没有给出解决办法，加上没有日志的处理，有问题时难以解决；

二、node-rtsp-stream+ffmpeg

前端也是使用jsmpeg.js，跟rtsp2web类似，也使用websocket；由于本人对nodejs和vue不熟悉，所以不会做成灵活的rtsp地址调用；使用vue的可以使用此方法。

三、重点推荐：mediamtx（原rtsp-simple-server）

mediamtx真乃神器也！
项目地址：https://github.com/bluenviron/mediamtx/tree/main
参考（感谢博主）：https://blog.csdn.net/qq_20937557/article/details/132271507?spm=1001.2014.3001.5501

先说优点：

  1. 不管是在windows还是linux，安装和使用都极其简单；
  2. 作者写的文档比较详细，使用过程中遇到的问题很少，不需要去参考其他文档；
  3. 在github上进行提问以及bug提交作者都能回复并及时修复bug，非常赞；
  4. 支持rtsp、rtmp、hsl；并且延迟处理的比较好；
  5. 集成webrtc可直接播放视频；
  6. 可进行视频访问加密处理；

没有找到啥缺点

1.安装ffmpeg

这个比较简单，网上教程也比较多，此处不做介绍。
ubuntu18.04上安装ffmpeg5.1可以参考：ubuntu18安装ffmpeg5 https://blog.csdn.net/haixiangyun/article/details/132583757

2.下载运行mediamtx_v1.0.0

下载地址：mediamtx下载地址
mediamtx下载

不管是windows还是linux，都是有三个文件
mediamtx文件
运行方式：

  • windows直接双击mediamtx.exe；
  • linux下在当前目录直接运行sudo ./mediamtx

mediamtx功能非常强大，我这里介绍我目前用到的几个功能

3.重点：mediamtx.yml文件的配置

此处介绍几个必要的配置

3.1 日志

默认日志的logDestinations配置的是logDestinations，可加入file保存为日志文件；日志文件保存在当前目录下，如上图
日志配置

3.2 API

API配置设为yes，apiAddress是api的地址和端口号，默认127.0.0.1:9997，可以使用本机IP，0.0.0.0表示127.0.0.1和本机实际IP都可以访问
在这里插入图片描述

3.3 视频流

此处介绍一下rtsp，其他的一样，protocols中使用的协议可以根据设置的先后顺序进行优先排序
rtsp

3.4 webrtc

使用webrtc可以直接在网页中浏览视频
在这里插入图片描述

3.5 配置现有非H265视频流

如果你的需求是能直接在网页中播放H264的rtsp或者其他视频流，stream01是你起的名字，source是视频流地址，在此处配置后可直接访问，使用webrtc直接访问：http://127.0.0.1:8889/stream01就能出来视频
在这里插入图片描述

3.6 配置使用ffmpeg转换流

1、runOnInit：配置ffmpeg转换命令，服务器启动后就一直在后台执行转换命令
在这里插入图片描述
使用webrtc直接访问：http://127.0.0.1:8889/stream11就能出来视频

2、runOnDemand：配置ffmpeg转换命令，只有在调用流时才会执行转换命令
在这里插入图片描述
使用webrtc直接访问：http://127.0.0.1:8889/stream22时，或者播放rtsp://127.0.0.1:8554/stream22时才会调用ffmpeg转换命令，还可以调整runOnDemandCloseAfter参数来配置不调用后关闭执行转换命令的时间

4.API使用

API文档：https://bluenviron.github.io/mediamtx/
1、 http://127.0.0.1:9997/v2/paths/list
查看当前的视频流，包括yml里面配置的和通过api添加的

2、 http://127.0.0.1:9997/v2/config/paths/add/stream11，此处我使用postman演示调用api。
（1）添加一个现有的视频流，添加后访问http://127.0.0.1:8889/stream11
在这里插入图片描述

（2）添加一个使用ffmpeg转换的视频流
在这里插入图片描述
我这个ffmpeg命令是把原来H265的视频转换为H264的rtsp视频流，访问http://127.0.0.1:8889/stream12，简单说明一下我使用的参数：
-vcodec libx264 输出流为h264格式
-b:v 1024k 视频码流
-vf scale=1280:720 分辨率
-bf 0 禁用B帧，因为webrtc在网页调用时控制台一直输出 WebRTC doesn’t support H264 streams with B-frames，没有此问题的可以不设置

（3） http://192.168.234.133:9997/v2/config/paths/remove/stream11，删除stream11流，remove后面的参数就是要删除的名字

5.其他说明

作者在主页对mediamtx的使用方法有详细的描述，建议大家仔细读一下，相信能解决大部分问题，
包括如下图：如何在windows和linux开机启动执行等
在这里插入图片描述

四、付费参考

1、付费媒体流也可以参考：node-media-server，支持应该会比较好。
2、直接播放可参考猿大师，有技术支持，因为用的vlc插件，所以需要自己计算调整视频位置，尤其在嵌套iframe在加上弹出层，在加上页面框架中页签，前端调整比较多。

总结

在研究rtsp的路上试过很多的方法，走了不少弯路，也得到了CSDN大佬的指点，再次感谢博主：吭哧瘪肚的万能工https://blog.csdn.net/qq_20937557?type=blog

唯一602
关注
FFmpeg开发笔记（十五）详解MediaMTX的推拉流
aqi00的博客
03-29 3212
MediaMTX是个开源的轻量级流媒体服务器，它的压缩包包括可执行程序mediamtx.exe和配置文件mediamtx.yml，看起来非常简约，但它提供的流媒体服务一点也没缩水。
网页无插件播放rtsp视频，支持最新浏览器内核
10-18
支持最新浏览器内核，实现了用RTSP协议接入已有流媒体平台或摄像机的视频，通过转码后用WebRTC进行播放，只要支持WebRTC的浏览器或移动端都可以使用。用WebRTC播放监控视频可以处理高版本浏览器不支持插件的情况，且比rtmp、HLS的实时性更高。
前端播放RTSP视频流
小李在努力学习
03-16 378
flv.js 并不直接支持 RTSP 协议，所以仍然需要一个中间层来将 RTSP 转换成 FLV 或其他 flv.js 支持的格式。在 Vue 中使用 flv.js 插件播放 RTSP 视频流的主要原因是浏览器原生的 <video> 标签并不直接支持 RTSP 协议，也不支持 FLV 容器格式。flv.js 能够在浏览器环境中解码和播放 FLV 流，这是因为 flv.js 内部实现了对 FLV 文件结构的理解和相应的解码逻辑。
FFmpeg+Mediamtx+VLC 简单实现视频流的推流拉流效果（详细）
ZJQSDSA的博客
08-31 2167
本文章使用了 FFmpeg、MediaMTX 和 VLC 来实现视频流的转发和播放
使用 MediaMTX 和 FFmpeg 推拉 RTSP 流媒体
weixin_43978579的博客
05-02 7080
FFmpeg 是一个非常强大的开源工具，可以用来处理音频和视频，也可以进行 RTSP 视频流的推拉。
安装MediaMTX RTSP
qq_44800031的博客
01-07 2402
要安装和使用 MediaMTX（以前称为 rtsp-simple-server），请按照以下步骤操作。1、包含主流大模型，例如openai的gpt4,Anthropic的claude3.5，google的gemini2.0。按照以上步骤，您应该可以成功安装并运行 MediaMTX。，如果该文件不存在，服务器将以默认设置运行。9、技术架构： 前端采用react， 后端采用python。可以包周、包月、包年。3、支持私有化部署，也可以出售全部源码支持二次定制。如果您需要自定义设置，可以创建或修改此文件。
Web 播放 RTSP(Webrtc方案)
qq_39782968的博客
06-12 8909
通过webrtc播放海康摄像头rtsp流
实现在web页面中直接播放rtsp视频流
liveweb视频汇聚平台
09-13 3397
liveweb具备较强的灵活性，在视频直播过程中liveweb可通过H5进行视频解码，只要客户端支持H5，就能完美进行视频的无插件直播，同时还支持大码率视频直播，并可支持H.264、H.265两种编码格式。liveweb是可支持H.264/H.265视频播放的流媒体播放器，性能稳定、播放流畅，可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具备较高的可用性。liveweb还拥有Windows、Android、iOS版本，其灵活的视频能力，极大满足了用户的多样化场景需求。
web播放rtsp视频流
热门推荐
IT菜鸟
07-04 1万+
温馨提示：执行教程前两步（1下载、2安装）即可；6、在目录下按住 shift+鼠标右键 =》 在此处打开 Powershell 窗口。2、编辑用户变量 Path =》新建=》填写ffmpeg解压后的bin路径。1、此电脑(右键)=》属性=》高级系统设置=》环境变量。ctrl+R 输入 cmd 打开命令窗口，输入。7、输入以下命令，启动 node 服务。2、打开 cmd 命令窗口切换到目录。1、新建一个项目目录（新建文件夹）3、在命令窗口执行下面命令，安装。4、接着在目录新建一个。在浏览器打开页面查看。
web浏览器播放rtsp视频流，海康监控API
qq_33982898的博客
08-04 3686
海康平台支持多种协议的视频流，如果流无法播放，可能是设备配置或者分辨率或者… 出了问题！！这种事情当然是让后端去处理咯，是跟厂商联调还是怎么着，关我前端啥事儿！！！把精力用到更有意义的地方才是正解，例如像我一样水一篇文章， Nice！当然，尽量直接使用海康平台API返回的流，转码始终是下策。rtsp视频服务 基于node+ffmpeg 转换为 flv 视频服务ffmpeg安装教程（windows版）
web端播放rtsp视频流（摄像头监控视频）教程及window下开机自启动部署
pixle的博客
01-09 9211
像海康大华一些摄像头或者直播源 为rtsp视频流，想在web上播放必须进行协议转换。已知一些方案例如rtsp转rtmp需要flash，现在浏览器基本不支持flash。还有转hls或者flv这些延迟都比较高。经过实践对比比较理想方案是 经转码后视频流通过websocket传送给客户端在将视频流解码成图片通过canvas渲染出来，延迟比较小基本在1s以内。所用工具(插件)为ffmpeg+node（node-rtsp-stream）+jsmpeg。
html 播放rtsp流
02-18
这是一个通过html播放rtsp流的文件，可以在IE浏览器和 google4.5以下版本的浏览器运行。 主要内容：1.可以设置vlc的视频的缓冲时间， 2.可以设置取RTSP/TCP流
web端 多路 视频实时播放rtsp流
05-22
springboot+websocket+ ffmpeg 实现web无插件多路视频实时播放rtsp流
rtsp在线播放,websocket
01-14
rtsp在线播放,websocket
RTSP视频播放器
07-05
RTSP视频播放器，包括发送端和接收端。
基于Gin + WebSocket + JSMpeg，在HTML页面上直接播放RTSP视频流
04-26
基于Gin + WebSocket + JSMpeg，在HTML页面上直接播放RTSP视频流 基于 JSMpeg 的原理，在HTML页面上直接播放RTSP视频流，使用Gin框架开发。 go 主要模块 API 接口：接收FFMPEG的推流数据和客户端的HTTP请求，将...
Web网页实现多路播放RTSP视频流（使用WebRTC）
08-03
本demo采用web网页作为客户端，webrtc作为服务端，实现多路rtsp视频流在网页端同时实时预览。 其中包含两个文件夹：webrtc-qmy为客户端；webrtc-streamer-v0.7.0-dirty-Windows-AMD64-Release问服务端。具体使用流程...
gin-rtsp:基于Gin + WebSocket + JSMpeg，在HTML页面上直接播放RTSP视频流
05-31
基于 的原理，在HTML页面上直接播放RTSP视频流，使用Gin框架开发。 主要模块 API 接口：接收FFMPEG的推流数据和客户端的HTTP请求，将客户端需要播放的RTSP地址转换为一个对应的WebSocket地址，客户端通过这个...
在web页面中直接播放rtsp视频流
m0_69068051的博客
09-20 8697
在web页面中直接播放rtsp视频流
webrtc-streamer加上-o花屏
最新发布
04-25
<think>好的，我现在需要解决用户提到的在使用webrtc-streamer时使用-o参数导致花屏的问题。首先，用户提供的引用中提到了花屏通常是由于网络丢包或关键帧丢失引起的，而WebRTC通常通过丢帧来避免花屏。但这里用户明确使用了-o参数，也就是透传模式，所以可能需要深入分析这个模式的影响。 根据引用[2]，当网络条件良好时，透传模式（-o参数）可以禁用QoS功能，降低CPU和内存使用，但一旦网络出现问题，可能导致丢帧、花屏甚至断开连接。这说明在透传模式下，WebRTC的抗丢包机制如NACK、FEC可能被关闭，导致无法有效处理丢包，从而出现花屏。 接下来，我需要考虑解决方案。首先应该检查网络状况，确认是否存在丢包或延迟。如果网络不稳定，透传模式显然不适合。然后，用户可能需要调整参数，禁用透传模式以启用QoS功能。比如去掉-o参数，让WebRTC启用NACK、FEC等机制，这样即使有丢包，也能通过重传或纠错来减少花屏。 另外，引用[3]中提到关键帧丢失会导致花屏持续1-2秒，所以需要确保关键帧的发送频率。如果关键帧间隔过长，丢包后解码器可能需要更长时间恢复，导致花屏。因此建议调整编码器的关键帧间隔，比如设置为2秒一次。 还有JitterBuffer的配置，适当增加缓冲时间可以帮助处理网络抖动，但过大会增加延迟，需要平衡。此外，检查SDP协商中的编解码器是否支持前向纠错（FEC），比如VP8或H.264，并确保FEC启用。 如果问题依然存在，可能需要升级webrtc-streamer版本，因为旧版本可能存在已知问题。同时，使用调试工具如Wireshark分析网络包，查看是否有丢包或乱序，以及关键帧是否正常发送。 最后，如果所有方法无效，可能需要更换编解码器，比如VP8通常比H.264在丢包处理上更好，或者联系开发者社区获取支持。</think>### WebRTC-Streamer使用-o参数花屏问题分析与解决方案 #### 一、问题根源分析 1. **透传模式特性** `-o`参数启用透传模式时，会禁用WebRTC的QoS机制（如NACK、FEC、JitterBuffer），此时网络丢包直接导致： - 关键帧丢失后无法及时恢复，产生$T_{\text{花屏}}=1-2s$的持续花屏[^3] - 非关键帧丢失引发局部马赛克现象 - 抖动缓冲失效导致画面撕裂 2. **编码器配置异常** 透传模式下若编码器关键帧间隔（$GOP_{\text{size}}$）设置过大（如>300帧），丢包恢复时间超过人类视觉感知阈值$T_{\text{容忍}}=400ms$[^1] #### 二、分步解决方案 **步骤1：基础模式修正** ```bash # 禁用透传模式（移除-o参数） ./webrtc-streamer -n "Camera Stream" rtsp://your_stream_url ``` 此时系统自动启用： - NACK重传机制（最大重传次数$R_{\text{max}}=3$） - FEC前向纠错（冗余度$\rho=10-20\%$） - 动态抖动缓冲（$T_{\text{buffer}}=50-500ms$）[^3] **步骤2：关键帧优化** ```bash # 强制修改编码器关键帧间隔（以H.264为例） ./webrtc-streamer -n "Camera Stream" --h264.profile=high --h264.key_interval=60 rtsp://your_stream_url ``` 设置关键帧间隔满足： $$GOP_{\text{size}} \leq \frac{FPS \times T_{\text{容忍}}}{1+\alpha_{\text{loss}}}$$ 假设帧率$FPS=30$，网络丢包率$\alpha_{\text{loss}}=5\%$，则$GOP_{\text{size}} \leq 28$帧 **步骤3：网络层增强** ```bash # 启用UDP优先级标记（DSCP值46表示EF加速转发） ./webrtc-streamer -n "Camera Stream" --transport.dscp=46 rtsp://your_stream_url ``` 通过差分服务代码点实现： $$Q_{\text{priority}}= \begin{cases} 46 & \text{视频流} \\ 34 & \text{音频流} \\ 0 & \text{其他} \end{cases}$$ **步骤4：高级调试方法** ```bash # 启用丢包模拟测试 ./webrtc-streamer -n "Test" --network.emulation.loss=0.05 rtsp://your_stream_url # 查看NACK统计 tail -f /var/log/webrtc_stats.log | grep nack ``` 典型修复效果应满足： $$\frac{NACK_{\text{count}}}{RTP_{\text{total}}} < 5\%$$ #### 三、验证指标 1. **主观质量评估** 使用ITU-T P.1203标准： $$MOS=\frac{1}{1+e^{-(3.7-0.9\ln(L_{\text{loss}}))}}$$ 目标MOS值 ≥ 3.5 2. **客观指标监控** | 指标 | 阈值 | 测量工具 | |---|---|----| | 端到端延迟 | <200ms | Wireshark | | 丢包恢复率 | >95% | webrtc-internals | | 解码错误率 | <0.1% | ffmpeg |
评论 106
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值