DojoClip

开始

浏览器内的 FFmpeg：DojoClip Render Lab 系列首篇（技术深潜）

By: Pansa LegrandDate: 2025-02-18Category: Engineering
DojoClip 中 FFmpeg WebAssembly 流程示意图

欢迎来到 Render Lab，这里分享让 DojoClip 既快速又重视隐私的核心技术。本篇文章不止讲概念，而是展开操作层细节：把 FFmpeg 编译成 WebAssembly（WASM）后如何使用，它的优势和短板，以及我们为何配合 MediaRecorder 与 WebCodecs 打造混合式、低延迟的媒体工作流。

TL;DR

  • FFmpeg WASM 兼顾精度与功能覆盖（滤镜、裁剪、remux），并确保处理全程在本地完成。
  • WebCodecs 利用硬件加速提供最低延迟的编解码，但需要额外的封装器（muxer）。
  • MediaRecorder 是最简单的实时捕获方式，适合预览和快速代理，控制能力有限。
  • 我们采用混合管线：WASM 负责精确转换，WebCodecs 与 MediaRecorder 负责高速预览与导出。

基础概念速览（2 分钟）

  • 容器 vs. 编解码器：MP4、MKV、WebM 是容器；H.264、H.265、VP9、AV1、AAC、Opus 是编解码器。剪辑流程通常是解码 → 处理 → 编码 → 封装。
  • 转码 vs. remux：转码会重新编码（质量与体积权衡）；remux 只更换容器，不动压缩流（快速且无损）。
  • CFR vs. VFR：恒定帧率 vs. 可变帧率。网页捕获多为 VFR，而精确剪辑通常希望 CFR。
  • 关键帧（IDR）：除非转码或使用 smart-render 策略，剪辑点会贴近关键帧。
  • CRF 与码率：质量调节旋钮。CRF 数值越小，质量与体积越高；码率限制了面向流媒体的带宽上限。

架构概览

[文件输入]
   └─▶ 浏览器文件系统（OPFS / 内存）
         ├─▶ FFmpeg WASM worker（精确滤镜、remux、波形）
         ├─▶ WebCodecs（高速编解码；预览/导出）
         └─▶ MediaRecorder（实时 canvas/标签页捕获）
                     ▼
               [封装器] → MP4/WebM → 下载 / OPFS / 上传

为什么选择 WASM？

它把 FFmpeg 的命令行能力带进浏览器，实现帧级裁剪、复杂滤镜、音频声道处理，并让敏感媒体全程留在本地。

为什么不只靠 WASM？

长时间编码会占用大量内存与 CPU，首个加载包体较大，而且线程/SIMD 需要跨源隔离头（COOP/COEP）。

为什么还要 WebCodecs 和 MediaRecorder？

WebCodecs 直接调用系统硬件加速，速度快；MediaRecorder 用于实时捕获或生成快速代理几乎零门槛。

正确部署 FFmpeg WASM

1. 开启线程与 SIMD（显著提速）

线程 + SIMD 在真实场景中通常带来 1.5 到 3 倍的性能提升，但需要跨源隔离头。

// next.config.js（或 middleware/headers）
const securityHeaders = [
  { key: 'Cross-Origin-Opener-Policy', value: 'same-origin' },
  { key: 'Cross-Origin-Embedder-Policy', value: 'require-corp' },
  { key: 'Cross-Origin-Resource-Policy', value: 'same-site' },
];

module.exports = {
  async headers() {
    return [{ source: '/:path*', headers: securityHeaders }];
  },
};

2. 在 Web Worker 中加载核心

避免阻塞主线程，并将 FFmpeg 内存隔离。

// ffmpeg.worker.ts
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({ log: true, corePath: '/wasm/ffmpeg-core.js' });

self.onmessage = async (event) => {
  const { name, file, args } = event.data;
  if (!ffmpeg.isLoaded()) {
    await ffmpeg.load();
  }
  ffmpeg.FS('writeFile', name, await fetchFile(file));
  await ffmpeg.run(...args);
  const out = ffmpeg.FS('readFile', 'out.bin');
  self.postMessage({ ok: true, data: out.buffer }, [out.buffer]);
};

// UI 侧
const worker = new Worker(new URL('./ffmpeg.worker.ts', import.meta.url));
worker.postMessage({
  name: 'in.mp4',
  file,
  args: ['-i', 'in.mp4', '-vn', '-acodec', 'copy', 'out.bin'],
});

