Bagaimana Kita Bisa Menghasilkan Ekspor MP4 Berfungsi - Tidak Diperlukan Server

Problemnya

Alat animasi berbasis web tradisional vokasi video dengan mengirim bingkai ke server, mengkodingnya dengan ffmpeg, dan mengembalikan hasilnya. Ini memiliki tiga biaya: upload bandwidth (sending megabytes dari data frame), compute server (waktu KPU/GPU untuk pengkodean), dan privasi (karya kreatif Anda transit infrastruktur pihak ketiga).

PinePaper tidak melakukan ini. Berkas MP4 dibuat sepenuhnya dalam peramban Anda. Tidak ada frame meninggalkan perangkat Anda. Pengkodean yang terjadi pada pengekod video hardware mesinmu. Artikel ini menjelaskan bagaimana caranya.

Kodeks Web: Pengekodan Video Perkakasan dalam Pelayaran

**WebCodecs API [W3C, 2021] menyediakan akses tingkat rendah ke enkoder video dan dekoder bawaan peramban. Ia dikirim dalam Chrome 94 (September 2021) dan sekarang tersedia dalam Chrome, Edge, dan Opera. Safari dan Firefox memiliki dukungan parsial atau eksperimental [Bisa Saya Gunakan, 2026].

Kode Web Kodeks mengekspos dua antarmuka kunci:

• VideoEncoder — mengambil bingkai video mentah, keluaran dikodekan H.264 (atau VP8/VP9/AV1) potongan bitstream
• VideoDecoder — mengambil potongan yang dikodekan, keluaran bingkai mentah (digunakan untuk main balik, bukan ekspor)

Untuk ekspor MP4, kita gunakan VideoEncoder. Aliran kerja:

1. Buat sebuah VideoEncoder dikonfigurasi untuk H.264 pada resolusi yang diinginkan dan bitrate
2. Untuk setiap bingkai animasi: menangkap kanvas sebagai VideoFrame, pakan itu Ke pengekod
3. Kumpulkan potongan yang dikodekan (ukuran H.264 NAL)
4. Membatalkan potongan ke dalam wadah MP4
5. Tawarkan berkas MP4 untuk dimuat turun

Langkah 1: Konfigurasi Pengekod

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

Kodeks kodeks string avc1.42E01E menentukan Profil Garis Dasar H.264. Ini adalah profil H.264 yang paling kompatibel — yang diputar di setiap platform telepon, peramban, dan media sosial. Keserasian lebih tinggi Keserasian Keserasian [Richardson, 2010].

Kualitas kontrol bitrate vs ukuran file. Klip 3 detik: 5,000,000 bits/s × 3s = 15,000,000 bits = ~1.8 MB. Ukuran seksual bervariasi berdasarkan kompleksitas konten — adegan statik lebih cepat daripada gerakan cepat.

Langkah 2: Tangkap dan Pengekodan Bingkai

Untuk setiap frame dalam garis waktu 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
}

Rincian kritis: Setelah memajukan animasi dan merender kanvas, Anda harus menunggu requestAnimationFrame sebelum menangkap. Ini memastikan GPU telah selesai menyusun piksel. Tanpa sinkronisasi ini, Anda menangkap buffer basi dan menghasilkan bingkai yang kosong atau digandakan.

Langkah 3: MP4 Muxing

Odoza VideoEncoder mengeluarkan potongan mentah H.264 (unit NAL). Ini bukan berkas yang dapat dimainkan — mereka perlu dibungkus dalam wadah MP4 yang menyimpan konfigurasi timing, metadata, dan kodeks.

Diagram PinePaper menggunakan pustaka mp4-muxer [Vani, mp4-muxer] untuk langkah ini. Kata muxer menerima potongan yang dikodekan dengan timestamp dan menghasilkan berkas MP4 yang valid dengan:

• Kotak ftyp: deklarasi tipe berkas (isom, iso2, mp41)
• Kotak moov: data meta film, keterangan trek, tabel waktu
• Kotak mdat: data video terenkod yang sebenarnya

Hasil tersebut adalah MP4 standar-kompliant yang bermain di setiap pemutar video, peramban, dan platform media sosial.

Unduhan

Setelah selesainya MP4 dirakit sebagai Blob, diubah menjadi 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 jaringan pipa — penangkapan bingkai, pengkodean H.264, muxing MP4, dan download — terjadi di peramban. Tak ada server. Tak ada upload. Tidak ada pemprosesan pihak ketiga.

Kinerja

AZO Pada MacBook Pro 2023 (M2), pengkodean animasi 1080×1080 pada 30 FPS:

Durasi	Frames	Masa Encode	Saiz Berkas XCF
* 3 detik *	90	2 detik	~1.8 MB
10 10 detik	300	6 detik	~5 MB
30 detik	900	18 detik	~14 MB

Pengekodan lebih cepat dari real-time karena encoder hardware H.264 (Intel Quick Sync, Apple VideoToolbox, NVIDIA NVENC) menangani komputasi berat. WebCodecs WebCodecs API delegasi dari perangkat keras ini akselerator transparan [Mcilroy, 2021].

Dukungan Pelayar Web

Pelayar Web	WebCodecs	Kode Enkode H.264	Status
Krom Krom 94+	Ya	Ya	Dukungan penuh
Edge 94+	Ya	Ya	Dukungan penuh (Kromium)
Opera 80+	Ya	Ya	Dukungan penuh (Kromium)
Safari 16.4+	Sebagian	Hanya Decode saja	Encode tidak tersedia
Firefox	♪ Di balik bendera ♪	Tidak	Eksperimen

Untuk peramban tanpa WebCodecs, PinePaper jatuh kembali ke ekspor GIF, yang menggunakan encoder JavaScript murni (gif.js) dan bekerja di mana-mana.

Rujukan

• Aku Bisa Menggunakan (2026). Tabel pendukung WebCodecs API. cinemacaniuse.com/webcodecs.
• ^ McIlroy, D. (2021). Penjelas WebCodecs. W3C WICG. github.com/nicerobot/nicerobot.github.io/blob/master/nicerobot-explainer-webcodecs.md.
• Richardson, I.E.G. (2010). The H.264 Advanced Video Compantion Standard (edisi ke-2). Wiley.
• Vaxi, A. mp4-muxer — JavaScript MP4 muxer for WebCodecs. github.com/nicerobot/nicerobot.github.io.
• Spesifikasi WebCodecs API. w3c.github.io/webcodecs/.

---

Ekspor video MP4 secara gratis — tanpa server, tanpa tanda tangan, tanpa watermark. (/editor) dan cobalah.