使用ffmpeg.wasm在Next.js中从Canvas录视频时遇FS错误

• 强制组件在客户端运行
  Next.js 13的App Router默认是服务器组件，ffmpeg.wasm依赖浏览器环境的WebAssembly和文件系统API，必须在客户端组件中执行。在组件文件顶部添加'use client'指令，确保代码只在浏览器端运行。

• 严格控制文件操作顺序
  确保写入输入文件、执行转码、读取输出文件这三步是严格的异步顺序，不能并行操作。比如：

  // 先完成输入文件写入
  await ffmpegRef.current.writeFile('recorded.webm', recordedBlob);
  // 等待转码命令执行完毕
  await ffmpegRef.current.exec('-y', '-i', 'recorded.webm', '-an', '-c:v', 'copy', 'output_copy.webm');
  // 最后读取输出文件
  const outputBuffer = await ffmpegRef.current.readFile('output_copy.webm');
  

  若写入操作未完成就执行exec，会导致ffmpeg读取到不完整的文件，触发FS错误。

• 替换直接copy编码流的方式
  Canvas录制的WebM多采用VP9编码，而ffmpeg.wasm默认构建可能缺少完整的VP9编码支持，导致-c:v copy失败。尝试重新编码而非直接复制流：

  // 使用VP9重新编码
  await ffmpegRef.current.exec('-y', '-i', 'recorded.webm', '-an', '-c:v', 'libvpx-vp9', '-crf', '30', 'output.webm');
  

  如果需要H.264格式，需引入支持H.264的ffmpeg.wasm完整版本（可通过安装@ffmpeg/ffmpeg的full包获取）。

• 调整内存分配
  浏览器中ffmpeg.wasm的默认内存限制可能不足以处理视频，初始化时指定更大内存：

  import { createFFmpeg } from '@ffmpeg/ffmpeg';
  
  const ffmpeg = createFFmpeg({
    log: true,
    corePath: '/ffmpeg-core.js', // 核心文件需放在Next.js的public目录下
    mem: 8 * 1024 * 1024 * 1024 // 分配8GB内存，按需调整
  });
  

• 确认核心文件路径正确性
  ffmpeg的核心文件（ffmpeg-core.js、ffmpeg-core.wasm、ffmpeg-core.worker.js）必须放在Next.js的public目录下，初始化时的corePath要指向正确的相对路径，否则核心加载失败会间接引发FS错误。

内容的提问来源于stack exchange，提问作者NineCattoRules