worker.onmessage = ({ data }) => {
  const blob = new Blob([data.data], { type: 'audio/mp4' });
  download(blob, 'audio.m4a');
};

3. 大文件存储到 OPFS

Origin Private File System 可避免内存飙升。

const root = await navigator.storage.getDirectory();
const fileHandle = await root.getFileHandle('clip.m4a', { create: true });
const writer = await fileHandle.createWritable();
await writer.write(blob);
await writer.close();

日常任务（FFmpeg 常用命令可直接复制）

提取音频（若已是 AAC 则无损）：

ffmpeg -i input.mp4 -vn -acodec copy audio.m4a

缩放 + CRF 转码（H.264 代理）：

ffmpeg -i input_4k.mp4 -vf scale=-2:1080 -c:v libx264 -preset veryfast -crf 23 -c:a aac -b:a 160k out_1080p.mp4

精确片段导出（重编码小窗口）：

ffmpeg -ss 00:00:12.300 -to 00:00:19.000 -i input.mp4 -c:v libx264 -crf 20 -pix_fmt yuv420p -c:a aac slice.mp4

生成时间线用的波形 PNG：

ffmpeg -i audio.m4a -lavfi showwavespic=s=1200x200:colors=white waveform.png

在 WASM 中调用 ffmpeg.run(...) 即可。若只是 remux（不转码），保持 -c copy 可兼顾质量与速度。

WebCodecs：高速通道

WebCodecs 直接访问系统编解码器，需配合封装器生成 MP4 或 WebM。

const fps = 30;
const encoder = new VideoEncoder({
  output: handleChunk,
  error: console.error,
});

encoder.configure({
  codec: 'avc1.42E01E',
  width: canvas.width,
  height: canvas.height,
  bitrate: 3_000_000,
  framerate: fps,
});

let t0 = performance.now();
let frameIndex = 0;
const track = canvas.captureStream(fps).getVideoTracks()[0];
const reader = new MediaStreamTrackProcessor({ track }).readable.getReader();

async function pump() {
  const { value: frame, done } = await reader.read();
  if (done) {
    await encoder.flush();
    muxer.finalize();
    return;
  }
  const timestamp = Math.floor((performance.now() - t0) * 1000);
  const videoFrame = new VideoFrame(frame, { timestamp });
  encoder.encode(videoFrame, { keyFrame: frameIndex % (fps * 2) === 0 });
  frameIndex += 1;
  videoFrame.close();
  frame.close();
  pump();
}

function handleChunk(chunk) {
  muxer.addVideoChunk(chunk);
}

封装提示：WebCodecs 输出的是裸流，需依赖浏览器端 muxer 库生成可下载文件。若用于预览，可通过 Media Source Extensions 把片段推送到 video 标签。

与 FFmpeg WASM 相比，WebCodecs 往往拥有更低的编码延迟和较少的 CPU 占用，尤其是在具备硬件加速的设备上。

MediaRecorder：零门槛代理

const stream = canvas.captureStream(30);
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp9' });
const chunks = [];

recorder.ondataavailable = (event) => {
  if (event.data.size) {
    chunks.push(event.data);
  }
};

recorder.onstop = () => {
  const blob = new Blob(chunks, { type: recorder.mimeType });
  download(blob, 'preview.webm');
};

recorder.start();
// ... 渲染帧 ...
recorder.stop();

优势：简单直接，适合快速回顾或社交媒体代理。劣势：对 GOP、CRF、滤镜等高级参数的掌控有限。

如何选择合适的管线

任务 精度需求 延迟目标 推荐方案
提取音频、remux 高 低 FFmpeg WASM (-c copy)
波形或缩略图 高 低 FFmpeg WASM（滤镜）
精确剪辑 高 中 FFmpeg WASM（小范围重编码）
实时预览或屏幕捕获 中 极低 MediaRecorder
Canvas 时间线终稿导出 中 低 WebCodecs + 封装器
长时间离线转码 中 高 本地原生或服务器兜底

内存计算（开工前先规划）

  • 解码后的视频帧约等于宽 × 高 × 1.5 字节（YUV420p）。例如 1920x1080 约 3.1 MB/帧，120 帧缓存约 372 MB。
  • WASM 堆在滤镜（重采样、缩放）过程中会激增，尽量把中间结果落盘（OPFS）并流式处理。
  • 音频：48 kHz、16 bit、双声道 PCM ≈ 192 KB/s，5 分钟约 57 MB（未压缩驻留内存）。

