😠受不了那些视频转GIF要收费的工具,我自己写了一个

前言

最近自己有一个视频转 GIF 的需求,于是就在某度上搜了一下。

然后,搜出来的东西,要么要下载,要么转换需要会员之类的。然后我就忍不了了,我只想要一个很基础的视频转 GIF 功能。

无奈之下,只好自己写一个了。我想要的是一个 web 端的视频转 GIF 应用,可以支持一些简单的配置,比如说:

  • 分辨率
  • 帧率
  • 常见的视频格式支持,对我来说就是 mp4webm

这个时候就需要用到 FFMpegwasm 版本,文档地址在这里:ffmpeg.wasm文档

FFMpeg引入

按照惯例先简单介绍一下什么是 FFmpegFFmpeg 是一个开源的跨平台音视频处理工具集,它提供了丰富的命令行选项和参数,可以满足各种多媒体处理需求,比如视频转码、音频提取、视频剪辑、视频合并等。

FFmpeg wasmFFmpegWebAssembly(Wasm) 版本。 WebAssembly 是一种低级别的字节码格式,可以在 Web 浏览器中运行,它提供了一种跨平台、高性能的执行环境。 FFmpeg wasm 就是将 FFmpeg 工具集编译成 WebAssembly 格式,以便在浏览器中直接运行 FFmpeg 功能,而无需依赖服务器端的转码或处理。

也就是说,利用 FFmpeg wasm ,我们就可以在浏览器环境实现一些音视频处理的功能,而不需要依赖服务器。

安装一下需要的依赖:npm i @ffmpeg/ffmpeg @ffmpeg/util

然后把官网的代码拷下来试试看:

这里有几个问题需要注意:

  1. 如果你是使用 vite 打包的,在 baseURL 中把 umd 换成 esm
  1. 同样,如果你是使用 vite 打包的,在 vite 配置中加上如下配置:

不然会报下面的错:

然后发现,跑是能跑的

就是这个 wasm 文件加载需要一些时间,一个是因为比较大,另一个主要的原因是引的外部链接。如果我单纯使用开发模式,则可以把它下载下来放到本地。这样还在就会快很多。

下载一下这两个文件,放到我们自己的工程的 public 目录下:

然后把 baseUrl 改成空字符串,读取我们本地的文件,加载就会嘎嘎快

简版实现

前置工作做完之后,我们来开始实现一个简版。页面非常简单:

  • 一个上传按钮,用来上传视频
  • 上传好的视频预览一下
  • 点击转换的按钮

先看一下 html 结构:

js 复制代码
    <div className={styles.container}>
      <Row>
        <Button type="primary" onClick={() => uploadRef.current.click()}>
          上传视频
        </Button>
        <input
          accept="video/mp4,video/webm"
          onChange={handleFileChange}
          ref={uploadRef}
          type="file"
          className={styles.upload}
        />
      </Row>
      <Divider />
      {!isEmpty(currentUrl) && (
        <>
          <video style={{ maxHeight: 200 }} src={currentUrl} controls></video>
          <Divider />
        </>
      )}

      <Button type="primary" onClick={transform}>
        转换并下载
      </Button>
    </div>

搞一个按钮,点击的时候触发文件上传,然后把上传的文件保存下来,同时对上传的文件生成 URL 用来预览

js 复制代码
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setCurrentFile(file);
    if (currentUrl) {
      URL.revokeObjectURL(currentUrl);
    }
    setCurrentUrl(URL.createObjectURL(file));
  };

使用 ffmpeg 将视频转成 GIF 的时候,主要用到这个命令:

css 复制代码
ffmpeg -i input.mp4 -c:v gif output.gif

先实现一个入口函数:

js 复制代码
  const transform = async () => {
    const type = currentFile.type;
    setLoading(true);
    const videoType = type.split("/")[1]; //webm 或者 mp4
    try {
      await doTransform(videoType);
    } catch (err) {
      console.log("transform error", err);
    } finally {
      setLoading(false);
    }
  };

doTransform 中实现真正的转换:

