？增強您的網路影片：使用 React 將 MP4 壓縮為 WebM

工作中沒有任何有趣的事情感到無聊嗎？好吧，就在那時我決定抓緊時間修補瀏覽器 API 的當前狀態。我們可以直接透過 Web API 壓縮影片嗎？在這篇部落格中，我將向您展示如何使用現代瀏覽器功能將 MP4 影片壓縮為 WebM 格式 - 全部在 React 應用程式中完成。

?️ 需要什麼

在我們深入之前，請確保您已經：

• 使用 Typescript 進行反應
• Ant Design 建立一些漂亮的 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 建立了一個強大的 MP4 到 WebM 視訊壓縮器。現在，您的網路影片載入速度將比以往更快，從而取悅用戶並提高您網站的效能。

？後續步驟：

• 我將進一步修改瀏覽器壓縮 API，希望很快就會有一個部落格。