Создайте конвертер GIF с помощью React

Просматривая свои репозитории на GitHub в поисках идей для постов, я нашел один из них под названием «gifmaker». Я сделал это довольно давно, и я думаю, что следовал какому-то туториалу на YouTube. Я проверил код, и, к моему удивлению, он действительно простой, короткий и прекрасно работает.

Начнем с создания нашего Приложения React вместе с веб-пакетом:

npx create-snowpack-app [name-dir] --template @snowpack/app-template-react

(Не забудьте изменить [name-dir])

После того, как мы создали наше приложение React, нам нужно установить инструмент, который мы собираемся использовать для преобразования наших видео в GIF. Мы можем сделать это с помощью этой команды:

npm install @ffmpeg/ffmpeg @ffmpeg/core

Теперь мы можем начать кодирование.

import React, { useState, useEffect } from 'react';
import './App.css';
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({ log: true });
function App() {
  const [ready, isReady] = useState(false);
  const [video, setVideo] = useState();
  const [gif, setGif] = useState();
const load = async () => {
    await ffmpeg.load();
    isReady(true);
  };
useEffect(() => {
    load();
  }, []);

Так что же здесь происходит? Хорошо, во-первых, мы импортируем ffmpeg, инициализируем его, объявляем некоторые переменные, которые мы собираемся использовать позже (поверьте мне), и, поскольку загрузка ffmpeg занимает некоторое время, мы создаем асинхронную функцию и вызываем ее внутри хука «useEffect». Ничего особенного, верно? Давайте продолжим.

Это метод, который мы собираемся использовать для преобразования наших видео в GIF:

const convertToGif = async () => {
    ffmpeg.FS('writeFile', 'giphy.mp4', await fetchFile(video));
await ffmpeg.run('-i', 'giphy.mp4', '-f', 'gif', 'out.gif');
const data = ffmpeg.FS('readFile', 'out.gif');
const url = URL.createObjectURL(
      new Blob([data.buffer], { type: 'image/gif' }),
    );
setGif(url);
  };

Здесь мы сообщаем ffmpeg, что пишем файл (GIF), читаем видео и конвертируем видео в GIF. Есть много интересных вещей, которые мы можем создать, играя эти аргументы из методов, мы могли бы попробовать это в другой раз!

Но это в основном все, теперь все, что нам нужно сделать, это показать это миру:

return ready ? (
    <div className="App">
      {video && (
        <video controls width="250" src={URL.createObjectURL(video)}></video>
      )}
      <br />
      <input type="file" onChange={(e) => setVideo(e.target.files?.item(0))} />
<h3>Result</h3>
<button onClick={convertToGif}>Convert to GIF</button>
      <br />
      {gif && <img src={gif} width="250"></img>}
    </div>
  ) : (
    <p>Please wait...</p>
  );

(По какой-то причине это не сработало в Safari, попробуйте в другом браузере, если это ваш случай)

Если ffmpeg загружен, мы должны увидеть ввод файла, если нет, то экран загрузки. Как только мы выбираем видео, мы видим, что оно загружено элементами управления и кнопкой для преобразования его в GIF. Давай попробуем!

Оно работает! Это то, что мы, вероятно, никогда не будем использовать, но, по крайней мере, мы можем сказать: «Я знаю, как сделать программу для преобразования видео в GIF» 😅

Надеюсь, вам понравилось, и если у вас есть какие-либо вопросы, дайте мне знать! ТАКЖЕ:

(Я не могу вспомнить, какой это был учебник, поэтому, если кто-то знает, какой, дайте мне знать, чтобы отдать должное)

Смотрите больше на: https://blog.daviddiazh.dev

Посмотрите мое первое приложение React: https://guessthesubredd.it

Первоначально опубликовано на https://dev.to 24 января 2021 г.

Создайте конвертер GIF с помощью React

Вопросы по теме