js 复制代码
  const doTransform = async (fileType) => {
    const ffmpeg = ffmpegRef.current;
    await ffmpeg.writeFile(`input.${fileType}`, await fetchFile(currentFile));
    await ffmpeg.exec(["-i", `input.${fileType}`, "-c:v", "gif", "output.gif"]);
    const data = await ffmpeg.readFile("output.gif");
    const url = URL.createObjectURL(
      new Blob([data.buffer], { type: "image/gif" })
    );
    download(url);
  };

然后实现一个简单的下载函数,把转换好的 GIF 下载下来:

js 复制代码
  const download = (url) => {
    const link = document.createElement("a");
    link.href = url;
    link.download = "output.gif";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  };

可以看到转换是没问题的,就是体积有点太大了

下面就来做实现一些配置,压缩一下转换的 GIF

拓展配置

下面来支持一下转换 GIF 结果的帧率以及分辨率的配置,来让我们可以选择 GIF 的质量和大小。

分辨率这里可以先取到视频原始的分辨率,通过监听 onLoadedMetadata 就可以在视频加载完成后取到

js 复制代码
  const onLoadedMetadata = () => {
    const video = videoRef.current;
    setConfig({
      width: video.videoWidth,
      height: video.videoHeight,
    });
  };

然后根据自己的心情,大致给分辨率定几个选项:

js 复制代码
  const ratioOptions = useMemo(() => {
    if (isEmpty(config)) {
      return [];
    }
    const { width, height } = config;
    return [1, 0.75, 0.5, 0.33, 0.25, 0.2, 0.1].map((item) => {
      const newWidth = Math.round(width * item);
      const newHeight = Math.round(height * item);
      return {
        label: `${newWidth}x${newHeight} (${item * 100}%)`,
        value: `${newWidth}x${newHeight}`,
      };
    });
  }, [config]);

帧率的话就是一个滑块组件,步长为 1 ,最小为 5, 最大为 30

然后修改一下 ffmpeg 转换的命令

js 复制代码
const [width, height] = currentRatio.split("x");
await ffmpeg.exec([
  "-i",
  `input.${fileType}`,
  "-vf",
  `fps=${currentFPS},scale=${width}:${height}:flags=lanczos`,
  "-c:v",
  "gif",
  "output.gif",
]);

大功告成:

最后

看了下市面上的视频转 GIF 工具,大多数还有一个选择时间区间的功能。比如说我有一个视频 20秒 ,我可以只选择它 5-10秒 的部分来转换成一个 GIF

这个 ffmpeg 也是可以实现的,对应的命令是:

js 复制代码
ffmpeg -ss 00:00:01 -t 00:00:05.5 -i input.mp4 -vf -c:v gif output.gif

在这个示例中,-ss -ss 00:00:01表示从第1秒开始,-t 00:00:05.5 表示持续 5.5 秒钟。这样就可以实现转换指定时间区间的功能。

但是这个功能对我目前来说好像用的比较少🤔️,所以我就没做。

再一个就是我之前尝试使用 webcodecs 来做视频转 GIF ------纯前端也能实现视频转GIF,但是 webcodecs 在这里充当的只是一个解码器的角色,只是把视频解码成一帧帧图像,而将图像合成为 gif 的时候用到了其他库,这一整个过程下来的速率是远比使用 ffmpeg 去做要慢的。

而且 ffmpeg 还支持很多的配置,所以如果真的要做成一个工具自己平时用起来,那还是 ffmpeg 比较靠谱。但是 ffmpeg 包体积比较大,所以就看怎么取舍吧。

以上就是本文的全部内容,如果你觉得有意思的话,点点关注点点赞吧~

相关推荐
虾球xz11 分钟前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇16 分钟前
HTML常用表格与标签
前端·html
疯狂的沙粒20 分钟前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员36 分钟前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐38 分钟前
前端图像处理(一)
前端
程序猿阿伟1 小时前
《智能指针频繁创建销毁:程序性能的“隐形杀手”》
java·开发语言·前端
疯狂的沙粒1 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪1 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背1 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M1 小时前
node.js第三方Express 框架
前端·javascript·node.js·express