Komprimieren von Videos in WebM im Browser

? 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 verwenden, 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:

• Reagieren Sie mit Typescript
• Ant Design zum Erstellen einer schönen Benutzeroberfläche.

Schnelle Einrichtung:

<p>npm install antd</p>

Einrichten der Komponente

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

<p>import { useState, useRef, useEffect, ChangeEvent } from "react";<br>
import { Button, Progress, message, Flex } from "antd";</p>

<p>const VideoCompression = () => {<br>
  const [sourceVideo, setSourceVideo] = useState<File | null>(null);<br>
  const [compressedVideo, setCompressedVideo] = useState<Blob | null>(null);<br>
  const [isCompressing, setIsCompressing] = useState(false);<br>
  const [progress, setProgress] = useState(0);<br>
  const [width, setWidth] = useState<string>("");<br>
  const [height, setHeight] = useState<string>("");<br>
  const videoRef = useRef<HTMLVideoElement>(null);<br>
  const inputRef = useRef<HTMLInputElement>(null);</p>

Akzeptieren des Datei-Uploads

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

<p>const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {<br>
  if (!event.target.files) return;<br>
  const file = event.target.files[0];<br>
  if (file && file.type.startsWith("video/")) {<br>
    setSourceVideo(file);<br>
    setCompressedVideo(null);<br>
  } else {<br>
    message.error("Please select a valid video file.");<br>
  }<br>
};</p>

Extrahieren von Videometadaten

Lassen Sie uns die Video-Metadaten abrufen:

<p>useEffect(() => {<br>
  if (sourceVideo) {<br>
    const video = document.createElement("video");<br>
    video.onloadedmetadata = () => {<br>
      setWidth(video.videoWidth.toString());<br>
      setHeight(video.videoHeight.toString());<br>
    };<br>
    video.src = URL.createObjectURL(sourceVideo);<br>
  }<br>
}, [sourceVideo]);</p>

Videokomprimierung

Hier passiert die Magie:

<p>const compressVideo = async () => {<br>
    if (!sourceVideo) {<br>
      message.error("Please upload a video first.");<br>
      return;<br>
    }<br>
    setIsCompressing(true);<br>
    setProgress(0);<br>
    try {<br>
      const stream = videoRef.current?.captureStream();<br>
      const mediaRecorder = new MediaRecorder(stream, {<br>
        mimeType: "video/webm",<br>
        videoBitsPerSecond: 1000000,<br>
      });<br>
      const chunks: BlobPart[] = [];<br>
      mediaRecorder.ondataavailable = (event) => {<br>
        if (event.data.size > 0) {<br>
          chunks.push(event.data);<br>
        }<br>
      };<br>
      mediaRecorder.onstop = () => {<br>
        const blob = new Blob(chunks, { type: "video/webm" });<br>
        setCompressedVideo(blob);<br>
        setIsCompressing(false);<br>
        setProgress(100);<br>
      };<br>
      if (!videoRef.current) return;<br>
      videoRef.current.onloadedmetadata = () => {<br>
        videoRef.current!.muted = true;<br>
        videoRef.current?.play();<br>
        mediaRecorder.start();<br>
      };<br>
      videoRef.current.onended = () => {<br>
        mediaRecorder.stop();<br>
        videoRef.current?.pause();<br>
      };<br>
      videoRef.current.ontimeupdate = () => {<br>
        if (!videoRef.current) return;<br>
        const progress =<br>
          (videoRef.current.currentTime / videoRef.current.duration) * 100;<br>
        setProgress(progress);<br>
      };<br>
      if (!videoRef.current) return;<br>
      videoRef.current.width = Number.parseFloat(width);<br>
      videoRef.current.height = Number.parseFloat(height);<br>
      videoRef.current.src = URL.createObjectURL(sourceVideo);<br>
    } catch (err) {<br>
      message.error("Error compressing video: " + (err as Error).message);<br>
      setIsCompressing(false);<br>
    }<br>
  };</p>

Herunterladen des komprimierten Videos

<p>const downloadCompressedVideo = () => {<br>
  if (compressedVideo) {<br>
    const url = URL.createObjectURL(compressedVideo);<br>
    const a = document.createElement("a");<br>
    a.href = url;<br>
    a.download = "compressed_video.webm";<br>
    document.body.appendChild(a);<br>
    a.click();<br>
    document.body.removeChild(a);<br>
    URL.revokeObjectURL(url);<br>
  }<br>
};</p>

? Startzeit: 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!

Herzlichen 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.

---

Das obige ist der detaillierte Inhalt vonKomprimieren von Videos in WebM im Browser. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!