为何sourceBuffer的appendBuffer方法调用失败？求技术排查帮助

我不确定自己遗漏了什么内容，能否有人帮我排查sourceBuffer的appendBuffer方法调用失败的原因？我已为错误事件设置了监听器，但未获取到有效排查信息。

我的代码： #

const videoElement = document.getElementById("vid1");
const mediaSource = new MediaSource();
videoElement.src = URL.createObjectURL(mediaSource);

let sourceBuffer;

mediaSource.addEventListener('sourceopen', () => {
    sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E,mp4a.40.2"');

    sourceBuffer.addEventListener('error', function(event) {
        console.error('Error occurred while appending buffer:', event);
    });

    fetch('http://localhost:3000/dashTest')
        .then(response => response.arrayBuffer())
        .then(buffer => {
            const file = new Uint8Array(buffer);
            const chunkSize = 10 * 1024 * 1024; // 10 MB
            let offset = 0;

            const appendChunks = async () => {
                // console.log(mediaSource.readyState, sourceBuffer.updating, offset < file.length);
                if (mediaSource.readyState === 'open' && !sourceBuffer.updating && offset < file.length) {
                    const chunk = file.slice(offset, offset + chunkSize);
                    const chunkBlob = await new Blob([chunk], { type: 'video/mp4' });//.arrayBuffer();
                    const chunkUrl = URL.createObjectURL(chunkBlob);
                    console.log(mediaSource.readyState);
                    //ISSUE: this append is failing
                    sourceBuffer.appendBuffer(chunk)
                    offset += chunkSize;
                } else if (offset >= file.length) {
                    console.log('end of stream');
                    mediaSource.endOfStream();
                }
            };

            // add event listener for updateend event
            sourceBuffer.addEventListener('updateend', async () => {
                await appendChunks();
            });

            // call appendChunks to start appending data
            appendChunks();
        });
});

可能的排查方向： #

• 分片边界不符合MP4格式要求：直接按固定10MB切割MP4文件会破坏MP4的原子结构（moov、mdat等），MSE要求每个append的片段必须是可独立解析的媒体段。你可以用ffmpeg将原MP4转成符合MSE标准的fMP4分段，或者先验证分片是否刚好落在MP4的原子边界上。
• 多余的Blob转换操作：代码里把Uint8Array转成Blob完全没必要，appendBuffer直接支持TypedArray作为参数，改成sourceBuffer.appendBuffer(chunk.buffer)试试，避免转换过程中出现问题。
• 补充错误监听渠道：仅监听sourceBuffer的error事件不够，还要监听MediaSource和video元素的error事件，能获取更完整的错误信息：

  mediaSource.addEventListener('error', e => console.error('MediaSource错误:', e));
  videoElement.addEventListener('error', e => console.error('Video元素错误:', e));
  

• 验证编解码器匹配度：确认你设置的codecs参数avc1.42E01E,mp4a.40.2和实际视频文件的编解码器完全一致。可以用ffprobe查看文件编码信息，若不匹配，SourceBuffer会拒绝接收数据。
• 检查请求完整性：在浏览器Network标签里查看fetch请求的返回是否完整，状态码是否为200，排除跨域或数据截断的问题。
• 增加异常捕获：在appendBuffer调用处添加try-catch，直接捕获异常信息：

  try {
    sourceBuffer.appendBuffer(chunk.buffer);
  } catch (e) {
    console.error('Append失败详情:', e);
  }
  

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