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 — يأخذ أشرطة الفيديو الخام والنواتج المرمزة H.264 (أو VP8/VP9/AV1)
• VideoDecoder — يأخذ الشيكات المشفرة، والإطارات الخام للنواتج (المستخدمة في إعادة التشغيل، وليس التصدير)

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

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
});

The codec string avc1.42E01E specifies H.264 Baseline Profile. هذا هو الأكثر توافقا H.264 يعزف على كل هاتف، بروزر، ومنصة وسائل الإعلام الاجتماعية. وتقدم الملامح العليا (ماين، هاي) ضغطا أفضل ولكنها أقل توافقا [Richardson، 2010].

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

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

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

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: البيانات الوصفية السينمائية، وصف المسار، جداول التوقيت
• صندوق mdat: بيانات الفيديو الفعلية المشفرة

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.
• ماكلروي، دي. (2021). (ويك كودكس). W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• ريتشاردسون، 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 مجانا - لا خادم، لا إشارة، لا علامة ماء. افتحي الباب وجربيه.