使用Caddy反向代理MediaMTX的WebRTC端点遇类型错误问题

核心问题原因 #

1. WebRTC需要同时处理HTTP信令请求和UDP/TCP媒体流，默认Caddy的HTTP反向代理仅支持HTTP请求转发，无法处理UDP媒体流，导致WebRTC建联失败，返回未知文件类型错误。
2. handle_path /relay/*会自动剥离路径前缀，可能导致MediaMTX接收到的请求路径与预期不符（比如请求/relay/cam1会被转成/cam1传递给后端）。

方案1：用Caddy L4层代理支持WebRTC全流量 #

需安装caddy-l4插件实现四层（UDP/TCP）流量转发，兼顾HTTP信令和媒体流：

1. 编译带L4插件的Caddy：

xcaddy build --with github.com/mholt/caddy-l4

2. 修改Caddyfile配置：

{
    servers {
        protocol {
            experimental_http3
        }
    }
}

# 四层代理处理WebRTC的UDP/TCP媒体流
:443 {
    l4 {
        @webrtc_udp {
            protocol udp
            dst_port 443
        }
        forward @webrtc_udp :8889

        @webrtc_tcp {
            protocol tcp
            dst_port 443
            path /relay/*
        }
        forward @webrtc_tcp :8889
    }
}

# HTTP反向代理处理信令
my-server.com {
    handle_path /relay/* {
        @denied not remote_ip forwarded private_ranges
        abort @denied

        # 保留完整请求路径传递给MediaMTX
        reverse_proxy :8889 {
            uri preserve_path
        }
        # 强制设置WebRTC信令的MIME类型
        header Content-Type "application/json; charset=utf-8"
    }
}

方案2：改用HLS流（无需四层代理，更简单） #

如果对延迟要求不高，HLS是更兼容的替代方案：

1. 修改MediaMTX配置文件（mediamtx.yml）开启HLS输出：

paths:
  all:
    source: rtsp://你的RTSP流地址
    hls:
      enable: true
      address: :8889

2. 调整Caddy配置：

my-server.com {
    handle_path /relay/* {
        @denied not remote_ip forwarded private_ranges
        abort @denied

        reverse_proxy :8889 {
            uri preserve_path
        }
        # 设置HLS的MIME类型
        header Content-Type "application/vnd.apple.mpegurl"
        header Access-Control-Allow-Origin "*"
    }
}

3. 前端用hls.js播放（兼容性更好）：

<video id="player" controls width="800"></video>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
const video = document.getElementById('player');
if (Hls.isSupported()) {
  const hls = new Hls();
  hls.loadSource(`https://my-server.com/relay/$cameraID/index.m3u8`);
  hls.attachMedia(video);
}
</script>

方案3：临时路径&MIME修复（仅排查用） #

如果暂时不想折腾L4插件，先修复路径传递和MIME类型：

my-server.com {
    handle_path /relay/* {
        @denied not remote_ip forwarded private_ranges
        abort @denied

        reverse_proxy :8889 {
            uri preserve_path
        }
        header Content-Type "application/json"
    }
}

注意：这个只能解决HTTP信令的问题，WebRTC的UDP媒体流仍无法转发，最终还是会建联失败，仅用于排查路径是否是问题根源。

内容的提问来源于stack exchange，提问作者Abhijit