Hogyan építettünk Browser- Native MP4 Export - Nincs kiszolgáló szükséges

A probléma

Hagyományos webes animációs eszközök exportálják videó küldésével keretek egy szerver, kódolja őket ffmpeg, és visszaküldi az eredményt. Ennek három költsége van: feltöltési sávszélesség (küldése megabytes keret adatok), szerver számítása (CPU / GPU idő kódolás), és a magánélet (a kreatív munka áthalad egy harmadik fél infrastruktúráját).

A PinePaper nem csinál ilyet. A MP4 fájl teljes egészében a böngésződben található. Nem hagyhatja el a szerkezetet. A kódolás a gép hardveres videó kódolóján történik. Ez a cikk megmagyarázza, hogyan.

WebKódok: Hardware Video Kódolás a böngészőben

A * * WebCodec API * * [W3C, 2021] alacsony szintű hozzáférést biztosít a böngésző építményéhez a videó kódoló és dekóder. Chrome 94-ben (2021. szeptember) szállították, és most már elérhető a Chrome, Edge és Opera. Safari és Firefox részleges vagy kísérleti támogatást [Can I Use, 2026].

A WebCodec-ek két kulcsinterfészt tárnak fel:

• VideoEncoder - vesz nyers videó keretek, kimenetek kódolt H.264 (vagy VP8 / VP9 / AV1) bitstream darabok
• VideoDecoder - kódolt darabokat, kimenetek nyers keretek (lejátszás, nem export)

MP4 export esetén VideoEncoder-t használunk. A munkafolyamat:

1. Hozzon létre egy VideoEncoder beállított H.264 a kívánt felbontást és bitrátát
2. Minden animációs képkocka: ragadja meg a vászon, mint egy VideoFrame, etetni a kódolóhoz
3. Gyűjtse össze a kódolt darabokat (nyers H.264 NAL egységek)
4. Mux a darabok egy MP4 tartály
5. Töltse le a MP4 fájlt

Lépés: A kódoló beállításai

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

A codec sztring avc1.42E01E a H.264 alapprofil. Ez a legszélesebb körben kompatibilis H.264 profil - minden telefonon, böngészőn és közösségi médiaplatformon játszik. Magasabb profilok (Main, High) jobb tömörítést kínálnak, de kevésbé kompatibilisek [Richardson, 2010].

A bitráta szabályozza a minőség vs fájlméret. 5 Mbps egy 3 másodperces klip: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. A tényleges méret a tartalom összetettsége alapján változik - a statikus jelenetek jobban összenyomódnak, mint a gyors mozgás.

Lépés: Frame Capture és kódolás

Az animációs idővonal minden egyes képkockájához:

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
}

A kritikus részlet: az animáció előmozdítása és a vászon kialakítása után meg kell várni az requestAnimationFrame-t, mielőtt elfogjuk. Ez biztosítja, hogy a GPU befejezte a pixelek komposztálását. A szinkronizáció nélkül egy megrekedt pufferet kell befogni, és üres vagy lemásolt kereteket kell készíteni.

3. lépés: MP4 Muxing

A VideoEncoder nyers H.264 darabokat (NAL egységek) bocsát ki. Ezek nem lejátszható fájlok - be kell őket csomagolni egy MP4 tartályba, amely az időzítést, a metaadatokat és a codec konfigurációt tárolja.

PinePaper használja a * * mp4-muxer * * könyvtár [Vani, mp4-muxer] ehhez a lépéshez. A muxer kódolt darabokat kap időbélyegzőkkel, és egy érvényes MP4 fájlt állít elő a következőkkel:

• ftyp rovat: fájltípus-nyilatkozat (izom, izo2, mp41)
• moov doboz: film metaadatok, pályamódosítások, időzítő táblázatok
• mdat rovat: a tényleges kódolt videó adatok

Az eredmény egy szabvány-kompatibilis MP4, amely játszik minden videó lejátszó, böngésző, és a közösségi média platform.

4. lépés: Letöltés

A befejezett MP4-et Blob-ként szerelik össze, URL.createObjectURL()-n keresztül átalakítják URL-re, és letöltésként aktiválják:

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

Az egész csővezeték - keret rögzítés, H.264 kódolás, MP4 muxing és letöltés - a böngészőben történik. Nincs szerver. Nincs feltöltés. Nincs harmadik fél.

Teljesítmény

Egy 2023 MacBook Pro (M2), kódolása 1080 × 1080 animáció 30 FPS:

Időtartam	Keret	Kódolási idő	Fájl mérete
3 másodperc	90	~ 2 másodperc	~1.8 MB
10 másodperc	300	~ 6 másodperc	~ 5 MB
30 másodperc	900	~ 18 másodperc	~ 14 MB

A kódolás gyorsabb, mint a valós idő, mert a hardver H.264 kódolók (Intel Quick Sync, Apple Video Toolbox, NVIDIA NVENC) kezelik a nehéz számításokat. A böngésző WebCodec API küldött ezeket hardver gyorsítók átlátható [McIlroy, 2021].

Böngészőtámogatás

Browser	Webkód	H.264 Encode	Állapot
Chrome 94 +	Igen	Igen	Teljes támogatás
Edge 94 +	Igen	Igen	Teljes támogatás (króm)
Opera 80 +	Igen	Igen	Teljes támogatás (króm)
Safari 16.4 +	Részleges	Csak dekódolás	Nem elérhető kódolás
Firefox	A zászló mögött	Nem	Kísérleti

A böngészők nélkül WebCodec, PinePaper esik vissza a GIF export, amely használja a tiszta JavaScript kódoló (gif.js) és működik mindenhol.

Hivatkozások

• Használhatom (2026)? WebCodec API böngésző támogatási táblázat. caniuse.com / webcodec.
• McIlroy, D. (2021). WebCodec Explainer. W3C WICG. github.com / nicerobot / nicerobot.github.io / blob / master / nicerobot- exploainer- webcodecs.md.
• Richardson, I.E.G. (2010). * The H.264 Advanced Video Compression Standard * (2nd ed.). Wiley.
• Vani, A. mp4-muxer - JavaScript MP4 muxer for WebCodecs. github.com / nicerobot / nicerobot.github.io.
• W3C (2021). WebCodec API Specification. w3c.github.io / webcodec /.

---

Export MP4 videó ingyen - nincs szerver, nincs signup, nincs vízjel. [pinepaper.studio / editor] (/editor) megnyitása és kipróbálása.