WebSocket视频流仅显示首帧后冻结问题排查与解决

核心原因 #

1. SourceBuffer更新冲突：当前代码收到WebSocket数据就直接调用appendBuffer，但如果SourceBuffer正处于updating状态（即正在处理上一块数据），此时调用会触发错误，导致后续数据无法写入，视频因此卡住。后端攒700KB再发送时，数据间隔足够长，前端有时间处理完上一块，所以能短暂播放。
2. 无数据缓冲队列：没有维护待处理数据的队列，当SourceBuffer忙时，新数据无法被处理，直接丢失，导致后续帧缺失。
3. WebM片段不完整：如果后端发送的小Blob不是完整的WebM Cluster/Segment，SourceBuffer无法正确解析后续帧，只能播放第一帧。

解决方案 #

1. 实现缓冲队列避免更新冲突 #

添加一个队列存储待处理的数据，只有当SourceBuffer可用时才从队列中取数据进行append，同时在updateend事件中继续处理队列：

let bufferQueue = [];
let isProcessing = false;

function processQueue() {
  if (isProcessing || !sourceBuffer || sourceBuffer.updating || bufferQueue.length === 0) {
    return;
  }
  isProcessing = true;
  const data = bufferQueue.shift();
  try {
    sourceBuffer.appendBuffer(data);
  } catch (e) {
    console.error('Append buffer failed:', e);
    bufferQueue.unshift(data); // 出错后将数据放回队列重试
  }
}

// 修改WebSocket消息处理逻辑
socket.onmessage = (event) => {
  const arrayU8 = new Uint8Array(event.data);
  if (arrayU8.length === 0) return;
  bufferQueue.push(arrayU8);
  processQueue();
};

// 更新updateend事件处理
sourceBuffer.addEventListener('updateend', () => {
  isProcessing = false;
  if (mediaSource.readyState === 'open' && !video.paused) {
    video.play();
  }
  processQueue(); // 继续处理队列中的下一块数据
});

2. 确保后端发送完整的WebM片段 #

WebM视频必须以完整的Cluster（包含一帧或多帧）为单位发送，后端不能随意切割二进制流。如果是从视频文件读取发送，需要解析WebM结构，确保每次发送的是完整的Cluster，而不是固定大小的切片。

3. 设置SourceBuffer为序列模式 #

将SourceBuffer的mode设为'sequence'，确保数据按顺序正确拼接：

sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vp8"');
sourceBuffer.mode = 'sequence'; // 启用序列模式

4. 增强错误处理 #

在appendBuffer时添加try-catch，避免单个错误导致整个流中断，并打印详细错误信息便于排查：

// 在processQueue的try-catch中处理
try {
  sourceBuffer.appendBuffer(data);
} catch (e) {
  console.error('Append buffer error details:', e);
  // 可根据错误类型做进一步处理，比如清空队列重连
}

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