How we buildilt Browser-Native MP4 Export - No Server Required

المشكلة

تقليدي على شبكة الإنترنت يتصدّر أشرطة فيديو عن طريق إرسال إطارات إلى خادم، وزيّنها بغطاء، وإعادة النتيجة. هذا يحتوي على ثلاثة تكاليف: تحميل النطاق الترددي (إرسال ميغابايت من بيانات الإطار)، وحساب الخادم (الساعة من وحدة التصوير المقطعي/GPU للتزين)، والخصوصية (عملك الإبداعي يعبر البنية التحتية لطرف ثالث).

PinePaper لا شيء من هذا. ملف "بي جي 1 إكس" تم صنعه بالكامل في مصففكم لا إطارات تترك جهازك الزينة تحدث على جهاز الفيديو الخاص بآلتك هذه المادة توضح كيف.

WebCodecs: hardware Video Encoding in the Browser

الـ "ويب كودكس" الـ "بي بي جي تي" و "و3C" و "201" يوفر وصولاً منخفضاً لـ "بيروسر" وقد تم شحنها في الكروم 94 (أيلول/سبتمبر 2021) وهي متاحة الآن في كروم وإدج وأوبرا. وللسفاري وفايرفوكس دعم جزئي أو تجريبي [استخدام، 2026].

وتكشف شركة " ويب " عن واجهتين رئيسيتين:

• VideoEncoder - takes raw video frame, outputs encoded H.264 (or VP8/VP9/AV1) bitstream chunks
• VideoDecoder - takes encoded chunks, outputsخام frames (used for playback, not export)

بالنسبة لصادرات (بي بي جي) نستخدم (إكس كيو) سير العمل:

1. Create a VideoEncoder configured for H.264 at the desired resolution and bitrate
2. لكل إطار للتصوير: القبض على الشمامات كإكس كيو، وإطعامه إلى الحاجز
3. جمع الشقوق المشفرة (الوحدات الوطنية العاملة في إطار القاعدة H.264)
4. يَذْهبُ الشيكاتَ إلى حاويةِ MP4
5. عرض ملف PMP4 للتنزيل

الخطوة 1: تداول المعلومات

const encoder = new VideoEncoder({
  output: (chunk, metadata) => {
    // chunk.data contains encoded H.264 bytes
    // metadata.decoderConfig contains SPS/PPS on first chunk
    muxer.addVideoChunk(chunk, metadata);
  },
  error: (e) => console.error('Encoder error:', e)
});

encoder.configure({
  codec: 'avc1.42E01E',  // H.264 Baseline Profile Level 3.0
  width: 1080,
  height: 1080,
  bitrate: 5_000_000,    // 5 Mbps
  framerate: 30
});

ويحدد الرمز H.264 بيان خط الأساس. وهذا هو أبرز صور H.264 متوافقة على نطاق واسع - وهو يلعب على كل هاتف، وبروزر، ومنصة وسائط الإعلام الاجتماعية. وتقدم الملامح العليا (ماين، هاي) ضغطا أفضل ولكنها أقل توافقا [Richardson، 2010].

الرقابة المريرة على الجودة مقابل حجم الملف في 5 ميغابايت من أجل مقطع ثلاثي ثانية ويختلف الحجم الفعلي على أساس تعقيد المحتوى - وتضغط المشاهد الثابتة أفضل من الحركة السريعة.

الخطوة الثانية: التقط الإطارات والترميز

لكل إطار في الجدول الزمني للتقدير:

for (let frameNum = 0; frameNum < totalFrames; frameNum++) {
  const frameTime = frameNum / fps;

  // Advance animation to this time
  app.setPlaybackTime(frameTime);
  paper.view.draw();  // Full render (not view.update!)
  await new Promise(r => requestAnimationFrame(r));  // Wait for paint

  // Create VideoFrame from canvas
  const frame = new VideoFrame(canvas, {
    timestamp: frameNum * (1_000_000 / fps)  // microseconds
  });

  // Encode (keyframe every 2 seconds)
  encoder.encode(frame, {
    keyFrame: frameNum % (fps * 2) === 0
  });
  frame.close();  // Release GPU memory
}

