？增强您的网络视频：使用 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，希望很快就会有一个博客。