Как создать конвертер видео в GIF с помощью ReactJS?

Опубликовано: 7 Августа, 2021

Когда вы думаете о GIF-изображении, видео необходимо преобразовать в формат .gif для изображения. Для этого проекта мы используем библиотечную утилиту FFMPEG, написанную на языке программирования C. Благодаря поддержке веб-сборки, он может легко работать в браузерах без необходимости в сервере, также здесь мы используем библиотеку ReactJS, чтобы сделать его простым и понятным.

Вы можете узнать о веб-сборке по ссылкам ниже:

WebAssembly - следующая БОЛЬШАЯ вещь!

Кроме того, вы можете узнать о FFMPEG, бесплатном программном проекте с открытым исходным кодом, состоящем из большого набора библиотек и программ для обработки видео, аудио и других мультимедийных файлов и потоков, которые вы можете проверить на https://ffmpeg.org / ссылка на сайт.

FFMPEG: FFmpeg.wasm - это порт WebAssembly для FFmpeg, который вы можете установить через npm и использовать в Node или браузере, как любой другой модуль JavaScript. Создайте простой транскодер на стороне клиента, который передает данные в видеоэлемент.

Прежде чем приступить к созданию этого проекта, вы получите практический опыт работы с ReactJS, потому что мы используем хук реакции, который называется useState. Итак, согласитесь с этой концепцией, идите дальше и создайте свой каталог для проекта.

Создайте наше приложение React со снежным покровом, выполнив команду:
npx create-snowpack-app gifconverter –template @snowpack/app-template-react
После установки вышеуказанная команда устанавливает другой пакет с именем FFMPEG с помощью следующей команды:
```
 npm install @ ffmpeg / ffmpeg @ ffmpeg / core
```
Для нашей цели стилизации вы устанавливаете стилизованный компонент с помощью следующей команды. Скорее всего, это CSS, но когда мы играем с JavaScript, он создает определяемую пользователем переменную, в этой переменной мы можем писать свойства CSS, она также используется для создания компонентов без создания нового файла JSX.
```
 нпм я стилизованные компоненты
```

Структура проекта: Вся установка проекта завершена, и теперь мы приступаем к разработке нашего целевого проекта. Теперь вы можете видеть, что каталог проекта выглядит следующим образом, и все зависимости установлены успешно, и все готово.

Теперь вы открываете командную строку и вводите следующую команду, чтобы запустить сервер, выполнив следующую команду. Затем ваш браузер откроется в порту с номером 8080, где запущено ваше приложение. Если ваш браузер выглядит так, значит, вы попали в нужное место.

 cd gifconverter
npm start

Теперь откройте папку проекта в редакторе кода и создайте папку в каталоге src под названием components, и в этой папке создайте файл различных компонентов JSX, выполнив следующие действия.

SRC / компоненты:

Button.jsx
Dbutton.jsx
Header.jsx
Inputfile.jsx
Inputvideo.jsx
Resultimg.jsx

После создания вышеуказанных компонентов JSX, давайте добавим код для нашего проекта:

Имя файла - Button.jsx: этот компонент представляет собой кнопку преобразования, при нажатии на которую автоматически изменяется файл .mp4 на файл .gif.

Javascript

 import React from "react" ;
 import styled from "styled-components" ;
 
const Btn = styled.button`
  background-color: #000;
  color: #fff;
  border-radius: 18px;
  border: 1px solid #000;
  outline: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 1.2em;
  padding: 10px;
  min-width: 20%;
  transition: all 0.2s ease- in -out;
  :hover {
    background-color: #3f3f3f;
    color: #efefef;
  }
 `;
 
export const Button = ({ convertToGif }) => {
  return <Btn onClick={convertToGif}>Convert</Btn>;
 };

Имя файла - Dbutton.jsx: этот компонент представляет собой кнопку загрузки, с которой вы можете загрузить изображение .gif после преобразования из файла .mp4.

Javascript

 import React from "react" ;
 import styled from "styled-components" ;
 
const Btn = styled.a`
  display: flex;
  left: 0;
  right: 0;
  margin: 20px auto;
  margin-top: -20px;
  background-color: #000;
  color: #fff;
  border-radius: 35.5px;
  border: 1px solid #000;
  outline: none;
  font-weight: 700;
  cursor: pointer;
  font-size: 1.2em;
  padding: 10px;
  padding-left: 50px;
  max-width: 10%;
  text-decoration: none;
  transition: all 0.2s ease- in -out;
  :hover {
    background-color: #3f3f3f;
    color: #efefef;
  }
 `;
 
export const Dbutton = ({ gif, download }) => {
  return (
    <Btn href={gif} download onClick={(e) => download(e)}>
      Download
    </Btn>
  );
 };

Имя файла - Header.jsx:

Javascript

 import React from "react" ;
 import styled from "styled-components" ;
 
const H1 = styled.h1`
  margin: 0;
  padding: 12px;
  background-color: #000;
  color: #fff;
  font-family: sans-serif;
  font-size: 3em;
 `;
 
export const Header = () => {
  return (
    <div>
      <H1>video to gif converter</H1>
    </div>
  );
 };

