How We Built Browser- Native MP4 Ekspor - Tidak Perlu Server

Masalah

Alat-alat animasi tradisional ekspor video dengan mengirim frame ke server, mengkodean mereka dengan ffmpeg, dan mengembalikan hasilnya. Ini memiliki tiga biaya: upload bandwidth (mengirim megabyte frame data), server menghitung (CPU / GPU waktu untuk pengkodean), dan privasi (kerja kreatif Anda mentransits infrastruktur pihak ketiga).

PinePaper tidak melakukan semua ini. Berkas MP4 dibuat seluruhnya dalam peramban Anda. Tidak ada frame meninggalkan perangkat Anda. Pengkodean terjadi pada enkoder video hardware mesin Anda. Artikel ini menjelaskan bagaimana.

WebCodecs: Encoding Video Hardware dalam Peramban

• • WebCodecs API * * [W3C, 2021] menyediakan akses tingkat rendah ke built-browser dalam enkoder video dan decoder. Itu dikirim di Chrome 94 (September 2021) dan sekarang tersedia di Chrome, Edge, dan Opera. Safari dan Firefox memiliki dukungan parsial atau eksperimental [Dapatkah saya Gunakan, 2026].

WebCodecs mengekspos dua antarmuka kunci:

• VideoEncoder - membutuhkan frame video mentah, keluaran terkode H.264 (atau VP8 / VP9 / AV1) potongan bitstream
• VideoDecoder - mengambil potongan terkode, mengeluarkan frame mentah (digunakan untuk putar kembali, bukan ekspor)

Untuk ekspor MP4, kami menggunakan VideoEncoder. Aliran kerja:

1. Buat sebuah VideoEncoder dikonfigurasi untuk H.264 pada resolusi yang diinginkan dan bitrate
2. Untuk setiap bingkai animasi: tangkap kanvas sebagai VideoFrame, berikan ke enkoder
3. Kumpulkan potongan dikodekan (mentah H.264 NAL unit)
4. Mux potongan ke dalam wadah MP4
5. Menawarkan berkas MP4 untuk diunduh

Langkah 1: Konfigurasi Enkoder

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

String codec avc1.42E01E menspesifikasikan Profil Baseline H.264. Ini adalah yang paling kompatibel luas profil H.264 - ia bermain di setiap telepon, browser, dan platform media sosial. Profil yang lebih tinggi (Main, High) menawarkan kompresi yang lebih baik tapi kurang kompatibilitas [Rizkardson, 2010).

Bitrate mengontrol kualitas vs ukuran berkas. Pada 5 Mbps untuk klip 3-detik:. Ukuran sebenarnya bervariasi berdasarkan kompleksitas isi - adegan statis compress lebih baik daripada gerak cepat.

Step 2: Frame Capture and Encoding

Untuk setiap frame dalam timeline animasi:

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
}

Detil kritis: setelah memajukan animasi dan merender kanvas, Anda harus menunggu requestAnimationFrame sebelum menangkap. Ini menjamin GPU telah selesai mengkomposing piksel. Tanpa sinkronisasi ini, Anda menangkap penyangga basi dan menghasilkan frame yang kosong atau duplikat.

Langkah 3: MP4 Muxing

VideoEncoder mengeluarkan potongan H.264 mentah (unit NAL). Ini bukan file yang dapat dimainkan - mereka perlu dibungkus dalam kontainer MP4 yang menyimpan waktu, metadata, dan konfigurasi codec.

PinePaper menggunakan * * mp4-muxer * * library [Vani, mp4-muxer] untuk langkah ini. Muxer menerima potongan kode dengan penanda waktu dan menghasilkan berkas PP1X yang valid dengan:

• ftyp box: deklarasi tipe berkas (isom, iso2, mp41)
• Kotak moov: metadata film, deskripsi trek, tabel waktu
• Kotak mdat: data video yang dikodekan

Hasilnya adalah standar-compliant MP4 yang dimainkan di setiap pemutar video, peramban, dan platform media sosial.

Langkah 4: Unduh

MP4 yang lengkap dirakit sebagai Blob, dikonversi ke URL melalui URL.createObjectURL(), dan dipicu sebagai 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);

Seluruh baris pipa - tangkap frame, H.264 encoding, MP4 muxing, dan download - terjadi di browser. Tidak ada server. Tidak ada upload. Tidak ada proses pesta ketiga.

Penampilan

Pada MacBook Pro 2023 (M2), pengkodean sebuah animasi 1080 × 1080 di 30 FPS:

Durasi	Bingkai	Waktu Enkode	Ukuran Berkas
3 detik	90	~ 2 detik	~1.8 MB
10 detik	300	~ 6 detik	~ 5 MB
30 detik	900	~ 18 detik	~ 14 MB

Enkoding lebih cepat daripada waktu karena perangkat keras H.264 encoders (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) menangani komputasi berat. Peramban 's WebCodecs API delegasi kepada akselerator perangkat keras ini dengan penuh perhatian [McIlroy, 2021].

Pilih panjang. Kedua batang berbagi satu skala, sehingga batang enkode duduk di dalam klip bar * adalah * klaim - dan beralih antara tiga menunjukkan pekerjaan tumbuh proporsi untuk frame, yang merupakan bagian satu baris tidak dapat menunjukkan.

Dukungan Peramban

Peramban	WebCodecs	Encode H.264	Status
Krom 94 +	Ya	Ya	Dukungan penuh
Tepi 94 +	Ya	Ya	Dukungan penuh (Chromium)
Opera 80 +	Ya	Ya	Dukungan penuh (Chromium)
Safari 16.4 +	Sebagian	Hanya decode	Enkode tidak tersedia
Firefox	Flag belakang	Tidak	Percobaan

Untuk browser tanpa WebCodecs, PinePaper kembali ke ekspor PP1X, yang menggunakan Enkoder JavaScript murni (gif.js) dan bekerja di mana saja.

Referensi

• Dapatkah saya gunakan (2026). WebCodecs API didukung tabel peramban. canuse.com / webcodecs.
• McIlroy, D. (2021). WebCodecs Explainer. W3C WICG. github.com / nicerobot / nicerobot.github.io / blob / master / nicerobot- expiain-webcodecs.m.
• Richardson, I.E.G. (2010). * The H.264 Advanced Video Compression Standard * (2nd ed.). Wiley.
• Vani, A. mp4-muxer - JavaScript MP4 muxer untuk WebCodecs. github.com / nicerobot / nicerobot.github.io.
• W3C (2021). Spesifikasi WebCodecs API. w3c.github.io / webcodecs /.

---

Ekspor video MP4 secara gratis - tidak ada server, tidak ada tanda tangan, tidak ada watermark. Buka [pinepaper.studio / editor] (/editor) dan cobalah.