原生 JavaScript 示例

本文档说明了如何在无框架依赖的纯 JavaScript 环境中使用 ffmpeg.wasm。它涵盖了 vanilla-app 演示环境的设置，以及转码、裁剪和拼接的具体实现模式。

概述

vanilla-app 作为在浏览器环境中使用 ffmpeg.wasm 的参考实现。它包含了单线程 (ST) 和多线程 (MT) 核心的示例，并以 UMD (通用模块定义) 和 ESM (ECMAScript 模块) 形式分发。

设置与服务器配置

原生示例需要一个本地服务器来处理资源并设置 WebAssembly 执行所必需的安全标头 (COOP/COEP)。

安装与资源准备

运行之前，必须使用辅助脚本从 npm 下载资源到本地的 public/assets 目录。

1. 运行 npm run download 以执行 ../../scripts/download-assets.js
2. 运行 npm start 启动 Express 服务器

Express 服务器实现

该服务器使用 express 和 serve-index 来提供 public 目录的服务。对于多线程版本的功能实现，服务器提供以下标头至关重要：

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

实现模式

1. 转码 (UMD)

基本的转码模式涉及初始化 FFmpeg 类，加载核心，将文件写入虚拟文件系统 (VFS)，并执行命令。

关键代码参考：

• 初始化：UMD 版本通过 FFmpegWASM.FFmpeg 和 FFmpegUtil.fetchFile 访问 API
• 加载核心：coreURL 指向核心的 UMD 分发版本
• 进度跟踪：progress 事件提供一个介于 0 和 1 之间的值，以及以微秒为单位的 time 值

2. 多线程 (MT)

多线程实现与单线程版本几乎相同，但加载了不同的核心二进制文件。

3. 拼接 (解复用器)

concatDemuxer.html 示例展示了如何处理多个输入文件并在 VFS 中使用基于文本的指令文件。

拼接数据流：

1. 文件上传：通过 <input type="file" multiple /> 选择多个文件
2. VFS 填充：每个文件都使用 ffmpeg.writeFile 写入 VFS
3. 清单创建：创建一个包含如 file input1.mp4 行的 concat_list.txt
4. 执行：运行命令 ffmpeg.exec(['-f', 'concat', '-safe', '0', '-i', 'concat_list.txt', 'output.mp4'])

4. 视频裁剪

trim.html 示例展示了如何使用 FFmpeg 搜索标志 (-ss 用于开始时间，-to 用于结束时间)。

• 命令：ffmpeg.exec(['-i', name, '-ss', '0', '-to', '1', 'output.mp4'])

ESM 与 UMD 用法

该仓库提供了两种模块系统的示例。

ESM (ECMAScript 模块)

用于 transcode.esm.html 和 transcode-mt.esm.html。

• 导入语法：使用标准的 import 语句指向 dist/esm/ 目录
• 脚本类型：需要 <script type="module">

UMD (通用模块定义)

用于 transcode.html、trim.html 和 concatDemuxer.html。

• 加载：通过标准 <script src="..."> 标签加载
• 全局作用域：附加到 window.FFmpegWASM 和 window.FFmpegUtil

性能参考

单线程 (core) 和多线程 (core-mt) 版本之间的性能差异显著。在测试环境 (Intel i5-1135G7) 中，将 10 秒 WebM 转码为 MP4 的结果如下：

• Native FFmpeg：约 5.2 秒 (基准)
• ffmpeg.wasm (MT)：约 60.4 秒 (约为原生速度的 0.08x)
• ffmpeg.wasm (ST)：约 128.8 秒 (约为原生速度的 0.04x)