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 — ay kumukuha ng hilaw na mga balangkas ng video, ang mga output ay nag - iindorso ng H.264 (o VP8/VP9/AV1) na mga tipak ng bitstream
• VideoDecoder — ay nag - i-install ng mga tipak, gumagawa ng hilaw na mga frame (na ginagamit para sa playback, hindi iniluluwas)

Para sa pagluwas ng MP4, ginagamit namin ang VideoEncoder. Ang takbo ng trabaho:

1. Gumawa ng isang VideoEncoder na isinaayos 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 striktong avc1.42E01E ay nagsasaad ng H.264 Baseline Profile. Ito ang pinakamalaganap na katugmang H.264 profile — naglalaro ito 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 sukat ay iba - iba batay sa detalye ng nilalaman — mas maganda ang static na mga eksena kaysa sa 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 kanbas, dapat mong hintayin ang requestAnimationFrame bago hulihin. 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). Ang mga ito ay hindi isang playable file — ang mga ito ay kailangang ibalot sa isang MP4 container na nag-iimbak ng tiyempo, metadata, at ang 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 kahon: file type expression (isom, iso2, nm41)
• moov kahon: pelikula metadata, paglalarawan sa track, mga talahanayan sa panahon
• Kahon ng mdat: ang aktuwal na naka - rehistrong impormasyon ng video

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 ginawang isang URL sa pamamagitan ng URL.createObjectURL(), at sinimulan bilang 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 — paghuli ng kuwadro, H.264 Assumption, 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].

Pumili ng isang haba. Ang dalawang bar ay parehong may iisang sukat, kaya ang ziggurat na baras na nakaupo sa loob ng riles klip bar is ang pag - aangkin — at ang pagbabago sa pagitan ng tatlong palabas ay ang gawain na lumalaki kung ihahambing sa mga balangkas, na ang bahagi ay isang hanay lamang ay hindi maipakita.

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 Ipaliwanager. 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. ika-4-muxer — JavaScript MP4 muxer para sa WebCodecs. github.com/nicerobot/nicerobot.github.io.
• W3C (2021). WebCodecs API speciation. w3c.github.io/webcodecs/.

---

Itapon nang libre ang MP4 video — walang server, walang signup, walang watermark. Buksan pinepaper.studio/editor at subukan ito.