Chrome 115下WebCodecs的VideoDecoder解析avcC失败，求助解码方案

Chrome 115对WebCodecs的avcC解析逻辑做了更严格的校验，导致你之前硬编码切片位置提取avcC的方式失效。要解决这个问题并实现任意帧解码，需要按以下步骤操作：

1. 正确提取avcC配置数据 #

不要固定切片位置获取avcC，不同MP4文件的box结构位置差异很大，必须解析MP4的box层级找到完整的avcC box：

async function getAvcCBuffer(file) {
  const buffer = new Uint8Array(await file.arrayBuffer());
  let offset = 0;

  // 遍历MP4顶层box
  while (offset < buffer.length) {
    const size = new DataView(buffer.buffer, offset, 4).getUint32();
    const type = String.fromCharCode(...buffer.slice(offset + 4, offset + 8));

    if (type === 'moov') {
      let moovOffset = offset + 8;
      // 遍历moov下的子box
      while (moovOffset < offset + size) {
        const subSize = new DataView(buffer.buffer, moovOffset, 4).getUint32();
        const subType = String.fromCharCode(...buffer.slice(moovOffset + 4, moovOffset + 8));

        if (subType === 'trak') {
          let trakOffset = moovOffset + 8;
          while (trakOffset < moovOffset + subSize) {
            const trakSubSize = new DataView(buffer.buffer, trakOffset, 4).getUint32();
            const trakSubType = String.fromCharCode(...buffer.slice(trakOffset + 4, trakOffset + 8));

            if (trakSubType === 'mdia') {
              let mdiaOffset = trakOffset + 8;
              while (mdiaOffset < trakOffset + trakSubSize) {
                const mdiaSubSize = new DataView(buffer.buffer, mdiaOffset, 4).getUint32();
                const mdiaSubType = String.fromCharCode(...buffer.slice(mdiaOffset + 4, mdiaOffset + 8));

                if (mdiaSubType === 'minf') {
                  let minfOffset = mdiaOffset + 8;
                  while (minfOffset < mdiaOffset + mdiaSubSize) {
                    const minfSubSize = new DataView(buffer.buffer, minfOffset, 4).getUint32();
                    const minfSubType = String.fromCharCode(...buffer.slice(minfOffset + 4, minfOffset + 8));

                    if (minfSubType === 'stbl') {
                      let stblOffset = minfOffset + 8;
                      while (stblOffset < minfOffset + minfSubSize) {
                        const stblSubSize = new DataView(buffer.buffer, stblOffset, 4).getUint32();
                        const stblSubType = String.fromCharCode(...buffer.slice(stblOffset + 4, stblOffset + 8));

                        if (stblSubType === 'stsd') {
                          let stsdOffset = stblOffset + 8 + 4; // 跳过version和flags
                          while (stsdOffset < stblOffset + stblSubSize) {
                            const avc1Size = new DataView(buffer.buffer, stsdOffset, 4).getUint32();
                            const avc1Type = String.fromCharCode(...buffer.slice(stsdOffset + 4, stsdOffset + 8));

                            if (avc1Type === 'avc1') {
                              // 跳过avc1固定字段（参考MP4规范）
                              let avc1Offset = stsdOffset + 8 + 8 + 16 + 16 + 8;
                              const avcCSize = new DataView(buffer.buffer, avc1Offset, 4).getUint32();
                              const avcCType = String.fromCharCode(...buffer.slice(avc1Offset + 4, avc1Offset + 8));

                              if (avcCType === 'avcC') {
                                return buffer.slice(avc1Offset + 8, avc1Offset + avcCSize);
                              }
                            }
                            stsdOffset += avc1Size;
                          }
                        }
                        stblOffset += stblSubSize;
                      }
                    }
                    minfOffset += minfSubSize;
                  }
                }
                mdiaOffset += mdiaSubSize;
              }
            }
            trakOffset += trakSubSize;
          }
        }
        moovOffset += subSize;
      }
    }
    offset += size;
  }
  throw new Error('未找到avcC box');
}

2. 初始化并配置VideoDecoder #

用提取到的完整avcC数据配置解码器，codec参数可以硬编码或从avcC中动态提取：

async function initVideoDecoder(file) {
  const avcCBuffer = await getAvcCBuffer(file);
  // 可以从avcC动态生成codec字符串：profile_idc(avcC[1])、profile_compatibility(avcC[2])、level_idc(avcC[3])
  const codec = 'avc1.640034';

  const decoder = new VideoDecoder({
    output: frame => {
      // 处理解码后的帧，比如渲染到canvas
      console.log('解码帧:', frame);
      frame.close(); // 用完释放资源
    },
    error: err => console.error('解码错误:', err)
  });

  decoder.configure({
    codec,
    description: avcCBuffer
  });
  return decoder;
}

3. 解码任意帧的实现 #

H.264的P/B帧依赖前面的参考帧，解码目标帧前需要先解码最近的I帧到目标帧之间的所有帧：

步骤1：解析帧元数据 #

需要解析MP4的stts、stsc、stsz、stco等box，获取每帧的偏移、大小、时间戳和是否为关键帧。这部分逻辑可以参考MP4规范实现，或使用轻量的MP4解析库。

步骤2：提取并解码帧数据 #

async function decodeTargetFrame(file, targetFrameIndex) {
  const decoder = await initVideoDecoder(file);
  // 假设frameList是解析后的帧元数据数组，包含offset、size、timestamp、isKeyframe
  const frameList = await parseVideoFrames(file);
  
  // 找到最近的关键帧索引
  let lastKeyframeIndex = targetFrameIndex;
  while (lastKeyframeIndex > 0 && !frameList[lastKeyframeIndex].isKeyframe) {
    lastKeyframeIndex--;
  }

  // 收集从关键帧到目标帧的所有chunk
  const chunks = [];
  for (let i = lastKeyframeIndex; i <= targetFrameIndex; i++) {
    const frame = frameList[i];
    const data = new Uint8Array(await file.arrayBuffer()).slice(frame.offset, frame.offset + frame.size);
    chunks.push(new EncodedVideoChunk({
      type: frame.isKeyframe ? 'key' : 'delta',
      data,
      timestamp: frame.timestamp,
      duration: frame.duration || 0
    }));
  }

  // 捕获目标帧
  let targetOutputFrame = null;
  decoder.output = frame => {
    if (frame.timestamp === chunks[chunks.length - 1].timestamp) {
      targetOutputFrame = frame;
    } else {
      frame.close();
    }
  };

  // 顺序解码所有依赖帧
  for (const chunk of chunks) {
    decoder.decode(chunk);
  }
  await decoder.flush();
  return targetOutputFrame;
}

关键说明 #

Chrome 115强化了avcC的格式校验，之前允许的不完整或位置偏移的avcC数据现在会被拒绝，因此必须严格按照MP4规范提取完整的avcC box数据才能正常配置解码器。

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