使用ffmpeg和React来创建一个Gif Maker

今天我们将使用ffmpeg，根据他们的页面，它允许你...

"解码,编码,转码, 混频, 解复用,流, 过滤 和 播放 几乎所有人类和机器创造的东西"。

你可以用ffmpeg做很多事情，我看到人们用它做的主要事情包括：降低视频帧率（使尺寸更小），降低视频质量，将视频格式转码为其他视频（或图像）格式，以及为视频或文本添加覆盖物（如创建你自己的水印）。

在本教程中，我们将创建一个玩具例子，把视频变成GIF

是的，我在本文中使用了创建gif的工具。

ffmpeg命令

首先，让我们看看我们将运行的命令......

ffmpeg -i vid.mp4 -s 480x320 -r 3 -t ${length} -ss ${start} -f gif out.gif

• -i =>输入
• -s =>大小
• -r => 帧率（即3帧/秒）。
• -t => 长度，以秒为单位
• -ss => 开始偏移，以秒计
• -f => 输出格式

看起来很简单，如果你的机器上安装了ffmpeg，你也可以在cli中运行这个命令。

输入法

首先，创建你的react应用程序...

然后我们将需要以下三个包

"@ffmpeg/core": "^0.10.0","@ffmpeg/ffmpeg": "^0.9.8","http-proxy-middleware": "^2.0.6",

代码

由于我们使用WebAssembly来运行ffmpeg，我们需要在我们的应用程序中添加一些跨源头文件（对react来说不是默认的），所以在你的src目录下创建一个名为setupProxy.js 的文件。

setupProxy.js

这将在我们运行react应用时自动添加这些头文件。

接下来，让我们更新我们的App.js

App.js

• 第4行。我们创建一个ffmpeg实例，并将日志设置为true，这样我们就可以在控制台看到日志了。
• 构造函数。 我们创建一些状态项来跟踪当前应用程序的状态
• **ComponentDidMount & loadFFmpeg。**在这里，我们等待我们的react组件挂载，然后加载ffmpeg的Web组件代码，然后我们将ready设置为true，表示我们已经准备好转换视频。
• ConvertVideoToGif。这是实际工作的地方，我们在第23行将 视频文件写入ffmpeg的文件系统**。** 然后，我们在第26行运行我们的ffmpeg命令。最后，我们从ffmpeg的文件系统中得到结果，并将字节转换成gif类型的blob url，我们可以在第29-31行向用户展示。
• 渲染。这是我们的用户界面部分，如果我们还没有准备好，我们将显示 "正在加载..."，否则我们将显示输入字段。我们有视频、开始时间和长度的输入，所有这些都有一个onChange处理程序来更新它们各自的状态域**（第43-51行**）。我们有一个视频**（第39-42行**）和图像**（第53-56行）视图，如果我们的视频和gif状态不是空的，就会显示。最后，我们有一个按钮，点击后将把我们的视频转换为gif（第52行**）。

运行它!

现在是时候测试它了!运行npm start来启动你的react应用，并上传一段视频进行转换（转换可能需要几秒钟，查看控制台中的日志来查看ffmpeg的更新）。这只是一个起点，你可以将其自动化，为登陆S3的视频创建一些自动gif生成，转码和降低视频质量以支持低频带宽度的用户，自动生成一些图像标识的多种分辨率，等等......有了ffmpeg这样强大的工具，谁还需要任何昂贵的视频编辑工具呢？