Kung Paano Kami Nagtayo ng Browser-Native MP4 Export — Hindi Kailangan ang Server

Ang Problema

Ang mga tradisyunal na web-based animation na mga kasangkapan ay nagluluwas ng video sa pamamagitan ng pagpapadala ng mga frame sa isang server, pag-eendorso ng mga ito gamit ang ffmpag, at pagbabalik ng resulta. Ito ay may tatlong halaga: upload bandwidth (pagtaas ng mga megabyte ng mga datos ng frame), server compute (CPU/GPU panahon para sa ekwasyon), at privacy (ang iyong malikhaing gawain ay naghahatid ng ikatlong imprastraktura ng partido).

Hindi ito ginagawa ng PinePaper. Ang talaksang MP4 ay nilikha nang buo sa iyong browser. Walang mga balangkas na nag - iiwan ng iyong aparato. Ang pag - aayos ay nangyayari sa hardware video composer ng iyong makina. Ipinaliliwanag ng artikulong ito kung paano.

WebCodecs: Encoding ng Hardware Video sa Browser

Ang WebCodecs API[W3C, 2021] ay nagbibigay ng low-level access sa binuong-in video calcer at decoder ng browser. Ito ay ipinadala sa Chrome 94 (Setyembre 2021) at makukuha na ngayon sa Chrome, Edge, at Opera. Ang Safari at Firefox ay may bahagya o eksperimental na suporta [Can I Use, 2026].

Inilalantad ng WebCodecs ang dalawang pangunahing anyo:

• VideoEncoder — kunin ang hilaw na mga balangkas ng video, outputs regulatored H.264 (o VP8/VP9/AV1) bitstream clues
• VideoDecoder — kumuha ng naka - rehistrong mga tipak, gumagawa ng hilaw na mga frame (ginagamit para sa playback, hindi iniluluwas)

Para sa pagluluwas ng MP4, gumagamit kami ng VideoEncoder. Ang takbo ng trabaho:

1. Gumawa ng isang VideoEncoder na inayos para sa H.264 sa ninanais na resolusyon at bitrate
2. Sa bawat balangkas ng animation: hulihin ang kanbas bilang isang VideoFrame, pakanin ito sa tagaguhit
3. Ipunin ang naka-install na mga tipak (raw H.264 NAL units)
4. Isalin ang mga tipak sa isang lalagyan ng MP4
5. Ialok ang MP4 file para sa download

Hakbang 1: Pabagu - bago

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

Ang kodigong string na avc1.42E01E ay nagsasabi ng H.264 Baseline Profile. Ito ang pinakamalawak na katugmang H.264 na profile — ito'y naglalaro sa bawat plataporma ng telepono, browser, at social media. Ang mas mataas na profile (Main, High) ay nag-aalok ng mas mainam na compression ngunit hindi gaanong kompetsibilidad [Ricial ardson, 2010].

Ang bitrate ay kumokontrol sa kalidad vs file sukat. Nasa 5 Mbps para sa 3-second clip: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Ang aktuwal na laki ay iba - iba batay sa pagiging masalimuot ng nilalaman — ang static na mga eksena ay mas siksik kaysa mabilis na pagkilos.

Hakbang 2: Frame Capture and Encoding

Para sa bawat balangkas sa animation timeline:

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
}

Ang kritikal na detalye: pagkatapos pasulungin ang animasyon at isalin ang kambas, dapat kang maghintay ng requestAnimationFrame bago kunin. Tinitiyak nito na tapos na ng GPU ang mga compositing pixels. Kung wala ang pagdurugtong na ito, makikita mo ang isang lumang pananggalang at makagagawa ka ng mga balangkas na blangko o kinopya.

Hakbang 3: MP4 Muxing

Ang VideoEncoder outputs hilaw H.264 tipak (NAL units). Hindi ito isang playable file — kailangan itong ibalot sa isang MP4 container na nag-iimbak ng tiyempo, metadata, at codec configuration.

Ginagamit ng PinePaper ang *mp4-muxer library [Vani, mp4-muxer] para sa hakbang na ito. Ang muxer ay tumatanggap ng naka-install na mga tipak na may mga timestamp at gumagawa ng tanggap na MP4 file na may:

• ftyp box: file type degration (isom, iso2, nm41)
• moov kahon: pelikula metadata, paglalarawan sa track, mga talahanayan sa panahon
• Talaan ng mga Nilalaman

Ang resulta ay isang pamantayan-komplibong MP4 na gumaganap sa bawat video player, browser, at social media platform.

Hakbang 4: Ibaba

Ang natapos na MP4 ay binuo bilang isang Blob, na binago sa isang URL sa pamamagitan ng URL.createObjectURL(), at sinimulan bilang isang 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);

Ang buong tubo — na nasamsaman ng balangkas, H.264 persepsiyon, MP4 muxing, at download — ay nangyayari sa browser. Walang server. Walang pasok. Walang ikatlong-partido na pagpoproseso.

Kakayahan

Sa isang 2023 MacBook Pro (M2), ang pag - alaala sa isang 1080×1080 animation sa 30 FPS:

Gaano Katagal	Mga Frame	Maglaan ng Panahon	Pagdami ng Larawan
3 segundo	90	~2 segundo	~1.8 MB
10 segundo	300	~6 na segundo	~5 MB
30 segundo	900	~18 segundo	~14 MB

Ang encoding ay mas mabilis kaysa sa real-time dahil ang hardware H.264 regulators (Intel Quick Sync, Apple VideoTollbox, NVIDIA NVENC) ay humahawak ng mabigat na kalkulasyon. Ang WebCodecs ng browser sa mga delegado ng API sa mga hardware na ito ay malinaw na nag-ebolb [McIlroy, 2021].

Suporta ng Browser

Browser	Mga WebCodec	H.264 Encode	Kalagayan
Chrome 94+	Mayroon	Mayroon	Buong suporta
Edge 94+	Mayroon	Mayroon	Buong suporta (Cromium)
Opera 80+	Mayroon	Mayroon	Buong suporta (Cromium)
Safari 16.4+	Bahagi	Decode lamang	Hindi magagamit
Lason ng Apoy	Sa likod ng watawat	Hindi	Pag - eeksperimento

Para sa mga browser na walang WebCodecs, ang PinePaper ay bumabalik sa GIF export, na gumagamit ng purong JavaScript regulator (gif.js) at gumagana sa lahat ng dako.

Mga reperensiya

• Kaya Kong Gumamit (2006). WebCodecs API browser support table. caniuse.com/webcodecs.
• McIlroy, D. (2021). WebCodecs Explainer. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• Richardson, I.E.G. (2010). * Ang H.264 Advanced Video Compression Standard* (2nd ed.). Wiley.
• Vani, A. mp4-muxer– JavaScript MP4 mixer para sa WebCodecs. github.com/nicerobot/nicerobot.gitub.io.
• W3C (2021). WebCodecs API speciation. w3c.github.io/webcodecs/.

---

Export MP4 video para libre — walang server, walang signup, walang watermark. Buksan pinepaper.studio/editor at subukan ito.