如何在React.js项目中使用最新版本的@ffmpeg/ffmpeg？

Question

我正在开发一个 React.js 项目，我需要使用 @ffmpeg/ffmpeg 在浏览器中处理视频。我注意到最近该包更新了，API和功能都发生了变化。

在旧版本中，我曾经这样导入包和函数：

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

但是，在最新版本中，我看到导入已更改为：

import { FFmpeg } from '@ffmpeg/ffmpeg';

所有新功能都已更改我已通过日志签入：

我通过控制台 ffmpeg 检查过，它显示：

createDir: path => {…}
deleteDir: path => {…}
deleteFile: path => {…}
exec: ƒ ( /** ffmpeg command line args */ args)
listDir: path => {…}
load: ƒ ()
loaded: true
readFile: ƒ (path)
rename: (oldPath, newPath) => {…}
terminate: () => {…}
writeFile: (path, data) => {…}

我不确定API和功能的变化，也找不到任何关于如何在React.js项目中使用最新版本的@ffmpeg/ffmpeg的更新文档或指南。

我有流媒体视频处理任务，需要在视频中添加徽标。

有人可以提供有关如何在 React.js 项目中使用最新版本的 @ffmpeg/ffmpeg 的指导吗？具体来说，我正在寻找有关 API 更改、新函数名称以及如何使用最新版本执行视频处理任务的信息。

如果任何人有使用最新版本@ffmpeg/ffmpeg的经验或知道更新的用法，任何帮助或示例将不胜感激。谢谢！

Answer 1

来自库作者的详细帖子，他讲述了版本 0.12.0 中的更改。

指南，描述了迁移到最新版本的过程，你可以看到这里

Answer 2

这里列出了一些基本更改，可以帮助您了解最新（0.12.10）版本的更改是如何进行的：

1. 第一次更改导入

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';

正如您提到的，这不再可用。您需要导入两个文件并需要安装两个软件包

import { FFmpeg } from '@ffmpeg/ffmpeg'
import { fetchFile } from '@ffmpeg/util

2. FFmpeg实例

   const ffmpeg = new FFmpeg();

以前就像 ffmpeg = createFFmpeg()

3. 读取、写入、运行等方法已完全更改，如下面的代码片段所述：

   等待 ffmpeg.load(); 等待 ffmpeg.writeFile("image.png", 等待 fetchFile(imageFile)); 等待 ffmpeg.writeFile("sound.mp3", 等待 fetchFile(soundFile)); 等待 ffmpeg.exec(['-i', 'sound.mp3', '-i', 'image.png', 'output.mp4']); const data = wait ffmpeg.readFile('output.mp4'); setVideoSrc(URL.createObjectURL(new Blob([data.buffer], { type: "video/mp4" })))