## 前言

在开发一款完全运行于浏览器的视频编辑器时，我们最初把 ffmpeg.wasm 视为导出系统的核心。

如果希望查看实际的浏览器视频编辑、离线渲染和格式回退实现，可以参考下面的开源项目：
https://github.com/MartinDelophy/ai-video-editor

### 思路
这个思路在原型阶段非常直接：把素材写入 FFmpeg 的虚拟文件系统，构造命令，等待转码完成，然后读取输出文件。

但随着编辑器逐渐加入多轨时间线、字幕、贴纸、画中画、蒙版、关键帧、转场和多轨音频，我们发现，如果把所有处理都交给 ffmpeg.wasm，会产生加载体积、内存占用、预览一致性和错误恢复等一系列问题。

最终，我们将导出系统调整为以下混合架构：

- Canvas 负责逐帧画面合成
- WebCodecs 负责视频编码
- OfflineAudioContext 负责离线音频混合
- MediaRecorder 负责兼容性回退
- ffmpeg.wasm 负责音频提取、音频拼接和 MP4 兼容转码

本文结合实际项目，介绍这套架构的职责划分、导出流程和工程实践。

## 为什么没有让 ffmpeg.wasm 承担全部导出工作？

ffmpeg.wasm 将 FFmpeg 编译到 WebAssembly，使浏览器能够执行解码、编码、转码、封装、解封装和滤镜处理。

它的能力非常完整，但浏览器环境与服务器或桌面环境存在明显差异。

### WASM 首次加载成本

如果在应用启动时就加载 FFmpeg，那么即使用户只是浏览素材或编辑字幕，也需要承担 WASM Core 的下载和初始化成本。

对于浏览器应用来说，这会直接影响首屏加载速度。

因此，ffmpeg.wasm 更适合按需加载：

```js
async function loadFFmpeg() {
  const [{ FFmpeg }, { fetchFile }] = await Promise.all([
    import("@ffmpeg/ffmpeg"),
    import("@ffmpeg/util"),
  ]);

  const ffmpeg = new FFmpeg();

  await ffmpeg.load({
    coreURL: "/ffmpeg/ffmpeg-core.js",
    wasmURL: "/ffmpeg/ffmpeg-core.wasm",
  });

  return { ffmpeg, fetchFile };
}
```

只有当用户执行音频提取或 MP4 转码时，才初始化 FFmpeg。

### 虚拟文件系统的内存开销

ffmpeg.wasm 通常需要把浏览器中的 Blob 写入虚拟文件系统：

```js
await ffmpeg.writeFile(
  "input.webm",
  await fetchFile(inputBlob),
);
```

处理完成后，再把输出读取为新的 Uint8Array：

```js
const data = await ffmpeg.readFile("output.mp4");

const outputBlob = new Blob([data.buffer], {
  type: "video/mp4",
});
```

一次处理过程中，内存里可能同时存在：

- 原始 Blob
- ArrayBuffer 或 Uint8Array
- FFmpeg 虚拟文件系统中的输入文件
- 编码期间的临时数据
- 输出文件
- 从虚拟文件系统读出的新 Blob

在处理高清视频时，这种复制会产生明显的内存压力。移动端浏览器尤其容易因此出现页面卡顿或进程被系统回收。

### 预览与导出容易出现差异

编辑器预览通常通过 Canvas、CSS 或 DOM 展示以下效果：

- 字幕
- 贴纸
- 画中画
- 蒙版
- 滤镜
- contain/cover 布局
- 关键帧动画
- 转场

如果导出时再单独维护一套 FFmpeg Filter Graph，就需要把前端的所有视觉规则重新实现一次。

这很容易产生预览和导出不一致的问题，例如：

- 字幕换行位置不同
- 贴纸透明度不一致
- 视频裁剪范围存在偏差
- 蒙版圆角大小不同
- 关键帧插值结果不同
- 图片实际可见区域与操作框不一致

因此，我们决定让预览和导出共享同一套 Canvas 合成逻辑。

## Canvas + WebCodecs：确定性视频渲染

主导出流程首先根据项目时长和帧率，生成精确的帧计划。

