כיצד בנינו דפדפנים-Native MP4 יצוא - No Server Required

הבעיה

כלי אנימציה מסורתיים מבוססי אינטרנט לייצא וידאו על ידי שליחת מסגרות לשרת, לגרור אותם עם ffmpeg, ולהחזיר את התוצאה. יש לכך שלוש עלויות: להעלות רוחב פס (באמצעות מגה-בתים של נתוני מסגרת), השרת compute (זמן CPU/GPU עבור encoding), ופרטיות (העבודה היצירתית שלך מעבירה תשתית של צד שלישי).

PinePaper לא עושה את זה. קובץ MP4 נוצר לחלוטין בדפדפן שלך. לא להשאיר את המכשיר שלך. הקידוד מתרחש על מחשבת הוידאו של המכונה שלך. המאמר הזה מסביר איך.

WebCodecs: Hardware Video Encoding בדפדפן

WebCodecs API [W3C, 2021] מספק גישה ברמה נמוכה לקוקוד הווידאו שנבנה על ידי הדפדפן ו-coder. הוא נשלח ב-Chrome 94 (ספטמבר 2021) והוא זמין כעת ב-Chrome, Edge ואופרה. ספארי ו-Firefox יש תמיכה חלקית או ניסיונית (אפשר להשתמש בה, 2026).

WebCodecs חושף שני ממשקים מרכזיים:

• VideoEncoder - לוקח מסגרות וידאו גולמיות, פלטים מקודדים H.264 (או VP8/VP9/AV1) נתחי bitstreams
• VideoDecoder - לוקח נתחים מקודדים, פלטות של מסגרות גלם (שימוש עבור השמעה, לא יצוא)

עבור יצוא MP4, אנו משתמשים ב- VideoEncoder. זרימת העבודה:

1. צור VideoEncoder מוגדר עבור H.264 ברזולוציה הרצויה ו bitrate
2. עבור כל מסגרת אנימציה: ללכוד את הבד כמו VideoFrame, להאכיל אותו תגית: encoder
3. לאסוף את נתח המקודד (raw H.264 NAL יחידות)
4. Mux את החלקים לתוך מיכל MP4
5. להציע את קובץ MP4 להורדה

שלב ראשון: Encoder Configuration

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

מחרוזת ה-avc1.42E01E specifies H.264 Baseline פרופיל. זהו פרופיל H.264 התואם ביותר - הוא משחק בכל טלפון, דפדפן ופלטפורמת מדיה חברתית. פרופילים גבוהים יותר (בעיקר, גבוה) מציעים דחיסה טובה יותר אבל פחות תאימות (Richardson, 2010).

איכות בקרת bitrate לעומת גודל הקובץ. בשעה 5 Mbps עבור 3 שניות: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. גודל אקטואלי משתנה על בסיס מורכבות תוכן - סצנות סטטיות דחוסות יותר מאשר תנועה מהירה.

שלב 2: לכידת וקידוד

לכל מסגרת בלוח הזמנים האנימציה:

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
}

הפרטים הקריטיים: לאחר קידום האנימציה והפיכת הבד, עליך לחכות ל- requestAnimationFrame לפני כיבוש. זה מבטיח GPU סיים פיקסלים. ללא סינכרון זה, אתה ללכוד חיץ מזויף ומייצר מסגרות ריקות או משוכפלות.

שלב 3: MP4 Muxing

ה- VideoEncoder מפלטי H.264 (NAL יחידות). אלה אינם קובץ מנגן - הם צריכים להיות עטוף במיכל MP4 המאחסן תזמון, metadata ותצורת Codec.

PinePaper משתמשת בספריית mp4-muxer (Vani, mp4-muxer) לשלב זה. ה- muxer מקבל נתחים מקודדים עם דגימות פעמים ומייצר קובץ MP4 תקף עם:

• ftyp Box: File type Statement (isom, Iso2, mp41)
• moov Box: הסרט metadata, מעקב אחר תיאורים, טבלאות תזמון
• mdat קופסה: נתוני וידאו מקודדים

התוצאה היא MP4 סטנדרטית שממלאת בכל שחקן וידאו, דפדפן ופלטפורמת מדיה חברתית.

שלב 4: הורד

ה- MP4 המושלם כ- Blob, מומר ל- URL באמצעות URL.createObjectURL(), ומופעל כהורדה:

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 encoding, MP4 muxing והורדה - מתרחשת בדפדפן. אין שרת. לא להעלות. אין עיבוד של צד שלישי.

ביצועי ביצועים

ב-2023 MacBook Pro (M2), טבילה של 1080×1080 ב 30 FPS:

משך	מסגרות	זמן קודר	גודל הקובץ
3 שניות	90	2 שניות	~1.8 MB
10 שניות	300	6 שניות	5 MB
30 שניות	900	18 שניות	14 MB

Encoding הוא מהיר יותר מאשר בזמן אמת כי חומרה H.264 קודרים (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) להתמודד עם חישוב כבד. צירי ה- WebCodecs API של הדפדפן למאצי חומרה אלה (McIlroy, 2021).

תמיכה בדפדפן

הדפדפן Browser	Webcodecs	H.264 Encode	סטטוס
Chrome 94+	כן	כן	תמיכה מלאה
צוק 94+	כן	כן	תמיכה מלאה (Chromium)
אופרה 80+	כן	כן	תמיכה מלאה (Chromium)
ספארי 16.4+	חלק	קוד רק	קוד לא זמין
Firefox	מאחורי הדגל	לא	ניסוי

עבור דפדפנים ללא WebCodecs, PinePaper חוזר לייצוא GIF, אשר משתמש קודקוד JavaScript טהור (gif.js) ועובד בכל מקום.

הפניות

• אני יכול להשתמש (2026) Webcodecs API הדפדפן תומך בטבלה. Caniuse.com/webcodecs.
• McIlroy, D. (2021) WebCodecs Explainer. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• ריצ'רדסון, I.E.G. (2010) H.264 Advanced Video Compression Standard* (2nd ed). וילי.
• Vani, A. mp4-muxer - JavaScript MP4 muxer עבור WebCodecs. github.com/nicerobot/nicerobot.github.io.
• W3C (2021). WebCodecs API מפרט. w3c.github.io/webcodecs.

---

ייצוא MP4 וידאו בחינם - אין שרת, אין סימן מים. פתח pinepaper.סטודיו/editor ונסה זאת.