框架示例

本页面提供了将 ffmpeg.wasm 与各种 JavaScript 框架集成的技术指南。它详细说明了处理 WebAssembly 加载、多线程和特定于框架的生命周期管理所需的实现模式。

集成架构

集成遵循标准生命周期：实例化、加载资源、写入虚拟文件系统 (VFS)、执行以及读取结果。

代码到实体的映射

下图将高级集成步骤映射到特定的 API 调用和框架构造。

React (Vite) 实现

React 集成通常使用 useRef 来在重新渲染之间持久化 FFmpeg 实例而不触发重新渲染，并使用 useState 来跟踪 WASM 二进制文件的加载状态。

实现模式

• 持久化: const ffmpegRef = useRef(new FFmpeg())
• 加载: load 函数使用 toBlobURL 获取核心脚本和工作线程脚本，以绕过潜在的 CORS 问题
• 执行: transcode 函数在调用 exec 之前使用 writeFile 将文件写入内部 VFS

Next.js (SSR 处理)

Next.js 需要采用“无 SSR"模式，因为 ffmpeg.wasm 依赖于浏览器专用 API（如 Worker 和 WebAssembly），这些 API 在 Node.js 服务器端渲染期间不可用。

NoSSRWrapper 模式

为了防止框架在服务器上执行 ffmpeg.wasm 代码，使用了动态组件包装器。

关键文件：

• NoSSRWrapper.tsx: 使用带有 { ssr: false } 的 next/dynamic
• Home.tsx: 包含实际的 FFmpeg 逻辑，利用 useRef 和 useState

Angular 实现

Angular 实现使用类属性作为 FFmpeg 实例，并使用异步组件方法来处理生命周期。

组件结构

• 实例: 定义为类成员 ffmpeg = new FFmpeg()
• 事件处理: 日志通过 load() 方法内的 this.ffmpeg.on('log', ...) 捕获
• 数据流: transcode() 方法处理 VFS 操作并更新用于模板的 videoURL 属性

多线程配置

多线程需要 @ffmpeg/core-mt 包以及特定的 SharedArrayBuffer 标头。

配置表

线程数据流

下图说明了启用多线程时 FFmpeg 类如何与 Worker 系统交互。

构建系统集成

框架构建工具（Vite, Webpack, Vinxi）必须配置为处理大型 WASM 二进制文件和 SharedArrayBuffer 要求。

• Vite (React/Vue): 当使用 Vite 时，baseURL 应指向 esm 发行版：https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/esm
• SolidStart: 使用 vinxi 作为底层引擎。它需要针对 COOP/COEP 标头的服务器入口点配置。