用途:在浏览器或边缘环境中通过 WebAssembly 运行 FFmpeg,实现客户端视频转码,无需服务端处理。适用于 React/Vue/Next.js 集成、COOP/COEP 头配置、内存管理与清理等场景。
主要能力:ffmpeg.wasm 是 FFmpeg 的纯 WebAssembly/JavaScript 移植,可在现代浏览器直接运行。提供单线程核心 @ffmpeg/core(约 31MB)与多线程核心 @ffmpeg/core-mt(需 SharedArrayBuffer)。支持自定义核心以裁剪编解码器。常见操作包括 WebM 转 MP4、提取音频、生成缩略图、裁剪、加水印、缩放等,均通过 ffmpeg.exec 传入参数数组完成。
使用方式:安装命令为 npm install @ffmpeg/ffmpeg @ffmpeg/util,也可通过 CDN 引入。基本流程为创建 FFmpeg 实例、load 加载核心(coreURL/wasmURL,多线程还需 workerURL)、writeFile 写入输入、exec 执行、readFile 读取输出。多线程需配置跨源隔离头:Cross-Origin-Embedder-Policy: require-corp 与 Cross-Origin-Opener-Policy: same-origin,文档给出 Vite、Next.js、Express、Nginx 配置示例。
限制:性能约为原生 FFmpeg 的 10-100 倍慢;受浏览器内存限制;核心体积约 31MB;多线程依赖特定头;部分编解码器因授权不可用。Cloudflare Workers 存在 10MB 压缩限制、无法创建 Web Worker、无 SharedArrayBuffer 等问题,建议改用外部 FFmpeg 服务、R2 加队列、自定义精简构建或 Cloudflare Stream。优化建议包括懒加载、Web Worker、分块处理、IndexedDB 缓存核心、显示进度、及时 deleteFile 与 terminate 释放内存。常见问题含 SharedArrayBuffer 未定义、Worker 未定义、内存不足与编码缓慢。