如何用GStreamer实现低延迟网络视频流？机器人Web UI多流需求

针对你遇到的UDP包过大、Node.js解RTP困难、MediaMTX延迟高的问题，以下是三个可行的低延迟方案：

方案一：WebRTC直连（最低延迟，推荐） #

WebRTC专为实时音视频设计，延迟通常在100ms以内，仅需STUN服务器做NAT穿透，无需中间服务器中转，完美适配Web端。

发送端（GStreamer管道） #

针对单路JPEG或H.264流，使用webrtcbin直接推流：

# H.264编码（压缩率更高，适合网络传输）
gst-launch-1.0 v4l2src device=/dev/video0 ! videoconvert ! x264enc tune=zerolatency bitrate=800000 key-int-max=30 ! rtph264pay config-interval=1 ! webrtcbin name=sendrecv stun-server=stun://stun.l.google.com:19302

# JPEG编码（无需解码，适合低性能设备）
gst-launch-1.0 v4l2src device=/dev/video0 ! image/jpeg,width=640,height=480,framerate=30/1 ! rtpjpegpay ! webrtcbin name=sendrecv stun-server=stun://stun.l.google.com:19302

Web端接收（浏览器WebRTC API） #

直接在前端代码中创建RTCPeerConnection，与GStreamer的webrtcbin交换SDP信令即可接收流：

const pc = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] });
pc.ontrack = e => { document.getElementById('video').srcObject = e.streams[0]; };

// 交换SDP信令（需通过WebSocket或HTTP传递GStreamer生成的offer/answer）
async function initStream() {
  const offer = await pc.createOffer();
  await pc.setLocalDescription(offer);
  // 将offer发送给GStreamer端，获取answer后设置remoteDescription
}

多路流处理：为每个摄像头分配独立的webrtcbin实例和信令通道，或在单个WebRTC连接中添加多路轨。

方案二：RTP/UDP + GStreamer WASM浏览器解封装 #

解决你之前UDP包过大的问题：用GStreamer的RTP负载插件自动分包，同时在浏览器端用GStreamer WASM直接解封装，无需Node.js中转，延迟接近UDP直连。

发送端（GStreamer管道，自动分包） #

使用rtpjpegpay（JPEG）或rtph264pay（H.264）处理大帧，避免UDP包过大错误：

# JPEG流自动分包
gst-launch-1.0 v4l2src device=/dev/video0 ! image/jpeg,width=640,height=480,framerate=30/1 ! rtpjpegpay ! udpsink host=0.0.0.0 port=8123

# H.264流自动分包
gst-launch-1.0 v4l2src device=/dev/video0 ! videoconvert ! x264enc tune=zerolatency ! rtph264pay config-interval=1 ! udpsink host=0.0.0.0 port=8124

Web端接收（GStreamer WASM） #

在浏览器中加载GStreamer WASM SDK，直接创建管道解封装RTP流：

import * as Gst from 'gstreamer1.js';

async function initGst() {
  await Gst.init();
  const pipeline = Gst.parseLaunch(`udpsrc port=8123 ! application/x-rtp,media=video,encoding-name=JPEG ! rtpjpegdepay ! jpegdec ! webkitvideosink`);
  const sink = pipeline.getByName('webkitvideosink');
  sink.setProperty('video-element', document.getElementById('video'));
  pipeline.setState(Gst.State.PLAYING);
}

多路流处理：为每个流分配不同的UDP端口，创建独立的GStreamer WASM管道。

方案三：优化MediaMTX低延迟配置 #

如果你偏好使用MediaMTX的便捷性，可通过调整配置降低延迟：

1. 优化GStreamer发送端管道 #

增加低延迟参数，减少编码和传输缓冲：

gst-launch-1.0 v4l2src device=/dev/video0 ! videoconvert ! x264enc tune=zerolatency key-int-max=30 bitrate=1000000 ! rtph264pay config-interval=1 ! rtspclientsink location=rtsp://localhost:8554/mystream latency=0

2. 修改MediaMTX配置文件（mediamtx.yml） #

减少缓冲区大小，启用WebRTC低延迟选项：

paths:
  mystream:
    source: rtsp://localhost:8554/mystream
    rtsp:
      readBufferCount: 1  # 减少RTSP读取缓冲区
    webrtc:
      iceServers: [{urls: "stun:stun.l.google.com:19302"}]
      peerConnectionOptions:
        iceTransportPolicy: all
        bundlePolicy: max-bundle
        rtcpMuxPolicy: require
    webrtcReadBufferCount: 1  # 减少WebRTC读取缓冲区

多路流处理：为每个摄像头创建独立的MediaMTX路径（如/stream1、/stream2）。

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