Building a Better Export: Why We Chose MediaBunny

When building Kinetix, our “dream feature” was always client-side MP4 export. Users expect to download a video file that works everywhere—on their phone, in Premiere Pro, and on social media.

For years, the web has struggled with this. We were stuck with:

1. WebM: Great for the web, supported by browsers natively, but unsupported by iPhone and some editors.
2. Server-Side Rendering: Slow, expensive, and requires uploading private data.
3. FFmpeg.wasm: Powerful but heavy (20MB+), slow to load, and often slower to encode.

Enter MediaBunny.

What is MediaBunny?

MediaBunny is a modern JavaScript library for reading, writing, and converting audio and video files directly in the browser.

Unlike other solutions, it’s:

• Blazing Fast: It uses the browser’s native WebCodecs API, which gives us near-native encoding speeds (often hardware accelerated).
• Lightweight: It has zero dependencies and is built from scratch for the web.
• Format Rich: It supports writing MP4, MOV, WebM, and even MKV.

How We Use It in Kinetix

We built a Dual-Engine Export System to give users the best of both worlds.

1. The “Efficient” Engine (WebM)

For quick previews and Discord sharing, we use webm-muxer. It’s lightweight and instant, perfect for checking your animation loop.

2. The “Universal” Engine (MediaBunny)

When you’re ready to publish, we switch to MediaBunny. This unlocks:

• H.264 (MP4): Compatible with everything.
• ProRes / MOV: High-quality export for professional editors.

Implementing it with Workers

To ensure the UI never freezes while encoding 4K video, we run MediaBunny inside a dedicated Web Worker.

Here’s a snippet of how simple it is to set up an encoder with MediaBunny:

import { Output, Mp4OutputFormat, VideoSampleSource } from 'mediabunny';

// 1. Create an Output (the file container)
const output = new Output({
    target: new BufferTarget(), // Write to memory
    format: new Mp4OutputFormat()
});

// 2. Create a Source (the video track)
const source = new VideoSampleSource({
    width: 1920,
    height: 1080,
    frameRate: 60,
    codec: 'avc' // H.264
});

// 3. Add frames!
await output.addVideoTrack(source);
await output.start();
// ... add samples ...
await output.finalize();

Why Open Source Matters

MediaBunny is open source, which means we can inspect the code, understand exactly how our bits are being written, and even contribute back. It’s built by developers who care about the “Web Creative” ecosystem.

If you’re building a video app on the web, stop fighting with FFmpeg builds and give MediaBunny a try. It’s the missing piece of the modern web media stack.