如何在浏览器中以最低延迟播放RTSP视频？监控厂商推流方案问询

一、RTSP转WebRTC（当前最优低延迟方案） #

监控摄像头普遍输出RTSP流，但浏览器不原生支持，厂商主要通过后端转码网关实现RTSP到WebRTC的转换，核心逻辑如下：

• 后端部署媒体转码服务：基于FFmpeg+libwebrtc或自研媒体服务器（如Janus、Mediasoup），先拉取摄像头的RTSP流，解码后重新编码为WebRTC兼容的VP8/VP9/H.264格式。
• 信令协商与流传输：通过WebSocket或HTTP完成SDP交换（确定双方媒体能力、网络地址），建立PeerConnection后，媒体流通过UDP直推到浏览器，延迟通常能控制在100ms以内。
• 关键优化点：
  • 启用硬件加速编码/解码，降低转码延迟和CPU负载；
  • 开启WebRTC的NACK（丢包重传）、FEC（前向纠错）机制，适配不稳定网络；
  • 针对监控场景调整编码参数，比如减少B帧数量、降低编码冗余，进一步压缩端到端延迟。
• 基础转码命令示例（FFmpeg）：

  ffmpeg -i rtsp://[摄像头IP]/stream -c:v libvpx-vp8 -b:v 500k -f rtp rtp://[媒体服务器IP]:[端口]
  

  注：实际部署需结合WebRTC媒体服务器完成完整的信令交互和流转发。

二、WebSocket传输原始图像帧方案 #

如果不想依赖WebRTC的复杂栈，厂商也可通过WebSocket传输压缩后的图像帧，实现准实时推流：

• 后端处理流程：拉取RTSP流后，解码为原始图像（RGB/YUV），压缩为JPEG/WEBP格式，通过WebSocket分批次发送二进制帧。
• 前端渲染逻辑：监听WebSocket的二进制消息，将接收的Blob数据转换为临时URL，更新<img>或<canvas>的src属性，实现画面刷新。
• 核心优化细节：
  • 控制发送帧率（15-30fps）和单帧大小，避免WebSocket拥塞；
  • 采用帧间差异编码（只发送变化区域），减少数据传输量；
  • 前端用requestAnimationFrame同步渲染，避免画面卡顿。
• 代码示例：
  后端（Node.js+fluent-ffmpeg）：

  const WebSocket = require('ws');
  const ffmpeg = require('fluent-ffmpeg');
  const wss = new WebSocket.Server({ port: 8080 });
  
  wss.on('connection', (ws) => {
    const stream = ffmpeg('rtsp://[摄像头IP]/stream')
      .outputFormat('image2pipe')
      .videoCodec('mjpeg')
      .size('640x480')
      .pipe();
    
    stream.on('data', (chunk) => {
      ws.send(chunk, { binary: true });
    });
  });
  

  前端：

  const ws = new WebSocket('ws://[服务器IP]:8080');
  const img = document.getElementById('camera-feed');
  
  ws.binaryType = 'blob';
  ws.onmessage = (event) => {
    const blobUrl = URL.createObjectURL(event.data);
    img.src = blobUrl;
    URL.revokeObjectURL(blobUrl); // 及时释放内存
  };
  

三、厂商额外优化手段 #

• 硬件级WebRTC支持：部分高端摄像头内置WebRTC模块，可直接输出WebRTC流，跳过RTSP转码环节，延迟更低；
• P2P模式：内网场景下，通过WebRTC的ICE协商建立摄像头与浏览器的直接连接，减少中转服务器的延迟；
• QUIC协议优化：结合HTTP/3的QUIC协议传输媒体数据，提升弱网环境下的传输稳定性。

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