使用WebSocket传输Blob视频帧实现HTML5直播的问题咨询

这类功能跑不通90%以上是三个核心问题：传输的媒体分片不符合封装规范、SourceBuffer操作时序错误、没有做缓冲队列/内存清理，以下是可直接落地的实现逻辑和排查点。

前置必满足条件 #

不满足以下要求的话，代码逻辑写对了也出不了画面：

• 服务端发送的Blob不能是裸H264/H265帧、不能是单帧图片拼接的二进制块，必须是fMP4（碎片化MP4）或者WebM格式的标准封装分片
• 流的编码参数必须全程固定：视频分辨率、编码Profile/Level、码率，带音频的话采样率、声道数都不能中途变更，否则SourceBuffer会直接抛解码错误
• 提前校验浏览器支持性，用MediaSource.isTypeSupported()判断你用的封装+编码组合是否被支持，常见支持的格式比如video/mp4; codecs="avc1.42E01E"（H264基线档fMP4）、video/webm; codecs="vp8,opus"（VP8+Opus WebM）

可运行实现代码 #

核心注意点：必须等MediaSource的sourceopen事件触发后再操作SourceBuffer，必须做分片追加队列，必须定时清理旧缓冲避免内存溢出。

const videoEl = document.querySelector('video');
const mediaSource = new MediaSource();
// 替换成你实际使用的编码类型
const MIME_CODEC = 'video/mp4; codecs="avc1.42E01E"';
let sourceBuffer = null;
let ws = null;
// 待追加分片队列，解决SourceBuffer忙时不能写入的问题
const pendingChunkQueue = [];

// 绑定MediaSource到video元素
videoEl.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
  if (!MediaSource.isTypeSupported(MIME_CODEC)) {
    console.error('当前浏览器不支持目标媒体格式', MIME_CODEC);
    return;
  }
  sourceBuffer = mediaSource.addSourceBuffer(MIME_CODEC);
  sourceBuffer.mode = 'segments';
  // 绑定SourceBuffer更新完成事件
  sourceBuffer.addEventListener('updateend', handleSourceBufferUpdateEnd);
  // 初始化WebSocket连接
  initWsConnection();
});

function initWsConnection() {
  ws = new WebSocket('替换成你的WebSocket服务地址');
  ws.binaryType = 'blob';

  ws.onmessage = (evt) => {
    const chunk = evt.data;
    // SourceBuffer正在处理上一个分片时，先把新分片塞队列
    if (sourceBuffer.updating) {
      pendingChunkQueue.push(chunk);
      return;
    }
    appendChunkToBuffer(chunk);
  };
}

function appendChunkToBuffer(chunk) {
  sourceBuffer.appendBuffer(chunk);
}

function handleSourceBufferUpdateEnd() {
  // 定时清理已播放的旧缓冲，避免内存溢出、QuotaExceeded错误
  if (videoEl.buffered.length > 0) {
    const bufferedEnd = videoEl.buffered.end(videoEl.buffered.length - 1);
    // 缓冲超过10秒时，清理当前播放时间2秒之前的旧数据
    if (bufferedEnd - videoEl.currentTime > 10) {
      sourceBuffer.remove(0, videoEl.currentTime - 2);
      return;
    }
  }
  // 队列里还有待处理分片就继续追加
  if (pendingChunkQueue.length > 0) {
    const nextChunk = pendingChunkQueue.shift();
    appendChunkToBuffer(nextChunk);
  }
}

高频踩坑排查 #

• 必须先传初始化分片：连接建立后服务端要第一时间发送包含fMP4的moov头、或者WebM头信息的初始化分片，没有这个头，SourceBuffer无法识别后续媒体分片，永远不会出画面。初始化分片只需要发一次，后续发媒体分片即可
• 分片时间戳必须连续：每个媒体分片的PTS/DTS要连续递增，不能跳变、不能重复，否则会出现卡顿、音画不同步、SourceBuffer抛错
• 自动播放限制：如果开启autoplay必须给video标签加muted属性，现代浏览器禁止非静音媒体在无用户交互的情况下自动播放
• 裸流处理：如果服务端只能推裸H264/H265流，不要硬喂MediaSource，要么服务端做fMP4/WebM封装，要么前端改用WebCodecs API直接解码VideoFrame渲染，MediaSource不支持裸流输入
• 不要手动给video设currentTime跳转到未缓冲的位置，直播流场景下会直接触发加载错误

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