```js
export function createOfflineFramePlan(
  duration,
  frameRate,
) {
  const fps = Math.max(
    24,
    Math.min(60, Math.round(frameRate || 30)),
  );

  const safeDuration = Math.max(
    1 / fps,
    Number(duration) || 0,
  );

  const frameCount = Math.max(
    1,
    Math.ceil(safeDuration * fps),
  );

  return Array.from(
    { length: frameCount },
    (_, index) => ({
      index,
      timestamp: index / fps,
      duration: 1 / fps,
      keyFrame: index % (fps * 2) === 0,
    }),
  );
}
```

例如，一个 10 秒、30 FPS 的项目，会生成约 300 个待渲染帧。

对于每个时间戳，渲染器需要计算：

1. 当前激活的主视频或图片片段
2. 当前片段对应的素材源时间
3. contain 或 cover 的显示几何
4. 当前字幕及其样式
5. 当前可见的贴纸
6. 当前画中画图层
7. 滤镜、蒙版与媒体变换
8. 关键帧插值结果
9. 转场状态

然后将这些内容绘制到离屏 Canvas：

```js
async function renderFrame(
  context,
  canvas,
  project,
  timestamp,
) {
  const visual = resolveVisualAtTime(
    project.visualSegments,
    timestamp,
  );

  const caption = resolveCaptionAtTime(
    project.captionSegments,
    timestamp,
  );

  const stickers = resolveStickersAtTime(
    project.stickerSegments,
    timestamp,
  );

  drawComposition(context, canvas, {
    visual,
    caption,
    stickers,
    timestamp,
  });
}
```

每一帧完成后，通过 WebCodecs 进行编码。

项目中使用 Mediabunny 管理 Canvas 视频源，以及 MP4、WebM 的封装和音视频 mux。

```js
const videoSource = new CanvasSource(canvas, {
  codec: "avc",
  bitrate: 12_000_000,
  keyFrameInterval: 2,
  latencyMode: "quality",
});

output.addVideoTrack(videoSource, {
  frameRate: 30,
});
```

这条路径不依赖实时播放速度。

即使设备只能以每秒 10 帧的速度完成渲染，最终文件仍然可以是准确的 30 FPS，因为每个输出帧都有明确的时间戳。

## OfflineAudioContext：多轨音频混合

视频编辑器中的音频通常由多个独立片段构成：

- 视频原声
- 配音
- 录音
- 背景音乐
- 分离后的人声或伴奏

每个音频片段可能具有不同的：

- 时间线起点
- 素材源偏移
- 播放速度
- 音量
- 淡入时间
- 淡出时间
- 实际使用时长

我们首先解码音频：

```js
async function decodeAudio(blob, context) {
  const buffer = await blob.arrayBuffer();

  return context.decodeAudioData(
    buffer.slice(0),
  );
}
```

然后创建与视频导出时长一致的 OfflineAudioContext：

```js
const sampleRate = 48_000;

const offlineContext = new OfflineAudioContext(
  2,
  Math.ceil(duration * sampleRate),
  sampleRate,
);
```

将每个音频片段放到对应的时间位置：

```js
for (const clip of clips) {
  const source =
    offlineContext.createBufferSource();

  const gain =
    offlineContext.createGain();

  source.buffer = clip.audioBuffer;

  gain.gain.setValueAtTime(
    clip.volume,
    clip.start,
  );

  source
    .connect(gain)
    .connect(offlineContext.destination);

  source.start(
    clip.start,
    clip.sourceOffset,
    clip.sourceDuration,
  );
}
```

如果存在淡入效果：

```js
gain.gain.setValueAtTime(
  0,
  clip.start,
);

gain.gain.linearRampToValueAtTime(
  clip.volume,
  clip.start + clip.fadeIn,
);
```

淡出处理也可以通过 GainNode 的自动化参数完成。

最终调用：

```js
const mixedAudio =
  await offlineContext.startRendering();
```

得到完整的 AudioBuffer，再将它编码并与视频轨道一起封装。

## ffmpeg.wasm 在项目中的实际职责

我们没有移除 ffmpeg.wasm，而是将其放到更适合的位置。

### 从视频中提取原声音轨

用户导入视频后，编辑器需要分离其音频轨道，用于：

- 波形显示
- 原声剪辑
- 音量调节
- 自动字幕
- 人声分离
- 音频下载

可以通过类似的 FFmpeg 命令完成：

