FFmpeg.js API 文档与代码示例
FFmpeg.js API 文档与代码示例
FFmpeg.js 是 FFmpeg 的 JavaScript 端口，允许您在浏览器中执行各种多媒体处理任务，无需服务器端交互。它利用 WebAssembly 技术，提供接近原生性能的音视频编解码、转码、滤镜应用等功能。本文将深入探讨 FFmpeg.js 的 API，并提供丰富的代码示例，帮助您快速上手并将其集成到您的 Web 项目中。
核心 API
FFmpeg.js 的核心功能通过 FFmpeg 对象暴露。您可以通过 createFFmpeg 函数创建一个新的 FFmpeg 实例：
javascript
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({
log: true, // 开启日志输出
corePath: 'https://unpkg.com/@ffmpeg/[email protected]/dist/ffmpeg-core.js', // 指定 core 路径
});
createFFmpeg 函数接受一个配置对象，其中常用的选项包括：
log: 是否开启日志输出，默认为false。corePath: 指定 FFmpeg core 文件的路径。mainName: 指定 main 模块的名称，默认为main。
创建 FFmpeg 实例后，需要先加载 FFmpeg core 文件：
javascript
await ffmpeg.load();
加载完成后，您可以使用 FS 模块操作虚拟文件系统，将输入文件写入内存：
javascript
const fileData = await fetchFile('input.mp4');
ffmpeg.FS('writeFile', 'input.mp4', fileData);
FS 模块提供了类似 Node.js fs 模块的 API，例如 readFile、writeFile、unlink 等。
运行 FFmpeg 命令
加载输入文件后，您可以使用 run 方法执行 FFmpeg 命令：
javascript
await ffmpeg.run('-i', 'input.mp4', '-c:v', 'libx264', 'output.mp4');
run 方法接受一个字符串数组作为参数，每个元素代表一个命令行参数。
获取输出文件
执行命令后，您可以使用 FS 模块读取输出文件：
javascript
const outputData = ffmpeg.FS('readFile', 'output.mp4');
outputData 是一个 Uint8Array 类型的数组，包含输出文件的二进制数据。您可以将其转换为 Blob 对象，然后创建 URL，用于下载或在浏览器中预览：
```javascript
const blob = new Blob([outputData.buffer], { type: 'video/mp4' });
const url = URL.createObjectURL(blob);
const videoElement = document.createElement('video');
videoElement.src = url;
document.body.appendChild(videoElement);
```
更复杂的例子：音频转码和合并
以下示例演示如何将多个音频文件转换为 MP3 格式，并合并成一个文件：
```javascript
const { createFFmpeg, fetchFile } = FFmpeg;
const ffmpeg = createFFmpeg({ log: true });
await ffmpeg.load();
const audioFiles = ['audio1.wav', 'audio2.wav'];
const outputFileName = 'merged.mp3';
for (const file of audioFiles) {
const fileData = await fetchFile(file); // 假设你已经获取了音频文件的数据
ffmpeg.FS('writeFile', file, fileData);
// 将每个音频文件转换为 MP3 格式
await ffmpeg.run('-i', file, '-c:a', 'libmp3lame', ${file}.mp3);
ffmpeg.FS('unlink', file); // 删除原始文件
}
// 合并所有 MP3 文件
const inputFiles = audioFiles.map(file => ${file}.mp3);
const concatList = inputFiles.map(file => file '${file}').join('\n');
ffmpeg.FS('writeFile', 'concat.txt', concatList);
await ffmpeg.run('-f', 'concat', '-safe', '0', '-i', 'concat.txt', '-c', 'copy', outputFileName);
// 清理中间文件
ffmpeg.FS('unlink', 'concat.txt');
inputFiles.forEach(file => ffmpeg.FS('unlink', file));
const outputData = ffmpeg.FS('readFile', outputFileName);
const blob = new Blob([outputData.buffer], { type: 'audio/mpeg' });
const url = URL.createObjectURL(blob);
const audioElement = document.createElement('audio');
audioElement.src = url;
audioElement.controls = true;
document.body.appendChild(audioElement);
```
处理进度
FFmpeg.js 提供了 progress 事件，可以用来跟踪处理进度：
javascript
ffmpeg.setProgress(({ ratio }) => {
console.log(`Progress: ${ratio * 100}%`);
});
ratio 的取值范围是 0 到 1，表示处理进度。
错误处理
run 方法可能会抛出错误，例如命令行参数错误或处理过程中出现问题。您可以使用 try...catch 块捕获错误：
javascript
try {
await ffmpeg.run(...command);
} catch (error) {
console.error('Error:', error);
}
其他 API
除了上述核心 API 外，FFmpeg.js 还提供了一些其他 API，例如：
exit：退出 FFmpeg.js。wasm: 访问底层 WebAssembly 模块。
总结
FFmpeg.js 为 Web 开发者提供了强大的多媒体处理能力。通过本文的介绍和示例，您可以了解 FFmpeg.js 的核心 API，并将其集成到您的 Web 项目中，实现各种音视频处理功能。记住要根据实际需求选择合适的 FFmpeg 命令，并处理潜在的错误。希望本文能帮助您更好地理解和使用 FFmpeg.js。 建议在实际使用过程中参考官方文档和示例，以获取更全面的信息和指导. 此外，要注意浏览器兼容性问题，以及处理大文件时可能出现的性能瓶颈。 通过合理的代码优化和资源管理，可以最大程度地发挥 FFmpeg.js 的优势，为用户提供流畅的音视频体验。 不断学习新的 FFmpeg 命令和技巧，可以拓展 FFmpeg.js 的应用场景，实现更丰富的多媒体功能。