Miten rakennamme Selaimen-Native MP4 Vienti

Ongelma

Perinteiset web-pohjaiset animaatiotyökalut vievät videon lähettämällä kehykset palvelimelle, koodaamalla ne ffmpegillä ja palauttamalla tuloksen. Tällä on kolme hintaa: lataa kaistanleveys (lähettää megatavua kehysdataa), palvelimen laskenta (CPU/GPU aika koodaukseen) ja yksityisyys (luova työ kulkee kolmannen osapuolen infrastruktuuri).

PinePaper ei tee tätä. MP4-tiedosto on luotu kokonaan selaimeesi. Laite on tyhjä. Koodaus tapahtuu koneesi koneen videokoodaajalla. Tässä artikkelissa selitetään miten.

WebCodecs: Hardware Video koodaus selaimessa

WebCodecs API [W3C, 2021] tarjoaa matalan tason pääsyn selaimen sisäänrakennettuun videokoodaajaan ja dekooderiin. Se on lähetetty Chrome 94 (syyskuu 2021) ja on nyt saatavilla Chrome, Edge ja Opera. Safarilla ja Firefoxilla on osittainen tai kokeellinen tuki [Voin käyttää, 2026].

WebCodecs paljastaa kaksi avainrajapintaa:

• VideoEncoder
• VideoDecoder

MP4 vienti, käytämme VideoEncoder. Työnkulku

1. Luo H.264:lle määritetty VideoEncoder halutulla resoluutiolla ja bittinopeudella
2. Kunkin animaatio kehyksen: kaapata kangas VideoFrame, syötä se koodaajalle
3. Kerää koodatut palaset (raaka H.264 NAL-yksiköt)
4. Sekoita palat MP4-säiliöön
5. Tarjoa MP4-tiedosto ladattavaksi

Vaihe 1: Koodaimen asetukset

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

Koodimerkkijono avc1.42E01E määrittelee H.264:n perusprofiilin. Tämä on laajimmin yhteensopiva H.264 profiili . Se soittaa jokaisella puhelimella, selaimella ja sosiaalisen median alustalla. Korkeammat profiilit (Main, High) tarjoavat parempaa pakkausta, mutta vähemmän yhteensopivuus [Richardson, 2010].

Bitrate valvoo laatua vastaan tiedoston kokoa. At 5 Mbps 3 sekunnin pätkä: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Todellinen koko vaihtelee sisällön monimutkaisuuden perusteella.

Vaihe 2: Runkokaappaus ja koodaus

Animaatioajan jokaisen kehyksen osalta:

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
}

Kriittinen yksityiskohta: animaation ja kankaan tekemisen jälkeen sinun on odotettava requestAnimationFrame:ta ennen kuin kaappaat. Tämä varmistaa, että GPU on valmis säveltämään pikseleitä. Ilman tätä synkronointia kaappaat himmeän puskurin ja tuotat kehykset, jotka ovat tyhjiä tai kaksoiskappaleita.

Vaihe 3: MP4:n muuttaminen

VideoEncoder lähdöt raaka H.264 palaset (NAL yksiköt). Nämä eivät ole soitettava tiedosto .

PinePaper käyttää mp4-muxer kirjastoa [Vani, mp4-muxer] tähän vaiheeseen. Muxer vastaanottaa koodattuja paloja aikaleimalla ja tuottaa voimassa olevan MP4-tiedoston:

• ftyp-laatikko: tiedostotyypin ilmoitus (isom, iso2, mp41)
• moov box: elokuvan metadata, kappaleiden kuvaukset, ajoitustaulukot
• mdat-ruutu: todellinen koodattu videodata

Tuloksena on standardien mukainen MP4, joka soittaa jokaisessa videosoittimessa, selaimessa ja sosiaalisen median alustalla.

Vaihe 4: Lataa

Valmis MP4 kootaan Blob:ksi, muunnetaan URL:ksi URL.createObjectURL():n avulla ja käynnistetään lataus:

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

Koko putkisto ... runkokaappaus, H.264-koodaus, MP4-muksaus ja lataus tapahtuu selaimessa. Ei palvelinta. Ei latausta. Ei kolmannen osapuolen käsittelyä.

Suorituskyky

On 2023 MacBook Pro (M2), koodaus 1080×1080 animaatio 30 FPS:

Kesto	Kehykset	Koodaa aika	Tiedoston koko
3 sekuntia	90	~2 sekuntia	~1.8 MB
10 sekuntia	300	~ 6 sekuntia	~5 MT
30 sekuntia	900	~18 sekuntia	~14 MT

Koodaus on reaaliaikaista nopeampaa, koska laitteisto H.264 koodaajat (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) käsittelevät raskasta laskentaa. Selaimen WebCodecs API delegoi näihin laitteistokiihdyttimiin avoimesti [McIlroy, 2021].

Selaintuki

Selain	WebCodecsComment	H.264 Koodaa	Tila
Kromi 94+	Kyllä	Kyllä	Täysi tuki
Edge 94+	Kyllä	Kyllä	Täysi tuki (kromium)
Ooppera 80+	Kyllä	Kyllä	Täysi tuki (kromium)
Safari 16,4+	Osittain	Pura vain koodi	Koodaa ei saatavilla
Firefox	Lippujen takana	Ei	Kokeellinen

Selaimille ilman WebCodecs, PinePaper putoaa takaisin GIF vienti, joka käyttää puhdasta JavaScript-koodaaja (gif.js) ja toimii kaikkialla.

Lähteet

• Voinko käyttää sitä? WebCodecs API-selaintukitaulukko. caniuse.com/webcodecs.
• McIlroy, D. (2021). WebCodecs Selittäjä. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-selittäjä-webcodecs.md.
• Richardson, IEG (2010). H.264 Advanced Video Compression Standard (2. ed.). Wiley.
• Vani, A. mp4-muxer .
• W3C (2021). WebCodecs API Specification. W3c.github.io/webcodecs/.

---

Vie MP4 video ilmaiseksi Ei palvelinta, ei ilmoittautumista, ei vesileimaa. Avaa mäntypaperi.studio/editor ja kokeile sitä.