浏览器端@ffmpeg/ffmpeg处理大视频报OOM错误求助

核心原因 #

RuntimeError: abort(OOM) 报错是因为WebAssembly实例的默认内存配额不足以处理10MB视频的解码/编码操作——视频处理过程中需要临时内存存储帧数据、编码缓存等，文件体积越大，所需的临时内存越高。

解决方案 #

1. 提升FFmpeg实例的内存配额 #

创建FFmpeg实例时，通过mem参数指定更大的内存限制（单位为MB），根据浏览器可用内存调整，例如设置为2048MB（2GB）：

const ffmpeg = createFFmpeg({
  corePath: "https://unpkg.com/@ffmpeg/core@0.11.0/dist/ffmpeg-core.js",
  log: true,
  mem: 2048 // 增加内存配额，按需调整数值
});

2. 添加高效编码参数减少内存占用 #

直接转码时FFmpeg默认参数内存消耗较高，添加针对性的压缩参数，既控制输出质量，又降低内存压力：

await ffmpeg.run(
  "-i", "input.mov",
  "-crf", "28", // 压缩质量控制，范围18-28，值越大文件越小、质量越低
  "-preset", "medium", // 平衡编码速度与压缩效率的预设
  "-threads", "2", // 限制线程数，减少并发内存占用
  "output.mp4"
);

3. 及时清理临时资源避免内存泄漏 #

处理完成后，释放FFmpeg文件系统中的临时文件和Blob URL，防止内存堆积：

const handleUpload = async (e) => {
  const file = e.target.files[0];
  try {
    ffmpeg.FS("writeFile", "input.mov", await fetchFile(file));
    await ffmpeg.run("-i", "input.mov", "-crf", "28", "-preset", "medium", "output.mp4");
    const data = ffmpeg.FS("readFile", "output.mp4");
    const compressedVideo = URL.createObjectURL(
      new Blob([data.buffer], { type: "video/mp4" })
    );
    setCompressedVideo(compressedVideo);
  } finally {
    // 删除FFmpeg文件系统中的临时文件
    ffmpeg.FS("unlink", "input.mov");
    ffmpeg.FS("unlink", "output.mp4");
    // 在组件卸载时记得释放Blob URL：URL.revokeObjectURL(compressedVideo)
  }
};

4. 升级FFmpeg核心版本 #

你当前使用的core版本为0.11.0，较旧版本可能存在内存管理缺陷，升级到稳定的新版本（如0.20.x）可优化内存使用：

const ffmpeg = createFFmpeg({
  corePath: "https://unpkg.com/@ffmpeg/core@0.20.0/dist/ffmpeg-core.js",
  log: true,
  mem: 2048
});

注意事项 #

• 浏览器内存受设备总内存和当前标签页可用内存限制，若设备本身内存不足，即使调整参数仍可能报错。
• 视频编码格式影响内存占用，比如ProRes编码的MOV文件，解码所需内存远高于H.264编码的MOV。

内容的提问来源于stack exchange，提问作者Martí Serra Molina