能否复用MediaSource的createObjectURL生成的Blob URL实现多视频延迟播放？

• 核心限制：MediaSource API的设计规则是一个MediaSource实例只能绑定到单个媒体元素。当你通过URL.createObjectURL(mediaSource)生成URL并关联第一个<video>后，该MediaSource就会与这个元素绑定；再次将同一URL赋值给其他<video>时，浏览器会判定资源已被占用，返回ERR_FILE_NOT_FOUND错误。这是API的固有约束，无法绕过。

虽然无法共享单个MediaSource，但可以优化现有实现，减少冗余操作，同时满足多视频依次延迟播放的需求：

优化后的代码 #

navigator.mediaDevices
  .getUserMedia({ video: true })
  .then((stream) => {
    const mimeType = 'video/webm; codecs="vp8"';
    const delay = 500;
    const numberOfReplicas = 4;

    // 直接用原媒体流创建录制器，无需额外中转video元素
    const recorder = new MediaRecorder(stream, { mimeType });
    const sourceBuffers = [];

    recorder.ondataavailable = async ({ data }) => {
      // 一次性转换为ArrayBuffer，避免重复异步操作
      const buffer = await data.arrayBuffer();
      // 遍历所有SourceBuffer追加数据，跳过正在更新的实例
      sourceBuffers.forEach((sourceBuffer) => {
        if (!sourceBuffer.updating) {
          sourceBuffer.appendBuffer(buffer);
        }
      });
    };

    // 创建多个视频元素及对应的MediaSource
    for (let i = 0; i < numberOfReplicas; i++) {
      const mediaSource = new MediaSource();
      const video = document.createElement('video');
      video.autoplay = false;
      video.muted = true;
      document.body.appendChild(video);
      video.src = URL.createObjectURL(mediaSource);

      mediaSource.addEventListener('sourceopen', () => {
        const sourceBuffer = mediaSource.addSourceBuffer(mimeType);
        sourceBuffers.push(sourceBuffer);

        // 按序号设置延迟播放
        setTimeout(() => {
          video.play().catch(err => console.error('播放失败:', err));
        }, delay * (i + 1));
      }, { once: true });
    }

    recorder.start(200);
  })
  .catch(err => console.error('获取媒体流失败:', err));

优化点说明 #

1. 移除冗余中转元素：直接使用getUserMedia返回的流创建MediaRecorder，省去额外的<video>中转，减少DOM操作和资源占用。
2. 统一数据转换：在ondataavailable中只执行一次data.arrayBuffer()转换，避免多次异步操作带来的性能损耗。
3. 增加错误处理：为video.play()添加catch逻辑，便于排查播放失败问题。
4. 适配自动播放策略：设置video.muted = true，符合浏览器自动播放的静音要求，避免播放被拦截。

如果想进一步减少MediaSource的使用数量，可以尝试基于Canvas帧捕获的方案：

• 使用Canvas实时绘制摄像头画面，将每一帧存入时间戳缓存队列。
• 为每个延迟播放的<video>创建独立定时器，从缓存队列中取出对应延迟时间的帧，绘制到Canvas后通过Canvas流传递给<video>。
  这种方式无需多个MediaSource和MediaRecorder，但需要处理帧同步和性能损耗问题，适合低延迟场景。

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