Jak jsme vybudovali Browser- Native MP4 Export - No Server Required

Problém

Tradiční webové animace nástroje exportovat video zasláním snímků na server, kódování je s ffmpeg, a vrácení výsledku. To má tři náklady: nahrávat šířku pásma (odesílání megabajtů rámových dat), výpočet serveru (CPU / GPU čas pro kódování), a soukromí (vaše kreativní práce transformuje infrastrukturu třetí strany).

PinePaper nic z toho nedělá. Soubor MP4 je vytvořen zcela ve vašem prohlížeči. Žádné rámy neopustí vaše zařízení. Kódování se děje na hardwarovém video kodéru. Tento článek vysvětluje jak.

WebCodecs: Hardware Video kódování v prohlížeči

• • WebCodecs API * * [W3C, 2021] poskytuje low-level přístup k budování prohlížeče - ve video kodéru a dekodér. Byla odeslána v Chrome 94 (září 2021) a je nyní k dispozici v Chrome, Edge a Opera. Safari a Firefox mají částečnou nebo experimentální podporu [Can I Use, 2026].

WebCodecs nabízí dvě klíčová rozhraní:

• VideoEncoder - bere surové video rámy, výstupy kódované H.264 (nebo VP8 / VP9 / AV1) bitstream úlomky
• VideoDecoder - bere zakódované části, výstupy surové rámy (používané pro přehrávání, nikoli export)

Pro export MP4 používáme VideoEncoder. Pracovní postup:

1. Vytvořit VideoEncoder nakonfigurované pro H.264 v požadovaném rozlišení a datový tok
2. Pro každý snímek animace: zachyťte plátno jako VideoFrame, krmte ho na kodér
3. Sbírejte kódované kusy (syrové jednotky H.264 NAL)
4. Natlumte kusy do kontejneru MP4
5. Nabídnout soubor MP4 ke stažení

Krok 1: Konfigurace enkodéru

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

Kodekový řetězec avc1.42E01E specifikuje H.264 Baseline Profil. Jedná se o nejvíce kompatibilní profil H.264 - hraje na každém telefonu, prohlížeči a sociálních médií platformě. Vyšší profily (Main, High) nabízejí lepší kompresi, ale méně kompatibility [Richardson, 2010].

Datový tok kontroluje kvalitu vs velikost souboru. Na 5 Mbps pro 3sekundový klip: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Skutečná velikost se liší na základě složitosti obsahu - statické scény komprimuje lépe než rychlý pohyb.

Krok 2: Zachycení a kódování rámečku

Pro každý snímek v časové ose animace:

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
}

Kritický detail: po postupu animace a vykreslování plátna, musíte počkat na requestAnimationFrame před zachycením. Tím je zajištěno, že GPU dokončil kompozici pixelů. Bez této synchronizace zachytíte zatuchlý buffer a vytvoříte rámy, které jsou prázdné nebo duplikované.

Krok 3: Tlumočení MP4

VideoEncoder vystupuje ze syrových částí H.264 (jednotky NAL). Toto není hratelný soubor - je třeba je zabalit do kontejneru MP4, který ukládá načasování, metadata a konfiguraci kodeku.

PinePaper používá * * mp4- muxer * * knihovnu [Vani, mp4- muxer] pro tento krok. Muxer obdrží zakódované kusy s časovými razítky a vytvoří platný soubor MP4 s:

• ftyp box: file type deklaration (isom, iso2, mp41)
• moov box: filmová metadata, popis trati, časové tabulky
• mdat box: aktuální zakódovaná video data

Výsledkem je standard- vyhovující MP4, který hraje v každém video přehrávači, prohlížeči a sociální platformě.

Krok 4: Stáhnout

Dokončené MP4 je sestaveno jako Blob, přeměněno na URL přes URL.createObjectURL() a spuštěno jako stažení:

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

Celý ropovod - snímání snímků, kódování H.264, muxování MP4 a stahování - se odehrává v prohlížeči. Žádný server. Žádné nahrávání. Žádná třetí strana.

Výkonnost

Na 2023 MacBook Pro (M2), kódování 1080 × 1080 animace na 30 FPS:

Doba trvání	Rámy	Čas zakódování	Velikost souboru
3 sekundy	90	~ 2 sekundy	~1.8 MB
10 sekund	300	~ 6 sekund	~ 5 MB
30 sekund	900	~ 18 sekund	~ 14 MB

Enkódování je rychlejší než reálný čas, protože hardware H.264 enkodéry (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) zpracovávají těžké výpočty. Prohlížeč WebCodecs API deleguje na tyto hardwarové urychlovače transparentně [McIlroy, 2021].

Podpora prohlížeče

Prohlížeč	WebCodecs	H.264 Kód	Stav
Chrom 94 +	Ano	Ano	Plná podpora
Hrana 94 +	Ano	Ano	Plná podpora (chrom)
Opera 80 +	Ano	Ano	Plná podpora (chrom)
Safari 16.4 +	Částečná	Pouze dekódování	Kód není k dispozici
Firefox	Za vlajkou	Ne	Experimentální

Pro prohlížeče bez WebCodecs se PinePaper vrací zpět na export GIF, který používá čistý JavaScript enkodér (gif.js) a funguje všude.

Odkazy

• Mohu použít (2026). WebCodecs API tabulka podpory prohlížeče. caniuse.com / webcodecs.
• Mc. Ilroy, D. (2021). WebCodecs Explainer. W3C WICG. github.com / nicerobot / nicerobot.github.io / blob / master / nicerobot- explainer- webcodecs.md. W3C WICG. github.com.
• Richardson, I.E.G. (2010). * The H.264 Advanced Video Compression Standard * (2nd ed.). Wiley.
• Vani, A. mp4-muxer - JavaScript MP4 muxer pro WebCodecs. github.com / nicerobot / nicerobot.github.io.
• W3C (2021). WebCodecs API Specifikace. w3c.github.io / webcodecs /.

---

Exportovat MP4 video zdarma - žádný server, žádná signalizace, žádný vodoznak. Otevřít [pinepaper.studio / editor] (/editor) a zkuste to.