? Ускорьте свое веб-видео: сжатие MP4 в WebM с помощью React

Вам когда-нибудь было скучно без ничего интересного на работе? Что ж, именно тогда я решил утолить свой зуд и повозиться с текущим состоянием API браузеров. Можем ли мы сжимать видео напрямую через веб-API? В этом блоге я покажу вам, как использовать современные функции браузера для сжатия видео MP4 в формат WebM — и все это в приложении React.

?️ Что вам понадобится

Прежде чем мы углубимся, убедитесь, что у вас есть:

• Реагировать с помощью машинописного текста
• Ant Design для создания красивого пользовательского интерфейса.

Быстрая настройка:

npm install antd

Настройка компонента

Давайте настроим наш компонент React со всем импортом React:

import { useState, useRef, useEffect, ChangeEvent } from "react";

import { Button, Progress, message, Flex } from "antd";

const VideoCompression = () => {

  const [sourceVideo, setSourceVideo] = useState(null);

  const [compressedVideo, setCompressedVideo] = useState(null);

  const [isCompressing, setIsCompressing] = useState(false);

  const [progress, setProgress] = useState(0);

  const [width, setWidth] = useState("");

  const [height, setHeight] = useState("");

  const videoRef = useRef(null);

  const inputRef = useRef(null);

Принятие загрузки файла

Нам нужен способ выбрать файл MP4:

const handleFileChange = (event: ChangeEvent) => {

  if (!event.target.files) return;

  const file = event.target.files[0];

  if (file && file.type.startsWith("video/")) {

    setSourceVideo(file);

    setCompressedVideo(null);

  } else {

    message.error("Please select a valid video file.");

  }

};

Извлечение метаданных видео

Давайте получим метаданные видео:

useEffect(() => {

  if (sourceVideo) {

    const video = document.createElement("video");

    video.onloadedmetadata = () => {

      setWidth(video.videoWidth.toString());

      setHeight(video.videoHeight.toString());

    };

    video.src = URL.createObjectURL(sourceVideo);

  }

}, [sourceVideo]);

Сжатие видео

Вот где происходит волшебство:

const compressVideo = async () => {

    if (!sourceVideo) {

      message.error("Please upload a video first.");

      return;

    }

    setIsCompressing(true);

    setProgress(0);

    try {

      const stream = videoRef.current?.captureStream();

      const mediaRecorder = new MediaRecorder(stream, {

        mimeType: "video/webm",

        videoBitsPerSecond: 1000000,

      });

      const chunks: BlobPart[] = [];

      mediaRecorder.ondataavailable = (event) => {

        if (event.data.size > 0) {

          chunks.push(event.data);

        }

      };

      mediaRecorder.onstop = () => {

        const blob = new Blob(chunks, { type: "video/webm" });

        setCompressedVideo(blob);

        setIsCompressing(false);

        setProgress(100);

      };

      if (!videoRef.current) return;

      videoRef.current.onloadedmetadata = () => {

        videoRef.current!.muted = true;

        videoRef.current?.play();

        mediaRecorder.start();

      };

      videoRef.current.onended = () => {

        mediaRecorder.stop();

        videoRef.current?.pause();

      };

      videoRef.current.ontimeupdate = () => {

        if (!videoRef.current) return;

        const progress =

          (videoRef.current.currentTime / videoRef.current.duration) * 100;

        setProgress(progress);

      };

      if (!videoRef.current) return;

      videoRef.current.width = Number.parseFloat(width);

      videoRef.current.height = Number.parseFloat(height);

      videoRef.current.src = URL.createObjectURL(sourceVideo);

    } catch (err) {

      message.error("Error compressing video: "   (err as Error).message);

      setIsCompressing(false);

    }

  };

Загрузка сжатого видео

const downloadCompressedVideo = () => {

  if (compressedVideo) {

    const url = URL.createObjectURL(compressedVideo);

    const a = document.createElement("a");

    a.href = url;

    a.download = "compressed_video.webm";

    document.body.appendChild(a);

    a.click();

    document.body.removeChild(a);

    URL.revokeObjectURL(url);

  }

};

? Время запуска: все вместе

Вот краткий обзор всей нашей работы:

Ссылка для развертывания:
https://abhirup-99.github.io/browser-compression-webm/

Ссылка на код:
https://github.com/Abhirup-99/browser-compression-webm

? Подведение итогов: теперь вы мастер сжатия видео!

Поздравляем! Вы только что создали мощный видеокомпрессор MP4 в WebM с помощью React. Ваши веб-видео теперь будут загружаться быстрее, чем когда-либо, радуя пользователей и повышая производительность вашего сайта.

? Следующие шаги:

• Я буду продолжать работать над API-интерфейсами сжатия браузера и, надеюсь, скоро выпущу блог.