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

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

⁉️必要なもの

本題に入る前に、次のことを確認してください:

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

クイックセットアップ:

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 を使用して、強力な MP4 から WebM へのビデオ コンプレッサーを構築しました。ウェブビデオがこれまでよりも速く読み込まれるようになり、ユーザーが満足し、サイトのパフォーマンスが向上します。

?次のステップ:

• 私はブラウザ圧縮 API をさらにいじっていくつもりです。できれば、すぐにブログが公開されることを願っています。