```js
await ffmpeg.exec([
  "-i",
  "input.mp4",
  "-vn",
  "-acodec",
  "pcm_s16le",
  "-ar",
  "48000",
  "-ac",
  "2",
  "output.wav",
]);
```

其中：

- `-vn` 表示忽略视频轨道
- `pcm_s16le` 输出未压缩 PCM 音频
- `-ar 48000` 设置采样率
- `-ac 2` 输出双声道

得到的 WAV 可以继续用于浏览器波形解码和时间线编辑。

### 音频拼接与格式标准化

从不同视频中提取的音频可能具有不同的编码、采样率或声道布局。

ffmpeg.wasm 可以把它们转换成统一格式，再执行拼接。

这比在前端为每一种媒体格式编写专门处理逻辑更加可靠。

### WebM 转 MP4

浏览器对 H.264 和 AAC 编码的支持并不统一。

当 WebCodecs 能够直接生成 MP4 时，导出流程不需要 FFmpeg。

如果当前浏览器只能生成 WebM，而用户明确选择了 MP4，则在最后一步加载 ffmpeg.wasm：

```js
async function transcodeWebmToMp4(webmBlob) {
  const { ffmpeg, fetchFile } =
    await loadFFmpeg();

  const inputName = "input.webm";
  const outputName = "output.mp4";

  try {
    await ffmpeg.writeFile(
      inputName,
      await fetchFile(webmBlob),
    );

    await ffmpeg.exec([
      "-i",
      inputName,
      "-c:v",
      "libx264",
      "-c:a",
      "aac",
      "-movflags",
      "+faststart",
      outputName,
    ]);

    const data =
      await ffmpeg.readFile(outputName);

    return new Blob([data.buffer], {
      type: "video/mp4",
    });
  } finally {
    await ffmpeg
      .deleteFile(inputName)
      .catch(() => {});

    await ffmpeg
      .deleteFile(outputName)
      .catch(() => {});
  }
}
```

## 不要因为 MP4 转码失败而丢失 WebM

我们的导出流程遵守一个重要原则：

> 只有在 MP4 转码成功后，才能用 MP4 替代已完成的 WebM。

也就是说，WebM 是已经完成的导出成果，而不是临时垃圾文件。

```js
if (result.nativeMp4) {
  downloadBlob(
    result.blob,
    "video.mp4",
  );

  return;
}

try {
  const mp4 = await transcodeWebmToMp4(
    result.blob,
  );

  downloadBlob(
    mp4,
    "video.mp4",
  );
} catch (error) {
  console.error(error);

  downloadBlob(
    result.blob,
    "video.webm",
  );
}
```

这样即使 ffmpeg.wasm 出现以下问题：

- WASM 加载失败
- 内存不足
- 输入格式不兼容
- H.264 编码器不可用
- 页面进入后台
- 用户设备性能不足

也不会让前面的完整渲染结果一起丢失。

## 完整的导出回退策略

当前导出链路可以概括为：

```text
Canvas 逐帧合成
    ↓
WebCodecs 编码
    ↓
OfflineAudioContext 音频混合
    ↓
Mediabunny 封装 MP4/WebM
    ↓ 当前浏览器不支持
MediaRecorder 兼容导出
    ↓ 用户要求 MP4，但结果为 WebM
ffmpeg.wasm 转码 MP4
    ↓ 转码失败
保存已完成的 WebM
```

这套设计中，各项技术的职责比较明确：

| 技术 | 主要职责 |
| --- | --- |
| Canvas | 画面合成与预览一致性 |
| WebCodecs | 确定性视频编码 |
| OfflineAudioContext | 多轨音频混合 |
| Mediabunny | 音视频封装与 mux |
| MediaRecorder | 兼容性回退 |
| ffmpeg.wasm | 音频处理与格式兼容 |

## ffmpeg.wasm 工程实践

### 使用动态导入

不要在应用首屏加载 FFmpeg：

```js
const { FFmpeg } =
  await import("@ffmpeg/ffmpeg");
```

只有当用户实际执行相关操作时才加载。

### 清理临时文件

虚拟文件系统也会占用内存，因此每次操作结束后都需要删除文件：

```js
try {
  await ffmpeg.writeFile(
    inputName,
    inputData,
  );

  await ffmpeg.exec(args);

  return await ffmpeg.readFile(
    outputName,
  );
} finally {
  await ffmpeg
    .deleteFile(inputName)
    .catch(() => {});

  await ffmpeg
    .deleteFile(outputName)
    .catch(() => {});
}
```

