؟ قم بتعزيز مقاطع فيديو الويب الخاصة بك: ضغط MP4 إلى WebM باستخدام React

هل شعرت بالملل من عدم وجود أي شيء مثير للاهتمام في العمل؟ حسنًا، عندها قررت أن أبدأ في التلاعب بالحالة الحالية لواجهات برمجة تطبيقات المتصفح. هل يمكننا ضغط مقاطع الفيديو مباشرة من خلال واجهات برمجة تطبيقات الويب؟ في هذه المدونة، سأوضح لك كيفية استخدام ميزات المتصفح الحديثة لضغط مقاطع فيديو MP4 إلى تنسيق WebM — كل ذلك ضمن تطبيق React.

️ ما ستحتاجه

قبل أن نتعمق، تأكد من حصولك على:

• التفاعل مع الآلة الكاتبة
• تصميم Ant لإنشاء واجهة مستخدم جميلة.

الإعداد السريع:

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

؟ الخلاصة: أنت الآن معالج ضغط الفيديو!

تهانينا! لقد قمت للتو بإنشاء ضاغط فيديو MP4 قوي إلى WebM باستخدام React. سيتم الآن تحميل مقاطع الفيديو على الويب بشكل أسرع من أي وقت مضى، مما يُسعد المستخدمين ويعزز أداء موقعك.

؟ الخطوات التالية:

• سوف أقوم بتعديل واجهات برمجة التطبيقات لضغط المتصفح بشكل أكبر، ونأمل أن تكون هناك مدونة قريبًا.