Hvordan vi bygget nettleser-Native MP4 eksport — Ingen server kreves

Problemet

Tradisjonelle webbaserte animasjonsverktøy eksporterer video ved å sende rammer til en server, kode dem med ffmpeg og returnere resultatet. Dette har tre kostnader: å laste opp båndbredde (send megabytes av rammedata), serverberegning (CPU/GPU tid for koding) og personvern (din kreative arbeid passerer en tredjeparts infrastruktur).

PinePaper gjør ingenting av dette. MP4-filen opprettes helt i nettleseren din. Ingen rammer forlater enheten din. Kodingen skjer på maskinens maskinvarevideokoder. Denne artikkelen forklarer hvordan.

WebCodecs: Maskinvarevideokoding i nettleseren

WebCodecs API [W3C, 2021] gir tilgang til nettleserens innebygde videokoder og dekoder. Den ble sendt i Chrome 94 (2021) og er nå tilgjengelig i Chrome, Edge og Opera. Safari og Firefox har delvis eller eksperimentell støtte.

WebCodecs avslører to nøkkelgrensesnitt:

• VideoEncoder - tar rå videorammer, utganger kodet H.264 (eller VP8/VP9/AV1) bitstrømsbiter
• VideoDecoder - tar kodede biter, utganger rå rammer (brukes til avspilling, ikke eksport)

For MP4 eksport, bruker vi VideoEncoder. Arbeidsflyten:

1. Opprette en VideoEncoder konfigurert for H.264 ved ønsket oppløsning og bitrate
2. For hver animasjonsramme: fange lerret som en VideoFrame, mate det til koderen
3. Samle de kodede bitene (raw H.264 NAL-enheter)
4. Mux bitene i en MP4 beholder
5. Tilby MP4-filen for nedlasting

Trinn 1: Koderkonfigurasjon

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-strengen avc1.42E01E spesifiserer H.264 baseline-profil. Dette er den mest kompatible H.264-profilen — den spiller på hver telefon, nettleser og sosiale medier. Høyere profiler (Main, High) tilbyr bedre komprimering men mindre kompatibilitet [Richardson, 2010].

Bitrate styrer kvalitet vs filstørrelse. Ved 5 Mbps for et 3 sekunders klipp: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Faktisk størrelse varierer basert på innholdskompleksitet — statiske scener komprimerer bedre enn rask bevegelse.

Trinn 2: Ramme Fangst og Koding

For hver ramme i animasjonens tidslinje:

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 kritiske detaljen: etter å ha fremmet animasjonen og rendre lerretet, må du vente på requestAnimationFrame før du fanger. Dette sikrer at GPU har fullført sammensetningspiksler. Uten denne synkroniseringen fanger du en stavebuffer og produserer rammer som er tomme eller dupliserte.

Trinn 3: MP4 Muxing

Videoen Encoder produserer rå H.264 biter (NAL enheter). Disse er ikke en spillbar fil - de må pakkes inn i en MP4 beholder som lagrer timing, metadata og codec konfigurasjon.

PinePaper bruker mp4-muxer biblioteket [Vani, mp4-muxer] for dette trinnet. Muxer mottar kodede biter med tidsstempler og produserer en gyldig MP4-fil med:

• ftyp boks: filtypeerklæring (isom, iso2, mp41)
• moov boks: film metadata, sporbeskrivelser, tidstabeller
• mdat-boksen: de aktuelle kodede videodataene

Resultatet er en standard-kompatibel MP4 som spiller i hver videospiller, nettleser og sosiale medier plattform.

Trinn 4: Last ned

Den ferdige MP4 er samlet som en Blob, konvertert til en URL via URL.createObjectURL(), og utløst som en nedlasting:

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

Hele rørledningen - rammefangst, H.264 koding, MP4 muxing og nedlasting - skjer i nettleseren. Ingen server. Ingen opplasting. Ingen tredjepartsbehandling.

Ytelse

På en 2023 MacBook Pro (M2) koder en 1080×1080 animasjon ved 30 FPS:

Varighet	Rammer	Kodingstid	Filstørrelse
3 sekunder	90	~ 2 sekunder	~1.8 MB
10 sekunder	300	~6 sekunder	~5 MB
30 sekunder	900	~18 sekunder	~14 MB

Kodingen er raskere enn i sanntid fordi maskinvare H.264 kodere (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) håndterer den tunge beregningen. Nettleserens WebCodecs API delegater til disse maskinvareakseleratorene gjennomsiktig [McIlroy, 2021].

Nettleserstøtte

Nettleser	WebCodecs	H.264 Koding	Status
Chrome 94+	Ja	Ja	Full støtte
Edge 94+	Ja	Ja	Full støtte (Chromium)
Opera 80+	Ja	Ja	Full støtte (Chromium)
Safari 16.4+	Delvis	Kun kode	Koding ikke tilgjengelig
Firefox	Bak flagg	Nei	Eksperimentell

For nettlesere uten WebCodecs, PinePaper faller tilbake til GIF eksport, som bruker en ren JavaScript-koder (gif.js) og fungerer overalt.

Referanser

• Kan jeg bruke (2026). WebCodecs API-nettleserstøttetabell. Caniuse.com/webcodecs.
• McIlroy, D. (2021). W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• Richardson, I.E.G. (2010). H.264 Avansert videokomprimering Standard (2nd ed.). Wiley.
• Vani, A. mp4-muxer — JavaScript MP4 muxer for WebCodecs. github.com/nicerobot/nicerobot.github.io.
• W3C (2021). WebCodecs API spesifikasjon. W3c.github.io/webcodecs/.

---

Eksporter MP4 video gratis - ingen server, ingen tilmelding, ingen vannmerke. Åpne pinepaper.studio/editor og prøv det.