브라우저에서 webm으로 비디오 압축

? 웹 비디오 강화: React를 사용하여 MP4에서 WebM으로 압축

직장에서 재미있는 일이 없어 지루했던 적이 있나요? 글쎄, 그때 나는 브라우저 API의 현재 상태를 살펴보기 위해 가려움증을 긁기로 결정했습니다. 웹 API를 통해 직접 비디오를 압축할 수 있나요? 이 블로그에서는 React 앱 내에서 최신 브라우저 기능을 사용하여 MP4 비디오를 WebM 형식으로 압축하는 방법을 보여 드리겠습니다.

?️ 필요한 것

자세히 알아보기 전에 다음 사항을 확인하세요.

• Typescript로 반응
• 멋진 UI를 구축하기 위한 Ant 디자인

빠른 설정:

<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를 사용하여 WebM 비디오 압축기에 대한 강력한 MP4를 구축했습니다. 이제 웹 비디오가 그 어느 때보다 빠르게 로드되어 사용자에게 즐거움을 선사하고 사이트 성능을 향상시킵니다.

? 다음 단계:

• 브라우저 압축 API에 대해 더 연구할 예정이며 곧 블로그가 나올 수 있기를 바랍니다.

---

위 내용은 브라우저에서 webm으로 비디오 압축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!