概述
ffmpeg.wasm 是 FFmpeg 的纯 WebAssembly / JavaScript 移植版本,可在 Web 浏览器内直接实现视频和音频的录制、转换和流媒体传输。通过利用 Emscripten 将 FFmpeg 源代码及其相关编解码器库进行转译,ffmpeg.wasm 将多媒体处理卸载到客户端,确保数据安全并降低服务器端的计算成本。
本页面提供了 ffmpeg.wasm 系统、其架构及功能的高层概述。
系统架构
ffmpeg.wasm 设计用于在不阻塞浏览器主线程的情况下处理资源密集型的转码任务。它通过将任务卸载到 Web Worker (ffmpeg.worker) 来实现这一目标,该 Worker 负责管理 WebAssembly 核心的生命周期。
系统架构包括:
- JavaScript API 层 (
@ffmpeg/ffmpeg):提供FFmpeg类和FFMessageType协议,用于与 Worker 交互。 - WebAssembly 核心模块:系统的“引擎”,提供单线程 (
@ffmpeg/core) 或多线程 (@ffmpeg/core-mt) 版本。 - 虚拟文件系统:由 Emscripten 提供的 FS,允许 WASM 模块在浏览器环境中读写数据。
详情参见 架构。
项目结构
该仓库使用 npm workspaces 作为单体仓库 (monorepo) 进行管理,包含核心包、工具库以及各种特定框架的示例应用程序。
详情参见 项目结构。
功能与能力
ffmpeg.wasm 支持广泛的编解码器和库,这些已被编译进 WASM 二进制文件中。包含的关键库有 x264 (H.264)、x265 (HEVC)、libvpx (VP8/VP9)、opus 和 lame (MP3)。
| 功能 | 描述 |
|---|---|
| 多线程 | 使用 SharedArrayBuffer 和 @ffmpeg/core-mt 实现高达 2 倍的速度提升。 |
| VFS 支持 | 支持 MEMFS、IDBFS 和 WORKERFS 以处理大文件。 |
| 安全性 | 完全在客户端运行;数据永远不会离开浏览器。 |
| 广泛的编解码器支持 | 包括用于字幕的 libass 和用于图像缩放的 zimg。 |
限制:
- 2 GB 限制:WebAssembly 对输入文件大小设定的硬性限制。
- 浏览器头部:多线程功能需要
COOP和COEP头部。 - 不支持 Node.js:Node.js 支持已在 0.12.0 版本中停止,转而采用原生替代方案。
详情参见 功能与能力。
基本使用模式
现代 API (0.12+) 采用基于类的方法以及事件发射器来进行日志记录和进度跟踪。
import { FFmpeg } from '@ffmpeg/ffmpeg';
import { fetchFile, toBlobURL } from '@ffmpeg/util';
const ffmpeg = new FFmpeg();
// 订阅事件 [apps/website/docs/migration.md:34-35]
ffmpeg.on('log', ({ message }) => console.log(message));
await ffmpeg.load({
coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
});
// 写入虚拟文件系统 [apps/website/docs/migration.md:31]
await ffmpeg.writeFile('input.mp4', await fetchFile('/path/to/video.mp4'));
// 执行命令 [apps/website/docs/migration.md:30]
await ffmpeg.exec(['-i', 'input.mp4', 'output.avi']);
// 读取结果 [apps/website/docs/migration.md:32]
const data = await ffmpeg.readFile('output.avi');关于集成的完整指南,请参见 使用指南。