如何通过WebCodecs实现Canvas绘图叠加视频并录制成视频？

首先明确：完全可以用WebCodecs API实现需求，且能解决你当前方案的卡顿问题。你现有方案的卡顿主要来自冗余的Canvas渲染、跨线程传递开销，以及间接编码的性能损耗，下面是针对性的优化实现思路：

原方案卡顿的核心原因 #

• 频繁在主线程与Worker间传递ImageBitmap，即便可转移也存在线程调度开销；
• Worker内合成后再用captureStream()，多了一层Canvas渲染流捕获的额外开销；
• 基于captureStream的编码链路不够直接，无法高效控制帧处理流程。

优化后的实现步骤 #

1. 直接解码视频帧（用WebCodecs VideoDecoder） #

跳过captureStream的间接处理，直接用VideoDecoder解码视频源（比如从<video>获取的媒体流，或本地文件的二进制数据），得到原始VideoFrame对象。示例代码：

const decoder = new VideoDecoder({
  output: async (videoFrame) => {
    // 处理解码后的视频帧
    await processFrame(videoFrame);
    videoFrame.close(); // 及时释放资源
  },
  error: (e) => console.error(e)
});

// 配置解码器（根据视频编码格式调整）
decoder.configure({
  codec: 'avc1.42E01E', // H.264示例
  width: video.videoWidth,
  height: video.videoHeight
});

// 向解码器喂入媒体数据块（比如从ReadableStream获取）
for await (const chunk of mediaStreamChunks) {
  decoder.decode(chunk);
}

2. 合成视频帧与Canvas内容 #

用OffscreenCanvas替代常规Canvas做合成，避免主线程渲染阻塞：

• 如果主线程负载低，直接在主线程合成：

const offscreen = new OffscreenCanvas(video.videoWidth, video.videoHeight);
const ctx = offscreen.getContext('2d');

async function processFrame(videoFrame) {
  // 绘制视频帧作为底层
  ctx.drawImage(videoFrame, 0, 0, offscreen.width, offscreen.height);
  // 叠加Canvas绘图内容（直接传入你的绘图Canvas）
  ctx.drawImage(yourDrawingCanvas, 0, 0);
  
  // 从合成后的OffscreenCanvas生成编码用的VideoFrame
  const outputFrame = new VideoFrame(offscreen, { timestamp: videoFrame.timestamp });
  await encodeFrame(outputFrame);
  outputFrame.close();
}

• 如果需要用Worker分担压力，直接传递VideoFrame和ImageBitmap（均为可转移对象）到Worker，在Worker内用OffscreenCanvas合成，减少主线程占用。

3. 用WebCodecs VideoEncoder直接编码 #

跳过captureStream的中间流，直接将合成后的VideoFrame传给VideoEncoder编码，写入FileWritable：

const encoder = new VideoEncoder({
  output: async (chunk) => {
    // 将编码块写入文件
    await fileWritable.write(chunk);
  },
  error: (e) => console.error(e)
});

// 配置编码器（匹配视频参数）
encoder.configure({
  codec: 'avc1.42E01E',
  width: offscreen.width,
  height: offscreen.height,
  framerate: 30,
  bitrate: 5_000_000 // 5Mbps，按需调整
});

async function encodeFrame(frame) {
  encoder.encode(frame);
}

4. 关键性能优化点 #

• 复用资源：固定OffscreenCanvas尺寸，避免频繁创建；复用编码器/解码器实例，不要每次处理都重新初始化；
• 严格控制帧率：按照原视频的帧率处理帧（比如30fps则每33ms处理一帧），避免冗余计算；
• 及时释放资源：所有VideoFrame、ImageBitmap使用后立即调用close()，防止内存泄漏；
• 减少跨线程传递：能在主线程处理就不拆分到Worker，确需Worker时只传递必要的可转移对象。

方案优势 #

• 直接操作帧数据，去掉了captureStream的渲染管道开销；
• WebCodecs的编码链路更底层，性能比间接编码方式提升明显；
• 减少了不必要的线程通信和Canvas渲染步骤，从根源降低卡顿概率。

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