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

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

?️ 필요한 것

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

• Typescript로 반응
• Ant 디자인을 통해 멋진 UI를 구축하세요.

빠른 설정:

npm install antd

구성요소 설정

모든 React 가져오기를 사용하여 React 구성요소를 설정해 보겠습니다.

import { useState, useRef, useEffect, ChangeEvent } from "react";

import { Button, Progress, message, Flex } from "antd";

const VideoCompression = () => {

  const [sourceVideo, setSourceVideo] = useState(null);

  const [compressedVideo, setCompressedVideo] = useState(null);

  const [isCompressing, setIsCompressing] = useState(false);

  const [progress, setProgress] = useState(0);

  const [width, setWidth] = useState("");

  const [height, setHeight] = useState("");

  const videoRef = useRef(null);

  const inputRef = useRef(null);

파일 업로드 수락

MP4 파일을 선택할 수 있는 방법이 필요합니다:

const handleFileChange = (event: ChangeEvent) => {

  if (!event.target.files) return;

  const file = event.target.files[0];

  if (file && file.type.startsWith("video/")) {

    setSourceVideo(file);

    setCompressedVideo(null);

  } else {

    message.error("Please select a valid video file.");

  }

};

비디오 메타데이터 추출

동영상 메타데이터를 가져오겠습니다.

useEffect(() => {

  if (sourceVideo) {

    const video = document.createElement("video");

    video.onloadedmetadata = () => {

      setWidth(video.videoWidth.toString());

      setHeight(video.videoHeight.toString());

    };

    video.src = URL.createObjectURL(sourceVideo);

  }

}, [sourceVideo]);

비디오 압축

마법이 일어나는 곳은 다음과 같습니다.

const compressVideo = async () => {

    if (!sourceVideo) {

      message.error("Please upload a video first.");

      return;

    }

    setIsCompressing(true);

    setProgress(0);

    try {

      const stream = videoRef.current?.captureStream();

      const mediaRecorder = new MediaRecorder(stream, {

        mimeType: "video/webm",

        videoBitsPerSecond: 1000000,

      });

      const chunks: BlobPart[] = [];

      mediaRecorder.ondataavailable = (event) => {

        if (event.data.size > 0) {

          chunks.push(event.data);

        }

      };

      mediaRecorder.onstop = () => {

        const blob = new Blob(chunks, { type: "video/webm" });

        setCompressedVideo(blob);

        setIsCompressing(false);

        setProgress(100);

      };

      if (!videoRef.current) return;

      videoRef.current.onloadedmetadata = () => {

        videoRef.current!.muted = true;

        videoRef.current?.play();

        mediaRecorder.start();

      };

      videoRef.current.onended = () => {

        mediaRecorder.stop();

        videoRef.current?.pause();

      };

      videoRef.current.ontimeupdate = () => {

        if (!videoRef.current) return;

        const progress =

          (videoRef.current.currentTime / videoRef.current.duration) * 100;

        setProgress(progress);

      };

      if (!videoRef.current) return;

      videoRef.current.width = Number.parseFloat(width);

      videoRef.current.height = Number.parseFloat(height);

      videoRef.current.src = URL.createObjectURL(sourceVideo);

    } catch (err) {

      message.error("Error compressing video: "   (err as Error).message);

      setIsCompressing(false);

    }

  };

압축된 비디오 다운로드

const downloadCompressedVideo = () => {

  if (compressedVideo) {

    const url = URL.createObjectURL(compressedVideo);

    const a = document.createElement("a");

    a.href = url;

    a.download = "compressed_video.webm";

    document.body.appendChild(a);

    a.click();

    document.body.removeChild(a);

    URL.revokeObjectURL(url);

  }

};

? 출시 시간: 모든 것을 하나로 모으기

다음은 우리의 전체 작업을 살짝 엿보는 것입니다:

배포 링크:
https://abhirup-99.github.io/browser-compression-webm/

코드 링크:
https://github.com/Abhirup-99/browser-compression-webm

? 요약: 이제 당신은 비디오 압축 마법사가 되었습니다!

축하해요! React를 사용하여 WebM 비디오 압축기에 대한 강력한 MP4를 구축했습니다. 이제 웹 비디오가 그 어느 때보다 빠르게 로드되어 사용자에게 즐거움을 선사하고 사이트 성능이 향상됩니다.

? 다음 단계:

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