问题分析与解决方案 #

一、接收端MediaRecorder+MSE无法正常回放的原因

你遇到的问题核心在于WebRTC接收流的特性与MediaRecorder/MSE的适配冲突，具体几点：

1. 时间基准不匹配
   WebRTC传输的媒体帧时间戳基于NTP网络时钟，而MediaRecorder录制本地流时用的是本地系统时钟，两者时间基准不一致。这会导致接收端录制生成的WebM片段时间戳不连续，MSE的SourceBuffer无法正确拼接成可播放的完整流，最终只能显示零星几帧。

2. SourceBuffer异步处理未被正确处理
   你的代码中在ondataavailable事件里直接调用sourceBuffer.appendBuffer，但SourceBuffer是异步处理数据的——如果前一次appendBuffer还未完成（未触发updateend事件）就追加新数据，浏览器会静默失败，后续片段无法写入缓冲区。

3. 流轨道激活时机问题
   pc2.onaddstream触发时，WebRTC的媒体轨道可能还处于"pending"状态，并未真正开始传输有效数据。此时启动MediaRecorder会录制到空的初始片段，直接破坏了整个流的完整性。

二、避开MediaRecorder的延迟播放方案

要实现10秒左右的延迟回放，直接缓存媒体帧是更可靠的方案，无需经过转码步骤。这里提供两种实现方式：

方案1：基于VideoFrame的现代浏览器方案（推荐）

利用MediaStreamTrackProcessor和MediaStreamTrackGenerator直接操作原始帧，性能损耗极低：

function createDelayedStream(sourceStream, delayMs = 10000) {
  const videoTrack = sourceStream.getVideoTracks()[0];
  const processor = new MediaStreamTrackProcessor(videoTrack);
  const reader = processor.readable.getReader();
  const frameQueue = [];

  // 创建输出轨道与流
  const generator = new MediaStreamTrackGenerator({ kind: 'video' });
  const writer = generator.writable.getWriter();
  const outputStream = new MediaStream([generator]);

  // 读取原始帧并加入队列
  async function readFrames() {
    while (true) {
      const result = await reader.read();
      if (result.done) break;
      const frame = result.value;
      frameQueue.push({ frame, enqueueTime: performance.now() });
    }
  }

  // 延迟输出队列中的帧
  async function writeFrames() {
    while (true) {
      if (frameQueue.length === 0) {
        await new Promise(resolve => setTimeout(resolve, 10));
        continue;
      }

      const { frame, enqueueTime } = frameQueue[0];
      const elapsed = performance.now() - enqueueTime;
      if (elapsed >= delayMs) {
        frameQueue.shift();
        try {
          await writer.write(frame);
          frame.close(); // 释放资源
        } catch (e) {
          console.error('写入帧失败:', e);
          break;
        }
      } else {
        await new Promise(resolve => setTimeout(resolve, delayMs - elapsed));
      }
    }
  }

  readFrames();
  writeFrames();
  return outputStream;
}

// 使用方式
pc2.onaddstream = (evt) => {
  videoC.srcObject = evt.stream;
  videoC.play();
  
  // 创建10秒延迟的流
  const delayedStream = createDelayedStream(evt.stream, 10000);
  videoD.srcObject = delayedStream;
  videoD.play();
};

该方案支持Chrome/Edge 94+、Firefox 106+，延迟精确可控，无转码损耗。

方案2：基于Canvas的兼容方案

如果需要兼容旧浏览器，可以用Canvas捕获并缓存帧：

function createDelayedStreamCanvas(sourceStream, delayMs = 10000) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const sourceVideo = document.createElement('video');
  sourceVideo.srcObject = sourceStream;
  sourceVideo.play();

  // 匹配视频尺寸
  sourceVideo.onloadedmetadata = () => {
    canvas.width = sourceVideo.videoWidth;
    canvas.height = sourceVideo.videoHeight;
  };

  const frameQueue = [];
  const outputStream = canvas.captureStream(30); // 匹配原帧率

  // 捕获帧到队列
  setInterval(() => {
    if (sourceVideo.readyState >= 2) {
      ctx.drawImage(sourceVideo, 0, 0);
      const frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
      frameQueue.push({ frame, time: Date.now() });
    }
  }, 1000/30);

  // 延迟绘制帧
  setInterval(() => {
    while (frameQueue.length > 0) {
      const { frame, time } = frameQueue[0];
      if (Date.now() - time >= delayMs) {
        ctx.putImageData(frame, 0, 0);
        frameQueue.shift();
      } else {
        break;
      }
    }
  }, 1000/30);

  return outputStream;
}

三、WebRTC Playout-Delay扩展的用法与适用性

WebRTC的playout-delay扩展通过调整接收端抖动缓冲区实现延迟控制，具体用法如下：

1. 启用并协商扩展

const pc = new RTCPeerConnection({
  sdpSemantics: 'unified-plan',
});

// 注册playout-delay扩展（Chrome/Edge推荐方式）
await pc.addTransceiver('video', {
  direction: 'recvonly',
  sendEncodings: [{
    playoutDelay: {
      min: 10000, // 最小延迟10秒
      max: 10000  // 固定延迟10秒
    }
  }]
});

// 手动修改SDP（备用方案）
pc.createOffer().then(offer => {
  const modifiedSDP = offer.sdp.replace(
    /a=mid:video\r\n/,
    'a=mid:video\r\na=extmap:2 urn:ietf:params:rtp-hdrext:playout-delay\r\n'
  );
  offer.sdp = modifiedSDP;
  return pc.setLocalDescription(offer);
});

2. 适用性分析

• 优势：由WebRTC底层控制，性能最优，无需额外客户端处理
• 限制：
  • 浏览器支持：Chrome/Edge支持较好，Firefox支持有限
  • 延迟上限：多数浏览器对抖动缓冲区的最大延迟有约束，部分可能无法支持10秒级延迟
  • 场景局限：该扩展原本用于优化实时通信的抖动问题，无法支持暂停、拖拽进度等灵活操作，不太适合高尔夫挥杆复盘这类需要事后回看的场景

总结

• 若需要精确的10秒延迟回放且需灵活控制（如暂停、回看），推荐使用手动缓存VideoFrame的方案，彻底避开MediaRecorder的兼容性问题
• 若追求极致性能且浏览器环境可控（如仅支持Chrome/Edge），可以尝试playout-delay扩展，但需提前测试是否支持10秒延迟设置

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