从MediaSource流中途获取数据无法解析视频问题求助

核心问题分析 #

你的问题本质是MediaSource解码器需要从关键帧（Keyframe）开始解析视频流，同时现有代码存在两个致命逻辑错误：

1. 数据队列处理顺序颠倒，导致片段播放顺序混乱
2. 仅允许从流的起始（index=0）开始接收，无法识别中途的关键帧

分步修复方案 #

1. 修复数据队列的顺序问题 #

你的channelFactory中使用pop()获取数据，这会导致先进的数据被最后处理，完全颠倒了视频片段的顺序，解码器根本无法正确拼接流。必须改成先进先出的shift()：

const channelFactory = function () {
    const _arrayBufferBuffer = []
    const pullResolveQueue = []

    return {
        push: (ab) => {
            if (pullResolveQueue.length > 0) {
                // 取最早等待的resolve，保证顺序
                const pull = pullResolveQueue.shift()
                pull(ab)
            } else {
                _arrayBufferBuffer.push(ab)
            }
        },
        pull: () => new Promise((res, rej) => {
            if (_arrayBufferBuffer.length > 0) {
                // 取最早缓冲的数据，保证播放顺序正确
                res(_arrayBufferBuffer.shift())
            }
            pullResolveQueue.push(res)
        })
    }
}

2. 支持中途接收关键帧 #

服务器端需要在视频片段中标记是否为关键帧（比如给video-data事件的返回对象增加isKeyframe字段），客户端修改接收逻辑，不再等待index=0，而是等待最近的关键帧：

var lastIndex = -1
var partBuffer = []
var playing = false;

connection.on('video-data', async (r) => {
    if (r.part.length === 0) return;

    // 未开始播放时，只接受关键帧开头的片段
    if (!playing && !r.isKeyframe) return;
    playing = true;

    // 处理index回绕（比如直播流循环重置index）
    if (lastIndex >= r.index) {
        const ba = base64js.toByteArray(partBuffer.join(''));
        channel.push(ba.buffer);
        partBuffer = [];
    }

    partBuffer.push(r.part);
    lastIndex = r.index;

    // 关键帧片段直接推送，确保解码器能从关键帧开始解析
    if (r.isKeyframe) {
        const ba = base64js.toByteArray(partBuffer.join(''));
        channel.push(ba.buffer);
        partBuffer = [];
    }
})

3. 调整MediaSource的配置和错误处理 #

直播流更适合使用segments模式，同时增加错误监听和自动重试逻辑，避免单次错误导致整个流崩溃：

const mediaSource = new MediaSource();

function initMediaSource() {
    const newMediaSource = new MediaSource();
    
    newMediaSource.addEventListener('sourceopen', async () => {
        const sourceBuffer = newMediaSource.addSourceBuffer(webm9MimeCodec);
        // segments模式支持追加带时间戳的不连续片段，更适合直播场景
        sourceBuffer.mode = 'segments';
        
        // 监听缓冲错误，及时重置
        sourceBuffer.addEventListener('error', (e) => {
            console.error('SourceBuffer解析错误:', e);
            newMediaSource.endOfStream();
            videoTarget.src = '';
            // 重新初始化MediaSource
            initMediaSource();
        });

        const appendNextChunk = async () => {
            try {
                // 等待当前缓冲更新完成
                if (sourceBuffer.updating) {
                    await new Promise(res => sourceBuffer.addEventListener('updateend', res, { once: true }));
                }
                const ab = await channel.pull();
                sourceBuffer.appendBuffer(ab);
                appendNextChunk();
            } catch (err) {
                console.error('追加片段失败:', err);
            }
        };

        appendNextChunk();
        
        // 自动播放（需处理浏览器自动播放策略）
        if (videoTarget.paused) {
            videoTarget.play().catch(err => console.error('自动播放失败:', err));
        }
    });

    videoTarget.src = URL.createObjectURL(newMediaSource);
}

// 初始化
initMediaSource();

额外注意事项 #

• 确保服务器端发送的视频片段包含完整的关键帧和对应的元数据（比如WebM的Cluster块必须从关键帧开始）
• 浏览器的自动播放策略需要用户交互触发，建议在页面增加播放按钮，避免自动播放失败
• 可以在客户端增加时间戳同步逻辑，确保片段的时间戳连续，避免播放卡顿

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