如何将Socket接收的Blob流追加至视频播放并消除源切换卡顿

现有实现的卡顿根源 #

你当前的实现逻辑存在必然的性能损耗：

• 每收到一个Socket分片，就会把所有历史Blob重新拼接为一个全量新Blob
• 每次拼接完成都要重新生成objectURL、强制替换video.src，同时手动重置播放进度
• 这个流程会触发浏览器对视频源的全量重新解析：哪怕只是末尾多了几KB的分片，浏览器也要重新读取整个文件的元信息、解码头部、执行一次播放跳转，卡顿就是这么来的

最优实现方案：采用Media Source Extensions（MSE）实现无缝流追加 #

MSE是浏览器原生提供的音视频流拼接能力，专门适配“边接收分片、边无缝播放”的场景，完全不需要反复替换视频源地址。
适配你现有Socket逻辑的代码实现：

const socket = io();
const videoGrid = document.getElementById("video-grid");
const video = document.createElement("video");
video.muted = true;
videoGrid.append(video);

// 初始化MSE实例，视频源仅在初始化时设置一次
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
let sourceBuffer;
// 和你之前使用的视频编码格式保持一致
const mimeCodec = 'video/x-matroska;codecs=avc1,opus';

// 等待MSE通道就绪后初始化分片写入缓冲区
mediaSource.addEventListener('sourceopen', async () => {
  sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
  // 按接收顺序自动排列分片时间轴，不需要手动计算偏移
  sourceBuffer.mode = 'sequence';
});

socket.on("view-stream-10", (data) => {
  const chunk = new Uint8Array(data);
  // 避免上一个分片还在写入时堆积过多任务
  if (!sourceBuffer.updating && sourceBuffer) {
    try {
      // 直接追加收到的分片到播放缓冲区，不修改video.src
      sourceBuffer.appendBuffer(chunk);
      // 清理已经播放过的旧分片，避免内存持续上涨
      if (sourceBuffer.buffered.length > 0) {
        const cleanUpStart = 0;
        const cleanUpEnd = sourceBuffer.buffered.end(0) - 10; // 保留最近10秒的播放缓冲
        if (cleanUpEnd > cleanUpStart) {
          sourceBuffer.remove(cleanUpStart, cleanUpEnd);
        }
      }
      // 自动触发播放，不需要手动重置播放进度
      video.play();
    } catch (err) {
      // 捕获分片写入异常，避免Socket流中断
      console.warn('音视频分片写入失败', err);
    }
  }
});

这个方案的性能优势 #

• video.src全程只设置一次，后续所有分片都通过MSE通道直接写入播放缓冲区，完全不会触发全量源重载
• 浏览器自动维护连续的播放时间轴，不需要手动记录、重置currentTime，播放进度完全连续，没有跳转卡顿
• 内置的旧分片清理逻辑可以避免长时间播放带来的内存泄漏，和原生流媒体播放器的行为一致

非MSE场景的兜底优化 #

如果因为兼容性问题无法使用MSE，至少需要调整现有逻辑的几个关键点，把卡顿降到最低：

• 不要每收到一个分片就立刻更新src：攒够100~200KB的分片量再生成一次新的Blob和objectURL，大幅减少src重设的频率
• 每次生成新的objectURL后，必须调用URL.revokeObjectURL(旧地址)释放之前的资源，避免内存持续上涨导致的性能劣化
• 不要在设置src之后立刻修改currentTime：等待video触发loadedmetadata事件后再同步播放进度，减少不必要的seek流程

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