브라우저에서 webm으로 비디오 압축-JS 튜토리얼-php.cn

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

Mary-Kate Olsen

풀어 주다： 2024-10-06 06:22:02

원래의

970명이 탐색했습니다.

? 웹 비디오 강화: 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>

로그인 후 복사