? Boostez vos vidéos Web : compression MP4 vers WebM avec React

Vous êtes-vous déjà ennuyé sans rien d'intéressant au travail ? Eh bien, c’est à ce moment-là que j’ai décidé de me gratter pour bricoler l’état actuel des API des navigateurs. Pourrions-nous compresser des vidéos directement via des API Web ? Dans ce blog, je vais vous montrer comment utiliser les fonctionnalités d'un navigateur moderne pour compresser des vidéos MP4 au format WebM, le tout dans une application React.

?️ Ce dont vous aurez besoin

Avant de commencer, assurez-vous d'avoir :

• Réagissez avec Typescript
• Ant Design pour créer une belle interface utilisateur.

Configuration rapide :

npm install antd

Configuration du composant

Configurons notre composant React avec toutes les importations 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);

Accepter le téléchargement de fichier

Nous avons besoin d'un moyen de choisir notre fichier 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.");

  }

};

Extraction des métadonnées vidéo

Obtenons les métadonnées de la vidéo :

useEffect(() => {

  if (sourceVideo) {

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

    video.onloadedmetadata = () => {

      setWidth(video.videoWidth.toString());

      setHeight(video.videoHeight.toString());

    };

    video.src = URL.createObjectURL(sourceVideo);

  }

}, [sourceVideo]);

Compression vidéo

C'est ici que la magie opère :

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

    }

  };

Téléchargement de la vidéo compressée

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

  }

};

? Heure de lancement : tout rassembler

Voici un aperçu de notre travail complet :

Lien de déploiement :
https://abhirup-99.github.io/browser-compression-webm/

Lien du code :
https://github.com/Abhirup-99/browser-compression-webm

? Conclusion : vous êtes désormais un assistant de compression vidéo !

Félicitations! Vous venez de créer un puissant compresseur vidéo MP4 vers WebM à l'aide de React. Vos vidéos Web se chargeront désormais plus rapidement que jamais, ravissant les utilisateurs et améliorant les performances de votre site.

? Prochaines étapes :

• Je vais continuer à peaufiner les API de compression du navigateur et j'espère qu'il y aura bientôt un blog.