Hvordan vi byggede Browser- Native MP4 eksport - Ingen server kræves

Problemet

Traditionelle webbaserede animation værktøjer eksportere video ved at sende rammer til en server, kodning dem med ffmpeg, og returnere resultatet. Dette har tre omkostninger: uploade båndbredde (sende megabyte af frame data), server beregne (CPU / GPU tid til kodning), og privatlivets fred (dit kreative arbejde transmitterer en tredjeparts infrastruktur).

PinePaper gør intet af dette. MP4-filen er oprettet helt i din browser. Ingen rammer forlader din enhed. Kodning sker på din maskines hardware video encoder. Denne artikel forklarer hvordan.

WebCodecs: Hardware videokodning i browseren

• • WebCodecs API * * [W3C, 2021] giver lav-level adgang til browserens build- in video encoder og dekoder. Det blev afsendt i Chrome 94 (September 2021) og er nu tilgængelig i Chrome, Kant, og Opera. Safari og Firefox har delvis eller eksperimentel støtte [Kan jeg bruge, 2026].

WebCodecs udsætter to nøglegrænseflader:

• VideoEncoder - tager rå video rammer, udgange kodet H.264 (eller VP8 / VP9 / AV1) bitstream stykker
• VideoDecoder - tager kodede stykker, udgange rå rammer (bruges til afspilning, ikke eksport)

Til MP4 eksport bruger vi VideoEncoder. Arbejdsgangen:

1. Opret en VideoEncoder indstillet til H.264 ved den ønskede opløsning og bitrate
2. For hver animation ramme: fange lærredet som en VideoFrame, fodre det til indkoderen
3. Indsamle indkodede stykker (rå H.264 Tiende enheder)
4. Mux chunks i en MP4 beholder
5. Tilbyd MP4 fil til download

Trin 1: Indstilling af indkoder

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 angiver H.264 Baseline Profil. Dette er den mest kompatible H.264 profil - det spiller på hver telefon, browser og sociale medier platform. Højere profiler (Main, High) tilbyder bedre komprimering, men mindre kompatibilitet [Richardson, 2010].

Bitraten kontrollerer kvalitet vs filstørrelse. På 5 Mbps for en 3-andet klip: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Faktisk størrelse varierer baseret på indhold kompleksitet - statiske scener komprimere bedre end hurtig bevægelse.

Trin 2: Frame Capture og indkodning

For hver ramme 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 kritiske detalje: Efter fremrykning af animationen og rendering af lærredet, skal du vente på requestAnimationFrame, før du fanger. Dette sikrer, at GPU 'en er færdig med at sammensætte pixels. Uden denne synkronisering, du fange en gammel buffer og producere rammer, der er tomme eller duplikeret.

Trin 3: MP4 Muxing

VideoEncoder udgange rå H.264 stykker (Tiende enheder). Disse er ikke en spilbar fil - de skal være pakket ind i en MP4 beholder, der gemmer timing, metadata, og codec konfiguration.

PinePaper bruger * * mp4- muxer * * bibliotek [Vani, mp4- muxer] til dette trin. Muxeren modtager kodede stykker med tidsstempler og producerer en gyldig MP4 fil med:

• ftyp box: filtype declaration (isom, iso2, mp41)
• moov box: film metadata, spor beskrivelser, timing tabeller
• mdat boks: den faktiske kodede videodata

Resultatet er en standard-kompatibel MP4, der spiller i alle video-afspiller, browser og sociale medier platform.

Trin 4: Download

Den færdige MP4 er samlet som en Blob, konverteret til en URL via URL.createObjectURL(), og udløses som en 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);

Hele rørledningen - frame capture, H.264 kodning, MP4 muxing, og download - sker i browseren. Ingen server. Ingen upload. Ingen tredjepartsbehandling.

Resultater

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

Varighed	Rammer	Indkode tid	Filstørrelse
3 sekunder	90	~ 2 sekunder	~1.8 MB
10 sekunder	300	~ 6 sekunder	~ 5 MB
30 sekunder	900	~ 18 sekunder	~ 14 MB

Kodning er hurtigere end realtid, fordi hardware H.264 encoder (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) håndtere den tunge beregning. Browseren WebCodecs API delegerer til disse hardware acceleratorer gennemsigtigt [McIlroy, 2021].

Browserunderstøttelse

Browser	WebCodecs	H.264 Indkode	Status
Chrome 94 +	Ja	Ja	Fuld støtte
Kant 94 +	Ja	Ja	Fuld understøttelse (Chrom)
Opera 80 +	Ja	Ja	Fuld understøttelse (Chrom)
Safari 16, 4 +	Delvis	Decode kun	Kode ikke tilgængelig
Firefox	Bag flag	Nej	Eksperimentel

For browsere uden WebCodecs, PinePaper falder tilbage til GIF eksport, som bruger en ren JavaScript encoder (gif.js) og virker overalt.

Henvisninger

• Må jeg bruge (2026). WebCodecs API browser support tabel. caniuse.com / webcodecs.
• Formand WebCodecs Explainer. W3C WICG. github.com / nicerobot / nicerobot.github.io / blob / master / nicerobot- explorer-webcodecs.md.
• Richardson, I.E.G. (2010). * H.264 Advanced Video Compression Standard * (2nd ed.). Wiley.
• Vani, A. mp4- muxer - JavaScript MP4 muxer til WebCodecs. github.com / nicerobot / nicerobot.github.io.
• W3C (2021). WebCodecs API Specification. w3c.github.io / webcodecs /.

---

Eksportér MP4 video gratis - ingen server, ingen signup, ingen vandmærke. Åbn [pinepaper.studio / editor] (/editor) og prøv det.