使用WebCodecs解码FFmpeg提取的视频帧遇配置错误求助

这个错误的核心是：传给VideoDecoder.configure()的编码描述数据（也就是你从FFmpeg提取的extradata）要么已经被内存回收、脱离了上下文，要么数据格式完全不符合WebCodecs的要求。下面从前后端两个环节逐一排查：

后端FFmpeg提取环节的坑 #

• 别拿错extradata：
  比如H.264的extradata必须包含完整的SPS和PPS单元，不能只取其中一个。用FFmpeg的AVCodecContext时，一定要用extradata和extradata_size这对组合，不能手动截断或者只复制部分字节。
• 保存时别瞎转格式：
  必须以原始二进制格式存储extradata，别转成Base64或者字符串再存——转来转去很容易丢字节。比如后端用C++的话，直接用fwrite把extradata按字节写入文件就行，别做任何编码转换。

前端WebCodecs配置环节的问题 #

• 别让extradata被回收：
  如果你的extradata是从ArrayBuffer里读出来的，一定要复制一份再传给配置。比如原ArrayBuffer可能因为异步操作被释放，导致description变成无效的 detached 状态。正确写法是：

  // 把读取到的extradata buffer复制一份
  const safeExtradata = new Uint8Array(rawExtradataBuffer.slice());
  const decoderConfig = {
    codec: 'avc1.42C01E', // 这里的codec字符串必须精准
    description: safeExtradata,
    codedWidth: 1920,
    codedHeight: 1080
  };
  decoder.configure(decoderConfig);
  

• codec字符串不能瞎写：
  WebCodecs对codec字符串的格式要求极严，比如H.264必须写成avc1.<profile><compat><level>的十六进制格式，比如Baseline 3.0就是avc1.42C01E。直接写h264或者avc1肯定报错，必须和FFmpeg提取的编码参数匹配。
• 帧数据格式要对应：
  如果你后端输出的是AVCC格式的帧（带长度前缀），前端必须转成Annex-B格式（带0x000001的start code）才能传给VideoDecoder。不然解码器根本识别不了帧边界。

验证步骤帮你定位问题 #

1. 核对extradata的正确性：
   用FFmpeg命令行提取extradata和后端的结果对比：

   ffmpeg -i 你的视频文件.mp4 -v trace 2>&1 | grep "SPS/PPS"
   

   把后端保存的extradata文件用十六进制编辑器打开，和命令行输出的SPS/PPS字节内容对比，确保完全一致。
2. 检查前端读取的字节数：
   打印前端读取到的extradata的byteLength，必须和后端的extradata_size完全相等，差一个字节都不行。
3. 跑最小测试用例：
   用FFmpeg提取一帧关键帧的extradata和帧数据，用最简化的前端代码解码（别加复杂的异步逻辑），看是否还报错。比如：

   const decoder = new VideoDecoder({
     output(frame) {
       const canvas = document.getElementById('canvas');
       canvas.getContext('2d').drawImage(frame, 0, 0);
       frame.close();
     },
     error(err) { console.error(err); }
   });
   // 假设已经读取到extradataBuffer和frameBuffer
   decoder.configure({
     codec: 'avc1.42C01E',
     description: new Uint8Array(extradataBuffer),
     codedWidth: 640,
     codedHeight: 480
   });
   decoder.decode(new EncodedVideoChunk({
     type: 'key',
     data: new Uint8Array(frameBuffer),
     timestamp: 0
   }));
   decoder.flush();
   

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