Hur vi byggde Browser-Native MP4 Export - Ingen server krävs

Problemet

Traditionella webbaserade animationsverktyg exporterar video genom att skicka ramar till en server, koda dem med ffmpeg och returnera resultatet. Detta har tre kostnader: ladda upp bandbredd (skicka megabyte ramdata), server compute (CPU / GPU tid för kodning), och integritet (ditt kreativa arbete transiterar en tredje parts infrastruktur).

PinePaper gör inget av detta. MP4-filen skapas helt i din webbläsare. Inga ramar lämnar din enhet. Kodningen sker på din maskins hårdvaruvideokodare. Denna artikel förklarar hur.

WebCodecs: Hårdvaruvideokodning i webbläsaren

WebCodecs API [W3C, 2021] ger låg nivå tillgång till webbläsarens inbyggda videokodare och dekoder. Den levererades i Chrome 94 (september 2021) och är nu tillgänglig i Chrome, Edge och Opera. Safari och Firefox har delvis eller experimentellt stöd [Can I Use, 2026].

WebCodecs avslöjar två nyckelgränssnitt:

• VideoEncoder - tar råa videoramar, utgångar kodade H.264 (eller VP8 / VP9 / AV1) bitstream bitar
• VideoDecoder - tar kodade bitar, utgångar råa ramar (används för uppspelning, inte export)

För MP4-export använder vi VideoEncoder. Arbetsflödet:

1. Skapa en VideoEncoder konfigurerad för H.264 vid önskad upplösning och bitrate
2. För varje animationsram: fånga duken som en VideoFrame, mata den till encoder
3. Samla de kodade bitarna (rå H.264 NAL-enheter)
4. Mux bitarna i en MP4 behållare
5. Erbjud MP4-filen för nedladdning

Steg 1: 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
});

Codec sträng avc1.42E01E specificerar H.264 Baseline Profile. Detta är den mest kompatibla H.264-profilen - den spelar på varje telefon, webbläsare och social media-plattform. Högre profiler (Main, High) erbjuder bättre komprimering men mindre kompatibilitet (Richardson, 2010).

Bitrate styr kvalitet vs filstorlek. Vid 5 Mbps för ett 3-sekunders klipp: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Faktisk storlek varierar beroende på innehållskomplexitet - statiska scener komprimerar bättre än snabb rörelse.

Steg 2: Frame Capture and Encoding

För varje ram i animationstidslinjen:

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
}

Den kritiska detaljen: efter att ha avancerat animationen och gjort duken måste du vänta på requestAnimationFrame innan du fångar. Detta säkerställer att GPU har färdigställt pixlar. Utan denna synkronisering fångar du en buffert och producerar ramar som är tomma eller duplicerade.

Steg 3: MP4 Muxing

VideoEncoder-utgångarna råa H.264 bitar (NAL-enheter). Dessa är inte en spelbar fil - de måste vara inslagna i en MP4 behållare som lagrar timing, metadata och codec konfiguration.

PinePaper använder mp4-muxer-biblioteket [Vani, mp4-muxer] för detta steg. Muxern får kodade bitar med timestamps och producerar en giltig MP4-fil med:

• ftyp-box: filtypdeklaration (isom, iso2, mp41)
• moov-box: filmmetadata, spårbeskrivningar, tidtabeller
• mdat-box: den faktiska kodade videodata

Resultatet är en standardkompatibel MP4 som spelar i varje videospelare, webbläsare och sociala medier plattform.

Steg 4: Ladda ner

Den färdiga MP4 monteras som en Blob, konverteras till en URL via URL.createObjectURL(), och utlöses som en nedladdning:

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

Hela rörledningen - ramfångst, H.264 kodning, MP4 muxing och nedladdning - händer i webbläsaren. Ingen server. Ingen uppladdning. Ingen tredje part bearbetning.

Prestanda

På en 2023 MacBook Pro (M2), kodar en 1080 × 1080 animation vid 30 FPS:

Varaktighet	Frames	Koda tid	Filstorlek
3 sekunder	90	~2 sekunder	~1.8 MB
10 sekunder	300	~6 sekunder	~5 MB
30 sekunder	900	~18 sekunder	~14 MB

Kodning är snabbare än realtid eftersom hårdvara H.264-kodare (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) hanterar den tunga beräkningen. Webbläsarens WebCodecs API delegerar till dessa hårdvaruacceleratorer transparent [McIlroy, 2021].

Browser Support

Browser	WebCodecs	H.264 kod	Status
Chrome 94+	Ja	Ja	Fullt stöd
Edge 94+	Ja	Ja	Fullt stöd (krom)
Opera 80+	Ja	Ja	Fullt stöd (krom)
Safari 16.4+	Partiell	Decode endast	Kod inte tillgänglig
Firefox	Bakom flaggan	Ingen	Experimentell

För webbläsare utan WebCodecs faller PinePaper tillbaka till GIF export, som använder en ren JavaScript-kodare (gif.js) och fungerar överallt.

Referenser

• Kan jag använda (2026). WebCodecs API webbläsarsupportbord. 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). * H.264 Advanced Video Compression Standard* (2nd ed.). Wiley.
• Vani, A. mp4-muxer - JavaScript MP4 muxer för WebCodecs. github.com/nicerobot/nicerobot.github.io.
• W3C (2021) WebCodecs API Specification. w3c.github.io/webcodecs/.

---

Exportera MP4 video gratis - ingen server, ingen registrering, inget vattenstämpel. Öppna [pinepaper.studio/editor] (/editor) och prova det.