低延迟直播终极方案：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：

bash 复制代码

docker run --rm -it -p 8554:8554 -p 1935:1935 -p 8888:8888 -p 8889:8889 \
  -v $PWD/mediamtx.yml:/mediamtx.yml \
  bluenviron/mediamtx

2. 修改配置文件 mediamtx.yml

MediaMTX的配置文件为YAML格式。关键WebRTC配置段如下：

yaml 复制代码

# WebRTC 服务器配置
webrtc:
  # 监听地址，一般保持0.0.0.0
  listenAddress: :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：

yaml 复制代码

rtmp: true
rtmpAddress: :1935

或者从RTSP拉流：

yaml 复制代码

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封装。

下面是一个最简实现：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <title>WebRTC Low Latency Player</title>
</head>
<body>
    <video id="video" autoplay muted controls></video>
    <script>
        async function playStream() {
            const streamId = 'camera1'; // 替换为你的流名称
            const endpoint = `http://your-server-ip:8889/stream/${streamId}/whep`;

            const pc = new RTCPeerConnection({
                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 = await fetch(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配置段添加：

yaml 复制代码

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直播流吧！

本人为原创，转载请注明出处。如果你有任何问题或经验分享，欢迎在评论区留言。