纯前端也能实现视频转GIF

前言

之前使用过FFMpeg来做视频转GIF，但是FFMpeg的体积还是太大了，前端加载一般要10M左右。后面发现了 Webcodecs 这个新的 Web API ，它提供了解码视频的能力。所以就沿着这个方向去使劲，也是实现了一个纯前端的在线的视频转 GIF 功能。

本文一共会按照以下三步去实现一个视频转 GIF 功能：

• 解封装视频，从视频文件中获取视频帧
• 解码视频帧，获取帧图像信息
• 拼装帧图像信息，生成 GIF

视频解封装

视频解封装是从一个包含多种媒体数据的容器中提取出特定类型的媒体数据的过程。通过解封装，可以从容器中分离出视频轨道、音频轨道等各种媒体数据。

它的主要目的是获取原始的音频、视频等媒体数据，以便进行后续的处理，比如播放、编辑或者转码。解封装后的数据可以根据需要被送入相应的解码器进行解码。

这里使用到的是 mp4box.js 这个库去解码上传的视频文件，以获取视频轨道信息。首先定义一个获取文件 Buffer 的方法，我这里是上传文件然后去获取 ArrayBuffer ：

const getFileArrayBuffer = (file) => {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onload = (e) => {
resolve(e.target.result);
};
reader.readAsArrayBuffer(file);

然后调用 mp4box 去解封装视频的轨道信息

以下大概是一个视频轨道的字段：

这里如果我们想获取视频的时长，帧率等信息，需要做一些小小的转换。nb_samples是视频总帧数； movie_timescale 我理解是视频的一个采样单位，拿 movie_duration/movie_timescale 才是我们视频的长度，这里大概是 18.2 秒。帧率就是总帧数/视频时长，这里大概是 15FPS 。

获取视频帧

获取视频帧这里用到的是一个较新的 Web API ， VideoDecoder  和  EncodedVideoChunk ，它们的API兼容性如下：

• VideoDecoder是一个较新的API，它可以让我们通过JS在浏览器中解码视频
• EncodedVideoChunk是指表示视频编码数据块对象，用于表示已经编码的视频数据，这些数据可以通过网络传输并在接收端进行解码。

我们利用VideoDecoder将mp4box解封装后得到的轨道信息进一步解析成一帧一帧的图片，为我们后续的合成GIF做准备