? Potencia tus vídeos web: compresión de MP4 a WebM con React

¿Alguna vez te has aburrido sin nada interesante en el trabajo? Bueno, fue entonces cuando decidí calmarme y experimentar con el estado actual de las API del navegador. ¿Podríamos comprimir videos directamente a través de API web? En este blog, te mostraré cómo usar las funciones modernas del navegador para comprimir videos MP4 al formato WebM, todo dentro de una aplicación React.

?️ Lo que necesitarás

Antes de sumergirnos, asegúrate de tener:

• Reaccionar con mecanografiado
• Ant Design para crear una interfaz de usuario agradable.

Configuración rápida:

npm install antd

Configurando el componente

Configuremos nuestro componente React con todas las importaciones de 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);

Aceptar la carga del archivo

Necesitamos una forma de elegir nuestro archivo 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.");

  }

};

Extracción de metadatos de vídeo

Obtengamos los metadatos del video:

useEffect(() => {

  if (sourceVideo) {

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

    video.onloadedmetadata = () => {

      setWidth(video.videoWidth.toString());

      setHeight(video.videoHeight.toString());

    };

    video.src = URL.createObjectURL(sourceVideo);

  }

}, [sourceVideo]);

Compresión de vídeo

Aquí es donde ocurre la magia:

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

    }

  };

Descargando el vídeo comprimido

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 lanzamiento: poniéndolo todo junto

Aquí tienes un adelanto de nuestro trabajo completo:

Enlace de implementación:
https://abhirup-99.github.io/browser-compression-webm/

Enlace de código:
https://github.com/Abhirup-99/browser-compression-webm

? Resumen: ¡Ahora eres un asistente de compresión de video!

¡Felicidades! Acaba de crear un potente compresor de vídeo MP4 a WebM utilizando React. Tus vídeos web ahora se cargarán más rápido que nunca, lo que deleitará a los usuarios y mejorará el rendimiento de tu sitio.

? Próximos pasos:

• Seguiré jugando con las API de compresión del navegador y espero que pronto haya un blog.