如何播放摄像头 RTSP 链接

正文与配图来自原稿。浏览器不能直接播 RTSP，需网关转 WebRTC。参考：CSDN 相关文、webrtc-streamer。

1、准备摄像头

海康类常见地址形态：

rtsp://USER:PASSWORD@CAMERA_IP:554/Streaming/Channels/101

多通道按 Channels/101、102… 递增。下文示例中的账号密码请换成你自己的，勿把明文密码提交到公开仓库。

2、配置 webrtc-streamer

docker-compose.yml 示例（network_mode: host，统一监听 8000）：

version: "3.8"
services:
  webrtc:
    image: mpromonet/webrtc-streamer
    network_mode: host
    command:
      - -H
      - 0.0.0.0:8000
      - -n
      - cam_lobby
      - -u
      - rtsp://USER:PASSWORD@CAM1_IP:554/Streaming/Channels/101?transportmode=unicast
      - -n
      - cam_warehouse
      - -u
      - rtsp://USER:PASSWORD@CAM2_IP:554/Streaming/Channels/102?transportmode=unicast
      - -s
      - "-"   # 禁用 STUN（内网）
    volumes:
      # 按需挂载自定义 index.html / webrtcstreamer.html
      - ./www:/html:ro

也可用 config.json 统一管理 urls：

{
  "urls": {
    "cam_lobby": {
      "video": "rtsp://USER:PASSWORD@CAM1_IP:554/Streaming/Channels/101?transportmode=unicast"
    }
  }
}

docker compose up -d
docker compose down

3、前端多路切换

用 iframe 打开 /webrtcstreamer.html?cam_xxx，切换前先 about:blank 并加时间戳，避免复用旧 PeerConnection：

<iframe id="player" allow="autoplay; fullscreen" allowfullscreen></iframe>
<script>
  function loadByName(name) {
    player.src = 'about:blank';
    const u = '/webrtcstreamer.html?' + encodeURIComponent(name) + '&ts=' + Date.now();
    setTimeout(() => { player.src = u; }, 50);
  }
</script>

访问示例：http://HOST:8000/index.html、/webrtcstreamer.html?cam_lobby、/api/getMediaList。列表空时检查 RTSP 是否 H.264、密码特殊字符是否 URL 编码。

4、能跑多少路？

无硬上限：不转码时主要吃 CPU（DTLS/SRTP）、带宽、FD。经验：中高配单机、每路 1 观众、子码流 1–2 Mbps，常见稳妥目标约 几十路/实例；多观众线性放大，需多实例或 SFU。建议 -o 保持编码、子码流预览、内网关 STUN、提高 ulimit -n。

5、小结

RTSP → webrtc-streamer → 浏览器；ThingsBoard 仪表盘可用 iframe 嵌首页。Java/Spring 侧编排见 Java 播放 RTSP。