Memampatkan video ke webm dalam penyemak imbas

? Tajamkan Video Web Anda: Pemampatan MP4 ke WebM dengan React

Pernah bosan dengan tiada apa-apa yang menarik di tempat kerja? Nah, ketika itulah saya memutuskan untuk menggaru gatal saya untuk bermain-main dengan keadaan semasa API pelayar. Bolehkah kami memampatkan video secara terus melalui API web? Dalam blog ini, saya akan menunjukkan kepada anda cara menggunakan ciri penyemak imbas moden untuk memampatkan video MP4 kepada format WebM—semuanya dalam apl React.

?️ Apa yang Anda Perlukan

Sebelum kami menyelam, pastikan anda mempunyai:

• Bertindak balas dengan Typescript
• Reka Bentuk Semut untuk membina beberapa UI yang bagus.

Persediaan pantas:

<p>npm install antd</p>

Menyediakan komponen

Mari sediakan komponen React kami dengan semua import React:

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

Menerima Muat Naik Fail

Kami memerlukan cara untuk memilih fail MP4 kami:

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

Mengekstrak Metadata Video

Jom dapatkan metadata video:

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

Pemampatan Video

Di sinilah keajaiban berlaku:

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

Memuat turun Video Mampat

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

? Masa Pelancaran: Menyatukan Semuanya

Berikut adalah gambaran ringkas kerja lengkap kami:

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

Pautan Kod:
https://github.com/Abhirup-99/browser-compression-webm

? Penutup: Anda Kini Wizard Pemampatan Video!

Tahniah! Anda baru sahaja membina pemampat video MP4 ke WebM yang berkuasa menggunakan React. Video web anda kini akan dimuatkan dengan lebih pantas berbanding sebelum ini, menggembirakan pengguna dan meningkatkan prestasi tapak anda.

? Langkah Seterusnya:

• Saya akan memikirkan API pemampatan penyemak imbas dengan lebih lanjut dan diharapkan akan ada blog keluar tidak lama lagi.

---

Atas ialah kandungan terperinci Memampatkan video ke webm dalam penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!