Gstreamer输出H264流在MediaSource SourceBuffer解码报错排查

核心问题 #

浏览器的MediaSource API 不支持直接接收裸H.264码流，它要求输入的是**MP4封装的分片（fMP4，Fragmented MP4）**数据。你当前从Gstreamer appsink获取的是裸H.264 AU（Access Unit）单元，Android端解码器可直接处理裸流，但浏览器的SourceBuffer必须依赖MP4容器结构解析时序、编解码参数等信息，直接追加裸流会触发格式解析错误。

具体修复步骤 #

1. 修改Gstreamer管道，输出Fragmented MP4流

在h264parse后添加mp4mux并配置分片模式，让Gstreamer直接输出浏览器兼容的fMP4格式：

... ! videoenc ! queue ! h264parse ! mp4mux fragment-duration=1000 ! appsink caps=video/mp4

• fragment-duration=1000：设置每1000ms生成一个MP4分片，确保流可逐段追加到SourceBuffer。
• 最终appsink输出完整的MP4分片数据，而非裸H.264 AU。

2. 前端代码优化：确保append时机正确

避免在SourceBuffer处于updating状态时调用appendBuffer，封装异步函数处理时序：

async function appendMP4Chunk(chunk) {
  // 等待当前更新完成
  while (this.sourceBuffer.updating) {
    await new Promise(resolve => {
      this.sourceBuffer.addEventListener('updateend', resolve, { once: true });
    });
  }
  try {
    this.sourceBuffer.appendBuffer(chunk);
  } catch (err) {
    console.error('追加分片失败:', err);
  }
}

// 替换原有的appendBuffer调用
appendMP4Chunk.call(this, received_stream_from_app_sink);

3. 验证codecs参数匹配

你使用的avc1.424014对应H.264 Baseline Profile Level 2.0，需确保Gstreamer生成的流参数完全匹配：

• 可通过Gstreamer的h264parse输出日志，或ffprobe等工具检查流的profile和level，确认与avc1.424014一致。

额外排查点 #

若修改管道后仍有问题，检查以下内容：

• 确认received_stream_from_app_sink接收的是完整MP4分片，无截断或字节错误。
• 确保MediaSource的sourceopen事件在视频元素加载完成后触发，避免时序混乱。

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