### 使用唯一文件名

如果多个任务使用相同的 `input.mp4` 和 `output.mp4`，并发操作可能互相覆盖。

可以为每次任务生成 ID：

```js
const taskId = crypto.randomUUID();

const inputName =
  `input-${taskId}.webm`;

const outputName =
  `output-${taskId}.mp4`;
```

### 区分加载进度和转码进度

用户看到“处理中”时，很难判断程序是否卡住。

建议把状态拆分为：

1. 加载 FFmpeg 运行时
2. 准备输入文件
3. 写入虚拟文件系统
4. 执行转码
5. 读取输出
6. 验证文件
7. 保存文件

FFmpeg 的日志或 progress 事件，可以映射到导出进度条：

```js
ffmpeg.on("progress", ({ progress }) => {
  updateProgress(
    Math.round(progress * 100),
  );
});
```

### 正确配置 Cross-Origin Isolation

多线程版本通常依赖 SharedArrayBuffer，需要部署以下响应头：

```text
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
```

但配置响应头只是第一步。

还要确保以下资源满足跨域隔离要求：

- FFmpeg Core
- WASM 文件
- Worker 文件
- CDN 脚本
- 图片和字体
- AI 模型文件
- 第三方媒体资源

如果任意关键资源不满足要求，多线程能力可能无法正常启用。

## 验证导出文件，而不是只验证 Blob

导出函数返回了非空 Blob，不代表视频一定可用。

更可靠的测试方式是重新读取或解码输出文件，验证：

- 视频宽高
- 视频总时长
- 帧数
- 视频轨道是否存在
- 音频轨道是否存在
- 字幕是否可见
- 透明贴纸是否正确合成
- 首帧和尾帧是否完整

例如：

```js
expect(result.blob.size).toBeGreaterThan(0);
expect(metadata.width).toBe(1920);
expect(metadata.height).toBe(1080);
expect(metadata.duration).toBeCloseTo(10, 1);
expect(metadata.videoTracks).toBeGreaterThan(0);
expect(metadata.audioTracks).toBeGreaterThan(0);
```

浏览器视频导出的正确性，最终应该由生成文件本身来证明。

## 总结

ffmpeg.wasm 是浏览器媒体开发中非常重要的工具，但它不一定适合作为复杂视频编辑器的唯一渲染引擎。

在我们的实际项目中，最终采用了以下分工：

- Canvas 负责逐帧视觉合成
- WebCodecs 负责高质量确定性编码
- OfflineAudioContext 负责多轨音频混合
- Mediabunny 负责容器封装
- MediaRecorder 负责兼容性回退
- ffmpeg.wasm 负责音频提取、格式标准化和 MP4 转码

这种架构让预览和导出能够共享渲染逻辑，同时降低了 ffmpeg.wasm 的首屏加载和内存压力。

更重要的是，当 MP4 转码失败时，我们仍然能够保留已经完成的 WebM，避免用户失去整个导出结果。



项目包含多轨时间线、字幕、贴纸、画中画、WebCodecs 导出、OfflineAudioContext 音频混合，以及 ffmpeg.wasm 兼容转码等完整实现。

在开发一款完全运行于浏览器的视频编辑器时，我们最初把 ffmpeg.wasm 视为导出系统的核心。

浏览器端视频导出实战：ffmpeg.wasm、WebCodecs 与 OfflineAudioContext 如何分工

编程语言

探索浏览器视频编辑器开发实践，分享混合架构方案：Canvas+WebCodecs实现逐帧渲染，OfflineAudioContext处理多轨音频，ffmpeg.wasm负责音频提取与格式转换。解决预览一致性、内存占用和兼容性问题，确保导出可靠性。开源项目提供完整实现参考。

文件系统

代码解释

服务器

容器

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

浏览器端视频导出实战：ffmpeg.wasm、WebCodecs 与 OfflineAudioContext 如何分工-腾讯云开发者社区-腾讯云

浏览器端视频导出实战：ffmpeg.wasm、WebCodecs 与 OfflineAudioContext 如何分工

浏览器端视频导出实战：ffmpeg.wasm、WebCodecs 与 OfflineAudioContext 如何分工

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