示例
本页面提供了 ffmpeg.wasm 仓库中包含的示例应用程序的高级概述。这些示例展示了如何在各种 JavaScript 框架和原生环境中集成和使用 ffmpeg.wasm，同时展示了单线程 (ST) 和多线程 (MT) 配置。
框架示例
该仓库包含多个演示与现代 Web 框架集成的应用程序。这些示例通常突出特定于框架的模式，例如在组件生命周期内管理 FFmpeg 实例或处理 No-SSR（服务器端渲染）约束。
支持的框架
| 框架 | 路径 | 线程 | 关键模式 |
|---|---|---|---|
| React + Vite | apps/react-vite-app | MT | useRef 用于实例管理，进度状态钩子。 |
| Next.js | apps/nextjs-app | ST | NoSSRWrapper 用于防止 WASM 在服务端执行。 |
| Angular | apps/angular-app | MT | 异步组件方法，rxjs 集成。 |
| Vue + Vite | apps/vue-vite-app | MT | 日志和进度的响应式状态。 |
| SvelteKit | apps/sveltekit-app | MT | 基于 Vite 的资源加载。 |
| SolidStart | apps/solidstart-app | MT | 用于 UI 更新的细粒度响应式。 |
有关详细的实施指南，请参阅 Framework Examples。
原生 JavaScript 示例
原生 JavaScript 示例提供了对 FFmpeg API 的最直接观察，无需框架抽象。这些示例通过专用的 Express 服务器提供，该服务器已配置了多线程模式下 SharedArrayBuffer 所需的 COOP/COEP 标头。
关键演示页面
- 转码：展示
writeFile、exec和readFile的基本用法。 - 多线程：演示加载
@ffmpeg/core-mt。 - 高级操作：包括视频修剪和使用
concat解复用器的示例。
有关设置原生环境的详细信息，请参阅 Vanilla JavaScript Examples。
交互式沙盒
交互式沙盒是构建在文档网站中的专用应用程序。它允许开发者使用基于 Web 的界面实时测试 FFmpeg 命令。
系统架构到代码映射
下图将功能沙盒组件与其底层实现实体连接起来。
有关使用和扩展沙盒的指南，请参阅 Interactive Playground。
示例生命周期
无论使用何种框架，所有示例都遵循标准执行生命周期以与 WebAssembly 核心交互。
处理流水线
本地运行示例
在运行任何示例之前，必须从根目录初始化 monorepo，以确保所有内部包 (@ffmpeg/ffmpeg, @ffmpeg/util) 都已构建并链接。
- 构建项目：在根目录下执行
npm run build。 - 导航：进入特定的应用目录（例如，
cd apps/vanilla-app）。 - 启动：运行本地开发服务器（例如，
npm run dev或npm run serve）。
[!CAUTION]如果服务器不提供
Cross-Origin-Embedder-Policy: require-corp和Cross-Origin-Opener-Policy: same-origin标头，大多数示例将无法加载 WASM 核心。