? Turbine seus vídeos da web: compactação de MP4 para WebM com React

Já está entediado com nada interessante no trabalho? Bem, foi então que decidi coçar para mexer no estado atual das APIs do navegador. Poderíamos compactar vídeos diretamente por meio de APIs da web? Neste blog, mostrarei como usar recursos modernos do navegador para compactar vídeos MP4 para o formato WebM – tudo dentro de um aplicativo React.

?️ O que você precisa

Antes de começarmos, verifique se você tem:

• Reagir com texto datilografado
• Ant Design para construir uma interface de usuário legal.

Configuração rápida:

npm install antd

Configurando o componente

Vamos configurar nosso componente React com todas as importações do 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);

Aceitando o upload do arquivo

Precisamos de uma maneira de escolher nosso arquivo 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.");

  }

};

Extraindo metadados de vídeo

Vamos obter os metadados do vídeo:

useEffect(() => {

  if (sourceVideo) {

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

    video.onloadedmetadata = () => {

      setWidth(video.videoWidth.toString());

      setHeight(video.videoHeight.toString());

    };

    video.src = URL.createObjectURL(sourceVideo);

  }

}, [sourceVideo]);

Compressão de vídeo

É aqui que a mágica acontece:

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);

    }

  };

Baixando o vídeo compactado

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);

  }

};

? Hora de lançamento: juntando tudo

Aqui está uma prévia do nosso trabalho completo:

Link de implantação:
https://abhirup-99.github.io/browser-compression-webm/

Link do código:
https://github.com/Abhirup-99/browser-compression-webm

? Conclusão: agora você é um assistente de compactação de vídeo!

Parabéns! Você acabou de criar um poderoso compressor de vídeo MP4 para WebM usando React. Seus vídeos da web agora serão carregados mais rápido do que nunca, encantando os usuários e aumentando o desempenho do seu site.

? Próximas etapas:

• Estarei mexendo ainda mais nas APIs de compactação do navegador e espero que haja um blog lançado em breve.