Browser-Native MP4 Export – No Server Required

Problem Problem

Geleneksel web tabanlı animasyon araçları bir sunucuya çerçeveler göndererek, onları ffmpeg ile genişleterek ve sonucu geri döndürür. Bu üç maliyeti vardır: bant genişliği (sending megabytes of framework data), sunucu hesaplama (CPU/GPU time for encoding), ve mahremiyet (projektif çalışmanızın üçüncü bir parti altyapısını geçmesi).

PinePaper bunların hiçbiri değildir. MP4 dosyası tamamen tarayıcınızda oluşturulur. Hiçbir çerçeve cihazınızdan ayrılır. Enkoding, makinenizin donanım video encoder üzerinde gerçekleşir. Bu makale nasıl açıklıyor.

WebCodecs: Browser Video Encoding in the Browser

WebCodecs API [W3C, 2021] tarayıcının yerleşik video encoder ve decoder'e düşük seviyeli erişim sağlar. Chrome 94 (Eylül 2021) tarafından gönderildi ve şimdi Chrome, Edge ve Opera'da mevcut. Safari ve Firefox kısmi veya deneysel desteğe sahiptir [ kullanabilirim, 2026].

WebCodecs iki anahtar arayüzü ortaya çıkarır:

• VideoEncoder - ham video çerçevelerini alır, çıktılar H.264 (veya VP8/VP9/AV1) bitstream chunks
• VideoDecoder – encoded chunks alır, ham çerçeveler (oyun için kullanılır, ihracat değil)

MP4 ihracat için, VideoEncoder kullanıyoruz. İş akışı:

1. H.264 için istenen karar ve biraz ayarlanan bir VideoEncoder oluşturun
2. Her animasyon çerçevesi için: tuvali VideoFrame olarak yakalayın, onu besleyin Encoder
3. Encoded chunks toplayın (raw H.264 NAL birimleri)
4. Mux the chunks into an MP4 konteyner
5. MP4 dosyasını indirmek için

Adım 1: Encoder Konfü

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

Kodc string avc1.42E01E, H.264 Baselin Profilini belirtir. Bu en yaygın H.264 profili - her telefonda, tarayıcı ve sosyal medya platformunda oynuyor. Yüksek profiller (Main, High) daha iyi bir sıkıştırma sunar, ancak daha az uyumluluk [Richardson, 2010].

Biraz kontrol kalitesi vs dosya boyutu. 3 saniyelik bir klip için 5 Mbps: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Gerçek boyut içerik karmaşıklığına göre değişir - statik sahneler hızlı hareketten daha iyi çalışır.

2. Adım: Frame captured and Encoding

Animasyon zamanında her çerçeve için:

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
}

Kritik detay: animasyonu ilerletdikten ve tuvali tamamladıktan sonra, requestAnimationFrame'u yakalamadan önce beklemeniz gerekir. Bu, GPU'nun hesaplamayı tamamlamasını sağlar. Bu senkronizasyon olmadan, bir stale tampon yakalar ve boş veya tekrarlanan çerçeveler üretirsiniz.

Adım 3: MP4 Muxing

VideoEncoder çıktıları ham H.264 chunks (NAL birimleri). Bunlar oynanabilir bir dosya değildir - mağazalardan zamanlama, metadata ve kodc konfigürasyonu olan bir MP4 konteynerinde montajı gerekir.

PinePaper, mp4-muxer kütüphanesi [Vani, mp4-muxer] bu adım için kullanır. Muxer zamantamps ile kodlanmış chunks alır ve geçerli bir MP4 dosyası üretir:

• ftyp kutusu: dosya türü bildirimi (izo, iso2, mp41)
• moov box: film metadata, açıklamalar, zamanlama masaları
• mdat kutusu: gerçek kodlanmış video verileri

Sonuç, her video oynatıcı, tarayıcı ve sosyal medya platformunda oynayan standart bir MP4.

Adım 4: Download

Tamamlanan MP4, Blob olarak bir araya getirilir ve URL.createObjectURL() ile bir URL'e dönüştürülür:

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

Tüm boru hattı - çerçeve yakalama, H.264 encoding, MP4 muxing ve indirme - tarayıcıda gerçekleşir. Hiçbir sunucu yok. Yükleme yok. Üçüncü taraf işleme yok.

Performans

2023'te bir MacBook Pro (M2), 30 FPS'te 1080 × animasyonu kodlamak:

Süre süresi	Frames	Encode Time	Dosya Boyutu
3 saniye	90	~2 saniye	~1.8 MB
10 saniye	300	~6 saniye	~5 MB
30 saniye	900	18 saniye	~14 MB

Encoding gerçek zamanlı olduğundan daha hızlıdır çünkü donanım H.264 encoders (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) ağır hesaplamayı ele alır. Tarayıcının WebCodecs API delegeleri bu donanım hızlandırıcılarına şeffaf bir şekilde [McIlroy, 2021].

Browser Support

Browser	WebCodecs	H.264 Encode	Durum durumu
Chrome 94+	Evet	Evet	Tam destek
Edge 94+	Evet	Evet	Full support (Chromium)
Opera 80++	Evet	Evet	Full support (Chromium)
Safari 16.4+	Partial	Decode sadece	Encode mevcut değil
Firefox	Arka bayrak arkasında	Hayır hayır hayır	Deneysel

WebCodecs olmadan tarayıcılar için PinePaper, saf bir JavaScript encoder (gif.js) kullanır ve her yerde çalışır.

Referanslar

• I use (2026). WebCodecs API tarayıcı desteği masası. Caniuse.com/webcodecs.
• McIlroy, D. (2021). WebCodecs, W3C WICG. trhub.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• Richardson, I.E.G. (2010). * H.264 Gelişmiş Video Promosyon Standardı * (2. ed.). Wiley.
• Vani, A. mp4-muxer - JavaScript MP4 muxer for WebCodecs. trhub.com/nicerobot/nicerobot.github.
• W3C (2021). WebCodecs API Belirtileri. w3c.github.io/webcodecs/.

---

İthalat MP4 ücretsiz video - sunucu yok, işaret yok, su işareti yok. Açık pinepaper.studio/editor ve deneyin.