التفاصيل الحاسمة: بعد النهوض بالهجوم وإرسال الكنز، يجب أن تنتظر (إكس كيو) قبل القبض عليه. This ensures the GPU has ended compositing pixels. بدون هذه المزامنة، تَلتقطُ a حاجز ثابت ويُنتجُ إطاراتَ فارغةُ أَو مُزدوجة.

الخطوة الثالثة :

وتنتج الفيديو إنكوردر خام H.264 قطعة. وهذه ليست ملفاً قابلاً للعزف - فهي بحاجة إلى أن تكون ملفوفة في حاوية MP4 تخزن التوقيت والبيانات الفوقية والتشكيلة الرمزية.

وتستخدم شركة PG0X المكتبة ** ** Imp4-muxer [Vani, mp4-muxer] لهذه الخطوة. The muxer receives encoded chunks with timestamps and produces a valid MP4 file with:

• ftyp box: file type declaration (isom, iso2, mp41)
• moov box: movie metadata, track descriptions, timing tables
• mdat box: the actual encoded video data

The result is a standards-compliant MP4 that plays in every video players, browser, and social media platform.

الخطوة 4: الحمولة

The completed MP4 is as a Blob, converted to a URL via URL.createObjectURL(), and triggered as a download:

await encoder.flush();  // Wait for all frames to encode
const mp4Blob = muxer.finalize();
const url = URL.createObjectURL(new Blob([mp4Blob], { type: 'video/mp4' }));

const a = document.createElement('a');
a.href = url;
a.download = 'animation.mp4';
a.click();
URL.revokeObjectURL(url);

أما خط الأنابيب بكامله - التقاط الإطارات، والتزين H.264، والتشويق، والتفريغ، والتحميل - فإنه يحدث في المصفح. لا خادم لا تحميل. لا تجهيز طرف ثالث.

الأداء

On a 2023 MacBook Pro (M2), encoding a 1080 x1080 animation at 30 FPS:

المدة	Frames	الوقت المحدد	حجم الملف
3 ثوان	90	ثانيتين	~1.8 MB
10 ثوان	300	6 ثواني	5 MB
30 ثانية	900	18 ثانية	14 MB

Encoding is faster than real-time because equipment H.264 encoders (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) handle the heavy computation. مندوبي شركة بروزر على الشبكة العالمية (PG0X) إلى مسرعي الأجهزة هذه بشكل شفاف.

دعم الحشد

Browser	الويب	H.264 Encode	الحالة
Chrome 94+	نعم	نعم	الدعم الكامل
Edge 94+	نعم	نعم	الدعم الكامل (كروميوم)
أوبرا 80+	نعم	نعم	الدعم الكامل (كروميوم)
Safari 16.4+	Partial	الرمز فقط	غير متاح
Firefox	خلف العلم	لا	التجارب

For browsers without webCodecs, PinePaper falls back to GIF export, which uses a pure JavaScript encoder (gif.js) and works everywhere.

المراجع

• هل يمكنني استخدامها (2026) WebCodecs API browser support table. Caniuse.com/webcodecs.
• McIlroy, D. (2021). WebCodecs Explainer. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicbot-explainer-webcodecs.md.
• Richardson, I.E.G. (2010). * معيار ضغط الفيديو المتقدم H.264* (الدرجة الثانية). (وايلي).
• Vani, A. mp4-muxer — JavaScript MP4 muxer for WebCodecs. github.com/nicerobot/nicerobot.github.io.
• W3C (2021). WebCodecs API Specification. w3c.github.io/webcodecs/.

---

مقطع فيديو من طراز MP4 مجانا - لا خادم، لا إشارة، لا علامة مائية. افتحي الباب وجربيه.