ブラウザでビデオを WebM に圧縮する

? Web ビデオを強化: React を使用した MP4 から WebM への圧縮

仕事で何も面白いことがなくて退屈したことはありませんか?それで、私はブラウザ API の現在の状態をいじってみたくてうずうずすることに決めました。 Web API を通じてビデオを直接圧縮できますか?このブログでは、最新のブラウザ機能を使用して MP4 ビデオを WebM 形式に圧縮する方法をすべて React アプリ内で説明します。

⁉️必要なもの

本題に入る前に、次のものが揃っていることを確認してください。

• Typescript で反応する
• 素敵な UI を構築するための Ant Design。

クイックセットアップ:

<p>npm install antd</p>

コンポーネントのセットアップ

すべての React インポートを使用して 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>

ファイルのアップロードを承諾します

MP4 ファイルを選択する方法が必要です:

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

ビデオのメタデータを抽出しています

ビデオのメタデータを取得しましょう:

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

ビデオ圧縮

ここで魔法が起こります:

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

圧縮ビデオのダウンロード

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

?起動時間: すべてをまとめる

これが私たちの完成した作業の一部です:

導入リンク:
https://abhirup-99.github.io/browser-compression-webm/

コードリンク:
https://github.com/Abhirup-99/browser-compression-webm

?まとめ: これであなたもビデオ圧縮の達人です!

おめでとうございます! React を使用して、強力な MP4 から WebM へのビデオ コンプレッサーを構築しました。ウェブビデオがこれまでよりも速く読み込まれるようになり、ユーザーを喜ばせ、サイトのパフォーマンスを向上させます。

?次のステップ:

• 私はブラウザ圧縮 API をさらにいじっていく予定で、近いうちにブログが公開されることを願っています。

---

以上がブラウザでビデオを WebM に圧縮するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。