视频混剪基于 WebCodecs 导出视频方案

FFmpeg.wasm

FFmpeg 是视频处理领域的"神器"，FFmpeg.wasm 是它的 WebAssembly 移植版。

优点：

• 功能极其丰富，几乎支持所有格式
• 社区活跃，文档多
• 可以做复杂的滤镜、混流

缺点：

• 核心文件 30MB+，首次加载很慢
• WebAssembly 是软件模拟，没有硬件加速
• 需要在 WASM 内存中操作，容易内存不足
• 实测编码速度约 10 fps

WebCodecs

WebCodecs 是 W3C 标准，Chrome 2020 年开始支持。

优点：

• 浏览器内置，零加载成本
• 可以调用系统的硬件编码器（GPU 加速）
• 直接操作 VideoFrame，内存效率高
• 实测编码速度 100+ fps

缺点：

• Safari 不支持（截至 2024 年底）
• 只负责编码，不负责封装（需要额外的 muxer）
• API 相对底层，需要更多代码

我的选择

// 编码速度对比
// FFmpeg.wasm: 10 fps → 导出 1 分钟视频需要 3 分钟
// WebCodecs: 100 fps → 导出 1 分钟视频需要 18 秒

性能差 10 倍。用户等不起 3 分钟，所以我选了 WebCodecs。

Safari 用户暂时无法导出，但考虑到主流用户在 Chrome 上，可以接受。

WebCodecs 核心 API

VideoFrame

VideoFrame 代表一帧原始画面。

// 从 Canvas 创建 VideoFrame
const frame = new VideoFrame(canvas, {
  timestamp: time * 1_000_000 // 微秒
});

// 属性
frame.timestamp // 时间戳
frame.codedWidth // 宽度
frame.codedHeight // 高度
frame.duration // 持续时间

// 用完必须关闭！
frame.close();

VideoEncoder

VideoEncoder 负责把 VideoFrame 压缩成 H.264 数据。

const encoder = new VideoEncoder({
  output: (chunk, metadata) => {
    // chunk 是压缩后的数据
    // metadata 包含 decoderConfig 等信息
  },
  error: (e) => {
    console.error('Encode error:', e);
  }
});

// 配置编码参数
encoder.configure({
  codec: 'avc1.42001f', // H.264 Baseline Profile
  width: 1920,
  height: 1080,
  bitrate: 8_000_000, // 8 Mbps
  framerate: 30
});

// 编码一帧
encoder.encode(frame, { keyFrame: true });

// 等待所有帧编码完成
await encoder.flush();

EncodedVideoChunk

EncodedVideoChunk 是编码器输出的压缩数据。

interface EncodedVideoChunk {
  type: 'key' | 'delta'; // I 帧还是 P/B 帧
  timestamp: number; // 时间戳（微秒）
  duration: number; // 持续时间
  data: ArrayBuffer; // 压缩后的 H.264 数据
}

完整导出流程

核心代码

async function exportVideo() {
  const chunks: EncodedVideoChunk[] = [];

  // 1. 创建编码器
  const encoder = new VideoEncoder({
    output: (chunk) => { chunks.push(chunk); },
    error: (e) => console.error(e)
  });

  // 2. 配置编码参数
  encoder.configure({
    codec: 'avc1.42001f',
    width: 1920,
    height: 1080,
    bitrate: 8_000_000,
    framerate: 30
  });

  // 3. 逐帧循环
  const totalFrames = Math.ceil(duration * 30);
  for (let i = 0; i < totalFrames; i++) {
    const time = i / 30;

    // a. 用 WebGL 渲染这一帧
    await webglRenderer.render(time);

    // b. 从 Canvas 创建 VideoFrame
    const frame = new VideoFrame(canvas, {
      timestamp: time * 1_000_000 // 微秒
    });

    // c. 编码（每 30 帧一个关键帧）
    encoder.encode(frame, { keyFrame: i % 30 === 0 });

    // d. 立即释放内存！！！
    frame.close();

    // e. 控制编码队列，防止内存爆炸
    if (encoder.encodeQueueSize > 5) {
      await new Promise(r => setTimeout(r, 1));
    }

    // f. 更新进度
    onProgress(i / totalFrames);
  }

  // 4. 等待编码完成
  await encoder.flush();

  // 5. 封装成 MP4
  const mp4Blob = await muxToMp4(chunks);

  // 6. 触发下载
  downloadBlob(mp4Blob, 'output.mp4');
}

MP4 封装

WebCodecs 只管编码，输出的是裸的 H.264 数据。需要封装成 MP4 容器才能被播放器识别。

我用的是 mp4-muxer 这个库：

import { Muxer, ArrayBufferTarget } from 'mp4-muxer';

async function muxToMp4(chunks: EncodedVideoChunk[]): Promise<Blob> {
  const muxer = new Muxer({
    target: new ArrayBufferTarget(),
    video: {
      codec: 'avc',
      width: 1920,
      height: 1080
    },
    fastStart: 'in-memory' // 把 moov 放在文件开头，支持边下边播
  });

  for (const chunk of chunks) {
    muxer.addVideoChunk(chunk);
  }
  muxer.finalize();
  return new Blob([muxer.target.buffer], { type: 'video/mp4' });
}

内存管理：最重要的事

为什么 frame.close() 这么重要

VideoFrame 占用的内存很大：

1080p 一帧 = 1920 × 1080 × 4 bytes (RGBA) ≈ 8 MB
如果不及时 close()：
100 帧 = 800 MB
1000 帧 = 8 GB
浏览器崩溃

正确写法

// 用完立即关闭
const frame = new VideoFrame(canvas, { timestamp });
encoder.encode(frame);
frame.close(); // ← 必须的！

错误写法

// 忘了 close()，内存泄漏
const frame = new VideoFrame(canvas, { timestamp });
encoder.encode(frame);
// 缺少 frame.close()

性能优化

编码队列控制

编码器内部有一个队列。如果渲染太快，队列会积压，内存暴涨。

// 等待队列消化
if (encoder.encodeQueueSize > 5) {
  await new Promise(r => setTimeout(r, 1));
}

渲染和编码并行

更高级的优化是用 OffscreenCanvas 在 Worker 里渲染，主线程只管编码。

这个项目没做这个优化，留给以后。

实测性能

在 M1 MacBook Pro 上：

基本是实时速度的 6 倍，还算可接受。