? Bringen Sie Ihre Webvideos auf Vordermann: Komprimierung von MP4 zu WebM mit React

Haben Sie sich schon einmal gelangweilt, weil es bei der Arbeit nichts Interessantes gab? Nun, da beschloss ich, meinen Drang zu stillen und am aktuellen Stand der Browser-APIs herumzubasteln. Könnten wir Videos direkt über Web-APIs komprimieren? In diesem Blog zeige ich Ihnen, wie Sie moderne Browserfunktionen nutzen, um MP4-Videos in das WebM-Format zu komprimieren – alles innerhalb einer React-App.

?️ Was Sie brauchen

Bevor wir eintauchen, stellen Sie sicher, dass Sie Folgendes haben:

• Mit Typescript reagieren
• Ant Design zum Erstellen einer schönen Benutzeroberfläche.

Schnelleinrichtung:

npm install antd

Einrichten der Komponente

Lassen Sie uns unsere React-Komponente mit allen React-Importen einrichten:

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

Akzeptieren des Datei-Uploads

Wir brauchen eine Möglichkeit, unsere MP4-Datei auszuwählen:

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

  }

};

Video-Metadaten extrahieren

Lassen Sie uns die Video-Metadaten abrufen:

useEffect(() => {

  if (sourceVideo) {

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

    video.onloadedmetadata = () => {

      setWidth(video.videoWidth.toString());

      setHeight(video.videoHeight.toString());

    };

    video.src = URL.createObjectURL(sourceVideo);

  }

}, [sourceVideo]);

Videokomprimierung

Hier passiert die Magie:

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

    }

  };

Herunterladen des komprimierten Videos

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

  }

};

? Startzeitpunkt: Alles zusammenfügen

Hier ein kleiner Vorgeschmack auf unsere gesamte Arbeit:

Bereitstellungslink:
https://abhirup-99.github.io/browser-compression-webm/

Code-Link:
https://github.com/Abhirup-99/browser-compression-webm

? Zusammenfassung: Sie sind jetzt ein Videokomprimierungs-Assistent!

Glückwunsch! Sie haben gerade mit React einen leistungsstarken MP4-zu-WebM-Videokompressor erstellt. Ihre Webvideos werden jetzt schneller als je zuvor geladen, was die Benutzer begeistert und die Leistung Ihrer Website steigert.

? Nächste Schritte:

• Ich werde weiter an den Browser-Komprimierungs-APIs basteln und hoffe, dass es bald einen Blog gibt.