实用建议

  • 能 remux 就别转码（-c copy）。
  • 将长任务拆段处理，写入 OPFS，再用 FFmpeg 拼接。
  • 预览阶段优先 WebCodecs，避免在 JS 内存里堆积大量原始帧。

可复现实验（发布前补齐数据）

在干净的生产构建中测试，并记录设备与浏览器信息。

  1. 音频提取（remux）

    • 输入：MP4（H.264 + AAC），1-2 分钟。
    • 命令：-i in.mp4 -vn -acodec copy out.m4a
    • 指标：耗时（毫秒）、JS 堆峰值（MB）、WASM 堆峰值（MB）、输出体积。

  2. 代理转码（4K → 1080p）

    • 命令：-vf scale=-2:1080 -c:v libx264 -preset veryfast -crf 23 -c:a aac -b:a 160k
    • 对比：FFmpeg WASM 与 WebCodecs（保持相似码率/帧率）。记录耗时、CPU 占用、丢帧情况。

  3. Canvas 时间线导出

    • 方法 A：WebCodecs 编码 + MP4 封装器。
    • 方法 B：MediaRecorder 30 fps 捕获。
    • 指标：编码帧率、总耗时、输出码率/体积、画质（可选 SSIM/PSNR）。

表格模板（将 N/A 替换为实测值）：

设备 / 浏览器 测试 管线 时间 (s) 平均 CPU (%) 峰值内存 (MB) 备注
M2 Pro / Chrome 128 音频提取 FFmpeg WASM 线程 + SIMD
M2 Pro / Chrome 128 4K → 1080p FFmpeg WASM 线程 + SIMD
M2 Pro / Chrome 128 4K → 1080p WebCodecs H.264 硬件
Pixel 8 / Chrome Canvas 导出 MediaRecorder VP9

测量辅助代码

const perf = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(entry.name, entry.duration);
  }
});

perf.observe({ entryTypes: ['measure'] });

const memory = performance.memory; // 仅 Chrome：usedJSHeapSize 与 totalJSHeapSize

常见问题处理

  • 导出像慢动作：确保传给 WebCodecs 的时间戳单调递增，或固定帧率编码。不要只依赖 requestAnimationFrame 的时间。
  • 音画不同步：以音频为时间源，钳制视频 PTS 或重采样音频。
  • 绿色画面/色彩偏移：确认像素格式（如 RGBA → I420）与色彩空间信息一致。
  • Safari 兼容性：WebCodecs 支持尚不完整，可回落到 MediaRecorder 或 WASM H.264。
  • 线程不可用：若缺少 SharedArrayBuffer（无 COOP/COEP），需加载单线程版 WASM 核心以避免运行时错误。

DojoClip 当前的混合策略

  • FFmpeg WASM：音频提取、波形/缩略图、精确剪辑、remux、字幕准备。
  • WebCodecs：Canvas 时间线预览与部分终稿导出（浏览器支持时）。
  • MediaRecorder：即时代理、快速分享视频、标签页演示录制。
  • 存储：OPFS 用于中间结果与可恢复导出；小任务直接在内存中处理。

我们会在后续文章中发布多设备、多浏览器的真实 benchmark 表格，一并分享当前编码参数。

附录 A — 安全默认值

  • H.264（Web）：-preset veryfast -crf 23 -maxrate 4M -bufsize 8M -pix_fmt yuv420p
  • 音频：-c:a aac -b:a 160k（音乐），-b:a 96k（语音主导）
  • 提前 seek 再转码（更快）：未需帧精度时在 -i input 之前加 -ss；需要帧精度则放在之后。
  • 字幕：尽量保留为 .srt/.vtt 辅助文件，仅在最终交付时烧录。

附录 B — 功能对照（节选）

能力 FFmpeg WASM WebCodecs MediaRecorder
精确滤镜图 是 否 否
硬件加速 否（CPU） 是 是
CFR/VFR 精准控制 是 是 有限
实时捕获 否 是（编解码） 是
内置 MP4 封装 是 否（需额外封装器） 否（常为 WebM）
上手难度 中 中 低

想亲自试试？

打开 DojoClip 的视频压缩器、音频提取器或字幕工作室，立刻体验这套技术栈。若你是开发者，敬请关注下一篇即将发布的 benchmark 工具，跑完测试后分享数据，我们会在公开表格中汇总，帮助创作者做出更明智的选择。