如何将Webcam采集的视频帧发送至服务器处理后返回浏览器实时展示

问题1：更高效的视频帧采集方法 #

原实现帧率低、报DOM错误的核心原因有三个：一是变量定义错误（代码里赋值strm却调用stream）导致轨道状态异常；二是setInterval计时不准，和摄像头采集时钟不同步；三是ImageCapture性能不如Canvas直接抓帧，且没有做帧压缩导致传输耗时极高。
优化方案如下：

• 给getUserMedia明确指定帧率约束，强制摄像头输出20~30FPS的视频流
• 用requestVideoFrameCallback替代setInterval，和视频渲染时钟完全同步，不会出现重复采集或丢帧
• 用Canvas直接抓帧并压缩为webp/jpeg格式，体积比原始帧小80%以上，大幅降低传输耗时
• 增加发送锁，避免上一帧未发送完成就采集下一帧导致的队列堆积

优化后的采集代码：

let isSending = false;
const TARGET_FPS = 25;
navigator.mediaDevices.getUserMedia({ 
  video: { width: 1280, height: 720, frameRate: { ideal: TARGET_FPS, max: TARGET_FPS } } 
})
.then((stream) => {
  myVideo.srcObject = stream;
  // 等待视频元数据加载完成再启动采集，避免轨道状态报错
  myVideo.onloadedmetadata = () => {
    myVideo.play();
    // 用原生视频帧回调同步采集
    function captureFrame() {
      if (!isSending && ws.readyState === WebSocket.OPEN) {
        isSending = true;
        // 离屏Canvas抓帧性能更高
        const canvas = new OffscreenCanvas(myVideo.videoWidth, myVideo.videoHeight);
        const ctx = canvas.getContext('2d');
        ctx.drawImage(myVideo, 0, 0);
        // 转webp格式，0.8的质量平衡清晰度和体积
        canvas.convertToBlob({ type: 'image/webp', quality: 0.8 })
          .then(blob => ws.send(blob))
          .finally(() => isSending = false);
      }
      myVideo.requestVideoFrameCallback(captureFrame);
    }
    captureFrame();
  };
});

该方案采集+编码单帧耗时一般在5ms以内，完全可以满足25FPS的要求。

问题2：流畅展示服务端返回的视频帧 #

原实现卡顿的核心原因是来一帧就画一帧，网络抖动时会出现帧堆积，且每次clearRect会带来不必要的重绘开销。
优化方案如下：

• 新增帧缓存机制，只保留最新的返回帧，用requestAnimationFrame统一驱动绘制，和浏览器刷新频率完全同步
• 去掉clearRect操作，drawImage会直接覆盖原有像素，减少重绘开销

优化后的渲染代码：

let latestFrame = null;
// 仅存储最新的返回帧
ws.onmessage = (message) => {
  latestFrame = message.data;
};
// 用浏览器刷新时钟驱动渲染
function renderLoop() {
  if (latestFrame) {
    createImageBitmap(latestFrame).then(img => {
      previewCtx.drawImage(img, 0, 0, previewCtx.canvas.width, previewCtx.canvas.height);
      latestFrame = null;
    });
  }
  requestAnimationFrame(renderLoop);
}
renderLoop();

如果性能要求更高，可以用OffscreenCanvas在Worker线程处理解码和绘制，避免阻塞主线程。

问题3：降低端到端延迟的优化方案 #

传输层优化 #

• WebSocket强制使用二进制帧传输，禁止转base64，可减少33%的体积开销
• 服务端开启WebSocket的permessage-deflate压缩，同时设置TCP_NODELAY关闭Nagle算法，减少小包传输延迟
• 兼容性允许的情况下用WebTransport替代WebSocket，基于UDP的传输可以降低30%以上的传输延迟

编码优化 #

• 降低非必要的分辨率，比如720p的体积是1080p的一半，编码耗时也低一半
• 优先使用webp编码，相同画质下比jpeg小20%~30%，编码速度也更快
• 可根据网络状况动态调整压缩质量，网络差时降低质量保证帧率

业务逻辑优化 #

• 新增帧丢弃策略：采集时如果上一帧还没发完，直接丢弃当前帧，永远优先传输最新的帧，避免延迟累积
• 服务端处理逻辑改为流式处理，不要做全帧缓存，收到数据立刻处理、处理完立刻回传
• 渲染端如果出现帧堆积，直接丢弃超过100ms的旧帧，只绘制最新的帧，保证画面实时性

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