Chrome中MediaSource的CHUNK_DEMUXER_ERROR_APPEND_FAILED错误如何解决？

针对你遇到的高码率YouTube音视频流合并播放报错、下载节流问题，以下是具体的修复建议：

1. 修复SourceBuffer的Chunk追加逻辑 #

原代码的write方法未处理chunk队列和错误场景，容易导致高码率流的chunk顺序混乱或丢失。改用队列化+异步等待的方式，确保chunk按顺序可靠追加：

const streamToSourceBuffer = async (url, sourceBuffer) => {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const chunkQueue = [];
  let isProcessing = false;

  const processQueue = async () => {
    if (isProcessing || chunkQueue.length === 0) return;
    isProcessing = true;
    const chunk = chunkQueue.shift();
    try {
      // 等待当前更新完成再追加
      if (sourceBuffer.updating) {
        await new Promise(resolve => {
          sourceBuffer.addEventListener('updateend', resolve, { once: true });
          sourceBuffer.addEventListener('error', resolve, { once: true });
        });
      }
      await sourceBuffer.appendBuffer(chunk);
    } catch (err) {
      console.error('Chunk追加失败:', err);
    } finally {
      isProcessing = false;
      processQueue();
    }
  };

  // 读取流并加入队列
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    chunkQueue.push(value);
    processQueue();
  }
};

2. 处理高码率流的Chunk完整性问题 #

高码率视频流的MP4块可能被fetch拆分为零散小chunk，导致SourceBuffer解析失败。使用mp4box.js将零散chunk拼接为完整可解析的MP4段：

import MP4Box from 'mp4box';

const streamToSourceBuffer = async (url, sourceBuffer) => {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const mp4boxFile = MP4Box.createFile();
  let offset = 0;

  // 监听完整MP4段生成事件
  mp4boxFile.onSegment = (_, segment) => {
    const chunk = new Uint8Array(segment.data.byteLength);
    segment.data.copy(chunk);
    
    // 追加完整段到SourceBuffer
    if (!sourceBuffer.updating) {
      sourceBuffer.appendBuffer(chunk);
    } else {
      sourceBuffer.addEventListener('updateend', () => {
        sourceBuffer.appendBuffer(chunk);
      }, { once: true });
    }
  };

  // 读取流并喂给mp4box处理
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      mp4boxFile.flush();
      break;
    }
    value.fileStart = offset;
    mp4boxFile.appendBuffer(value);
    offset += value.byteLength;
  }
};

3. 对齐音视频时间戳 #

YouTube高码率流的音视频时间戳可能存在偏移，导致解析错误。可以通过timestampOffset手动对齐：

mediaSource.onsourceopen = async () => {
  if (mediaSource.sourceBuffers.length >= 2) return;

  const audioBuffer = mediaSource.addSourceBuffer(audioFormat.mimeType);
  const videoBuffer = mediaSource.addSourceBuffer(videoFormat.mimeType);

  // 示例：假设已通过mp4box获取到音视频初始时间戳
  // const audioStartTs = await getInitialTimestamp(audioFormat.url);
  // const videoStartTs = await getInitialTimestamp(videoFormat.url);
  // if (videoStartTs > audioStartTs) {
  //   audioBuffer.timestampOffset = videoStartTs - audioStartTs;
  // } else {
  //   videoBuffer.timestampOffset = audioStartTs - videoStartTs;
  // }

  streamToSourceBuffer(audioFormat.url, audioBuffer);
  streamToSourceBuffer(videoFormat.url, videoBuffer);
};

4. 解决并发下载节流问题 #

• 给视频请求设置更高优先级，避免被音频抢占带宽：

fetch(url, { priority: 'high' }) // 视频用high，音频用medium

• 确认请求使用HTTP/2协议（Chrome DevTools网络标签查看协议列），HTTP/1.1的并发连接数限制更严格。

5. 增强错误调试 #

添加SourceBuffer的错误监听，获取更详细的报错信息：

audioBuffer.addEventListener('error', (e) => {
  console.error('音频SourceBuffer错误:', e);
  console.error('错误详情:', audioBuffer.error);
});

videoBuffer.addEventListener('error', (e) => {
  console.error('视频SourceBuffer错误:', e);
  console.error('错误详情:', videoBuffer.error);
});

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