WebCodec：如何执行flush操作且无需从关键帧重启解码

针对你遇到的flush()后必须从关键帧重启解码、不调用flush解码器攒帧的问题，这里有两个更优雅的解决思路：

1. 启用低延迟模式，避免调用flush #

WebCodec解码器默认会做缓冲优化来提升性能，导致你感觉“等待多帧才解码”，可以通过配置latencyMode: "low-latency"强制解码器低延迟处理，配合逐帧等待输出的逻辑，实现实时x1倍速逐帧解码，完全不需要调用flush()。

示例代码：

// 初始化解码器
const decoder = new VideoDecoder({
  output: (decodedFrame) => {
    // 处理解码完成的单帧
    console.log('解码完成一帧');
    decodedFrame.close(); // 用完必须关闭，避免内存泄漏
  },
  error: (err) => console.error('解码错误:', err)
});

// 配置解码器，开启低延迟模式
decoder.configure({
  codec: 'avc1.42E01E', // 替换为你的视频编码格式
  latencyMode: 'low-latency'
});

// 逐帧解码函数，确保前一帧解码完成再喂下一帧
async function decodeFrameByFrame(frameList) {
  for (const encodedFrame of frameList) {
    // 喂入当前帧
    await decoder.decode(encodedFrame);
    // 等待当前帧解码输出完成
    await new Promise(resolve => {
      const onDequeue = () => {
        decoder.removeEventListener('dequeue', onDequeue);
        resolve();
      };
      decoder.addEventListener('dequeue', onDequeue);
    });
  }
}

这个方案的核心是利用low-latency模式禁用解码器的缓冲优化，再通过监听dequeue事件确保每帧解码完成后再处理下一帧，完全符合实时逐帧的需求。

2. 若必须使用flush，缓存最近关键帧重启解码 #

如果业务场景下必须调用flush()（比如需要强制清空所有待处理任务），可以在解码过程中缓存最近的关键帧，重启解码时先喂入该关键帧，再继续处理后续增量帧，无需预解码大量帧找关键帧。

示例代码：

let lastKeyFrame = null; // 缓存最近的关键帧

const decoder = new VideoDecoder({
  output: (decodedFrame) => {
    // 处理解码帧
    decodedFrame.close();
  },
  error: (err) => console.error(err)
});

decoder.configure({ codec: 'avc1.42E01E' });

// 处理单帧时缓存关键帧
async function processSingleFrame(encodedFrame) {
  if (encodedFrame.type === 'key') {
    // 克隆关键帧保存，避免原帧被销毁
    lastKeyFrame = encodedFrame.clone();
  }
  await decoder.decode(encodedFrame);
}

// flush后重启解码的逻辑
async function resumeDecodeAfterFlush(targetFrame) {
  // 执行flush并等待完成
  await decoder.flush();
  // 重新配置解码器（flush后状态会变为unconfigured）
  decoder.configure({ codec: 'avc1.42E01E' });
  
  if (lastKeyFrame) {
    // 先喂入缓存的关键帧
    await decoder.decode(lastKeyFrame);
    // 等待关键帧解码完成
    await new Promise(resolve => {
      const onDequeue = () => {
        decoder.removeEventListener('dequeue', onDequeue);
        resolve();
      };
      decoder.addEventListener('dequeue', onDequeue);
    });
  }
  
  // 再喂入目标增量帧
  await decoder.decode(targetFrame);
}

总结 #

优先推荐第一种方案——启用低延迟模式并逐帧等待输出，这是最贴合实时逐帧解码需求、最优雅的处理方式；如果必须使用flush()，再采用关键帧缓存的方案，避免预解码大量帧的冗余操作。

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