? अपने वेब वीडियो को सुपरचार्ज करें: प्रतिक्रिया के साथ MP4 से WebM संपीड़न

क्या आप कभी काम में किसी दिलचस्प चीज़ से ऊब गए हैं? खैर, तभी मैंने ब्राउज़र एपीआई की वर्तमान स्थिति के साथ छेड़छाड़ करने का फैसला किया। क्या हम सीधे वेब एपीआई के माध्यम से वीडियो को संपीड़ित कर सकते हैं? इस ब्लॉग में, मैं आपको दिखाऊंगा कि एक रिएक्ट ऐप के भीतर MP4 वीडियो को WebM प्रारूप में संपीड़ित करने के लिए आधुनिक ब्राउज़र सुविधाओं का उपयोग कैसे करें।

?️ आपको क्या चाहिए

इससे पहले कि हम इसमें उतरें, सुनिश्चित करें कि आपके पास:

• टाइपस्क्रिप्ट के साथ प्रतिक्रिया करें
• एंट डिज़ाइन कुछ अच्छा यूआई बनाने के लिए।

शीघ्र व्यवस्थित:

npm install antd

घटक की स्थापना

आइए सभी रिएक्ट आयातों के साथ अपना रिएक्ट घटक सेट करें:

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://abirup-99.github.io/browser-compression-webm/

कोड लिंक:
https://github.com/Akhirup-99/browser-compression-webm

? समापन: अब आप एक वीडियो संपीड़न विज़ार्ड हैं!

बधाई हो! आपने अभी-अभी React का उपयोग करके एक शक्तिशाली MP4 से WebM वीडियो कंप्रेसर बनाया है। आपके वेब वीडियो अब पहले से कहीं अधिक तेजी से लोड होंगे, उपयोगकर्ताओं को प्रसन्न करेंगे और आपकी साइट के प्रदर्शन को बढ़ाएंगे।

? अगले कदम:

• मैं ब्राउज़र कंप्रेशन एपीआई के साथ आगे भी छेड़छाड़ करूंगा और उम्मीद है कि जल्द ही एक ब्लॉग आएगा।