低延迟直播终极方案：WebRTC + MediaMTX，延迟＜500ms！
低延迟直播终极方案：WebRTC + MediaMTX，延迟<500ms！
在直播场景中，延迟往往是用户体验的关键。传统的HLS或RTMP直播延迟通常在3-10秒，这对于互动连麦、远程驾驶、在线教育等场景来说远远不够。那么有没有一种方案可以实现端到端延迟低于500ms，且无需安装插件，直接用浏览器就能观看？答案是肯定的，今天我们就来介绍一套强大的组合：WebRTC + MediaMTX。
为什么是WebRTC？
WebRTC（Web Real-Time Communication）是一种支持浏览器之间实时音视频通信的技术，其核心优势就是超低延迟（通常可达200-400ms）。它基于UDP传输，配合P2P或通过TURN中继，天然适合实时流媒体场景。
但WebRTC本身是一个点对点协议，如果我们要做一对多的直播，就需要一个媒体服务器来分发流。市面上有很多选择，如Janus、Licode、SRS等，而今天的主角MediaMTX（原名rtsp-simple-server）则因其轻量、易用、原生支持WebRTC输出而备受青睐。
MediaMTX 简介
MediaMTX 是一个开源的实时媒体服务器和代理，它支持多种协议：
- 输入：RTSP、RTMP、HLS、WebRTC（通过WHIP）、SRT等
- 输出：RTSP、RTMP、HLS、WebRTC（通过WHEP）、SRT等
也就是说，你可以将任何来源的流（如摄像头RTSP、OBS推RTMP）推送到MediaMTX，然后通过WebRTC拉流，在浏览器中无插件播放，延迟轻松控制在500ms以内。
实现<500ms延迟的关键：WebRTC配置
WebRTC的延迟表现取决于网络穿透和传输策略。MediaMTX内置了WebRTC输出模块，我们需要正确配置ICE、STUN和TURN，以确保在各种网络环境下都能稳定连接。
ICE、STUN、TURN 是什么？
- ICE（Interactive Connectivity Establishment）：交互式连接建立，用于找到两端之间最优的通信路径。
- STUN（Session Traversal Utilities for NAT）：客户端用来获取自己的公网IP和端口，实现NAT穿透。
- TURN（Traversal Using Relays around NAT）：当P2P直连失败时，通过中继服务器转发数据，虽然会增加一点延迟，但能保证连通性。
为了让浏览器能够连接到MediaMTX（通常是内网或云服务器），我们需要在配置中指定STUN/TURN服务器地址。
实战：配置MediaMTX启用WebRTC
1. 安装MediaMTX
从GitHub Releases下载对应平台的二进制文件，解压后即可运行。Linux/macOS用户也可以直接使用Docker：
docker run --rm-it-p8554:8554 -p1935:1935 -p8888:8888 -p8889:8889 \-v$PWD/mediamtx.yml:/mediamtx.yml \ bluenviron/mediamtx 2. 修改配置文件 mediamtx.yml
MediaMTX的配置文件为YAML格式。关键WebRTC配置段如下：
# WebRTC 服务器配置webrtc:# 监听地址，一般保持0.0.0.0listenAddress::8889# 对外暴露的IP地址（必须填写公网IP或域名）externalIP:"your-server-public-ip"# 如果服务器有多个IP，可以指定候选IP# 以下为ICE候选地址类型candidates:-8555# 本地候选端口# STUN 服务器（用于获取公网IP）stunServers:- stun:stun.l.google.com:19302# TURN 服务器（可选，如果需要中继）# turnServers:# - turn:your-turn-server:3478?transport=udp# username: "your-username"# password: "your-password"注意：externalIP必须设置为服务器的公网IP，否则浏览器生成的SDP中的IP地址可能是内网IP，导致无法连接。3. 其他协议输入配置（可选）
如果你需要从RTMP推流，可以启用RTMP：
rtmp:truertmpAddress::1935或者从RTSP拉流：
paths:camera1:source: rtsp://192.168.1.100:554/stream1 4. 启动服务
运行MediaMTX，如果配置正确，你会看到类似日志：
2024/01/01 12:00:00 INF [WebRTC] listener opened on :8889 2024/01/01 12:00:00 INF [WebRTC] ICE candidate: candidate:1 1 UDP 2130706431 your-server-ip 8555 typ host 前端播放：用JS拉起WebRTC流
MediaMTX支持WHEP（WebRTC HTTP Egress Protocol），这是一个轻量的WebRTC拉流协议。你可以在浏览器中通过简单的JavaScript代码播放流。
1. 引入必要的库
MediaMTX官方提供了一个简易的播放器示例，我们也可以直接使用浏览器的WebRTC API。推荐使用@mux/webrtc-player或直接基于RTCPeerConnection封装。
下面是一个最简实现：
<!DOCTYPEhtml><html><head><title>WebRTC Low Latency Player</title></head><body><videoid="video"autoplaymutedcontrols></video><script>asyncfunctionplayStream(){const streamId ='camera1';// 替换为你的流名称const endpoint =`http://your-server-ip:8889/stream/${streamId}/whep`;const pc =newRTCPeerConnection({iceServers:[{urls:'stun:stun.l.google.com:19302'}// 浏览器端也需配置STUN]}); pc.ontrack=(event)=>{ document.getElementById('video').srcObject = event.streams[0];};// 创建Offer，但这里我们直接请求服务器的SDP（WHEP使用HTTP POST）const response =awaitfetch(endpoint,{method:'POST',headers:{'Content-Type':'application/sdp'},body: pc.localDescription ? pc.localDescription.sdp :''});const remoteSdp =await response.text();await pc.setRemoteDescription({type:'answer',sdp: remoteSdp });// 添加ICE候选处理（可选） pc.onicecandidate=(event)=>{if(event.candidate){// 如果服务器需要ICE候选，可以通过另一个HTTP请求发送// 但MediaMTX的WHEP通常会在answer中携带完整候选，无需额外发送}};}playStream();</script></body></html>注意：上述代码简化了ICE处理，实际生产环境中可能需要更完善的候选交换。更稳定的做法是使用成熟的库如janus.js或webrtc-player。
2. 测试延迟
在局域网或公网环境下，打开这个HTML页面，你会看到视频流在1秒内启动，延迟通常在300-500ms之间，非常流畅。
常见问题与优化
Q1：播放黑屏或无法连接？
- 检查服务器的
externalIP配置是否正确，必须为公网IP。 - 确保防火墙开放了WebRTC端口（默认8889）以及ICE协商的UDP端口范围（MediaMTX默认使用随机端口，可固定）。
- 浏览器控制台查看错误，如果是CORS问题，可以在MediaMTX配置中启用CORS。
Q2：如何固定ICE端口？
在webrtc配置段添加：
iceCandidateUdpPortRange: 50000 50050 然后开放这些UDP端口。
Q3：需要TURN服务器吗？
如果服务器在NAT后面，或者客户端网络严格对称NAT，可能需要TURN中继。可以使用coturn搭建，或使用云服务商提供的TURN。
Q4：延迟还能更低吗？
WebRTC本身延迟已经很低，但编码参数也会影响。建议在推流端使用低延迟编码设置（如H.264的tune=zerolatency），并降低GOP大小（如1秒一个关键帧）。
总结
通过MediaMTX + WebRTC，我们仅需简单的配置就能搭建一套低延迟直播系统，浏览器端无需任何插件，延迟轻松<500ms。这套方案非常适合：
- 无人机/车第一视角直播
- 远程医疗手术示教
- 在线互动课堂
- 直播连麦等场景
如果你正在寻找一个轻量、可靠的低延迟直播方案，不妨试试MediaMTX。它的配置灵活，社区活跃，未来还会支持更多协议（如WebTransport），值得持续关注。
赶快动手搭建你的第一个WebRTC直播流吧！
本人为原创，转载请注明出处。如果你有任何问题或经验分享，欢迎在评论区留言。
![[前后端系统开发教程]第四节-前端多平台部署的终极解决方案](https://qiniu.meowparty.cn/coder.2023/2026-04-07/cover_1775503917864_849fcba0b1ad4331bb85cc95a10ed33c.png)