Имя файла - Inputfile.jsx: этот компонент, используемый для получения пользовательского ввода видеофайла (файл .mp4)

Javascript

 import React from "react" ;
 import styled from "styled-components" ;
 
const Section = styled.div`
  display: flex;
  left: 0;
  right: 0;
  margin: 50px auto;
  width: 30%;
  border: 2px dashed #000;
  border-radius: 18px;
  padding: 10px;
 `;
 
export const Inputfile = ({ setVideo }) => {
  return (
    <Section>
      <input type= "file" onChange={(e) => setVideo(e.target.files?.item(0))} />
    </Section>
  );
 };

Имя файла - Inputvideo.jsx:

Javascript

 import React from "react" ;
 import styled from "styled-components" ;
 
const Video = styled.video`
  width: 40%;
  margin: 20px;
  border: 1px dashed #045ca3;
 `;
 
export const Inputvideo = ({ video }) => {
  return <Video controls width= "250" src={URL.createObjectURL(video)} />;
 };

Имя файла - Resultimage.jsx: этот компонент показывает изображение .gif, преобразованное из видеофайла.

Javascript

 import React from "react" ;
 import styled from "styled-components" ;
 
const Img = styled.img`
  width: 50%;
  height: 100%;
  border: 4px solid #000;
  margin: 40px auto;
 `;
 
export const Resultimg = ({ gif }) => {
  return <Img src={gif} />;
 };

Из вышеперечисленных отдельных компонентов вы можете видеть, что в функции стрелки с помощью фигурных скобок передается много свойств useState, не беспокойтесь об этом состоянии, которое вы можете найти в App.jsx. Я предпочитаю рассматривать все хуки в App.jsx.

Итак, мы добавляем весь код для наших необходимых компонентов, которые используются в нашем проекте. После добавления всего кода нам нужно импортировать файл компонентов в App.jsx

Имя файла - App.jsx: Вот наш App.jsx код. Давайте импортируем наши компоненты в этот файл. В приведенном ниже файле App.jsx мы импортируем библиотеку, как обсуждалось ранее, это FFmpeg как createFFmpeg, fetchFile.

Мы находимся на последней фазе нашего проекта, чтобы завершить работу. Хорошо работает наш проект или нет? :) Затем после обновления вы можете увидеть, как выглядит ваш конвертер GIF на следующем изображении.

Javascript

 import React, { useState, useEffect } from "react" ;
 import "./App.css" ;
 import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg" ;
 import { Button } from "./components/Button" ;
 import { Inputfile } from "./components/Inputfile" ;
 import { Header } from "./components/Header" ;
 import { Resultimg } from "./components/Resultimage" ;
 import { Inputvideo } from "./components/Inputvideo" ;
 import { Dbutton } from "./components/Dbutton" ;
 
// Create the FFmpeg instance and load it
 const ffmpeg = createFFmpeg({ log: true });
 
function App() {
  const [ready, setReady] = useState( false );
  const [video, setVideo] = useState();
  const [gif, setGif] = useState();
 
  const load = async () => {
    await ffmpeg.load();
    setReady( true );
  };
 
  useEffect(() => {
    load();
  }, []);
 
  const convertToGif = async () => {
    // Write the .mp4 to the FFmpeg file system
    ffmpeg.FS( "writeFile" , "video1.mp4" , await fetchFile(video));
     
    // Run the FFmpeg command-line tool, converting
    // the .mp4 into .gif file
    await ffmpeg.run(
      "-i" ,
      "video1.mp4" ,
      "-t" ,
      "2.5" ,
      "-ss" ,
      "2.0" ,
      "-f" ,
      "gif" ,
      "out.gif"
    );
    // Read the .gif file back from the FFmpeg file system
    const data = ffmpeg.FS( "readFile" , "out.gif" );
    const url = URL.createObjectURL(
      new Blob([data.buffer], { type: "image/gif" })
    );
    setGif(url);
  };
 
  const download = (e) => {
    console.log(e.target.href);
    fetch(e.target.href, {
      method: "GET" ,
      headers: {},
    })
      .then((response) => {
        response.arrayBuffer().then( function (buffer) {
          const url = window.URL.createObjectURL( new Blob([buffer]));
          const link = document.createElement( "a" );
          link.href = url;
          link.setAttribute( "download" , "image.gif" );
          document.body.appendChild(link);
          link.click();
        });
      })
      . catch ((err) => {
        console.log(err);
      });
  };
 
  return ready ? (
    <div className= "App" >
      <Header />
      {video && <Inputvideo video={video} />}
      <Inputfile setVideo={setVideo} />
      <Button convertToGif={convertToGif} />
      <h1>Result</h1>
      {gif && <Resultimg gif={gif} />}
      {gif && <Dbutton gif={gif} download={download} />}
    </div>
  ) : (
     
<p>Loading...</p>
 
  );
 }
 
export App; default 

Вывод: если ваш браузер выдает такой вывод, значит, ваш проект работает нормально. Затем выберите видеофайл для преобразования в изображение. После преобразования нажмите кнопку преобразования, вы увидите, что он дает нам анимированное изображение в формате .gif.

Technical Scripter

Как создать конвертер видео в GIF с помощью ReactJS?

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