Mediabunny: JavaScript Toolkit for Browser Video & Audio

Introduction

Mediabunny is a pure TypeScript media toolkit that brings powerful video and audio processing capabilities to the browser and Node.js. Think of it as a lightweight, web‑focused alternative to FFmpeg: it can read, write, and convert a wide range of container formats (MP4, MOV, WebM, MKV, HLS, WAV, MP3, OGG, FLAC, ADTS, MPEG‑TS) and supports more than 25 codecs via the WebCodecs API. Because it has zero runtime dependencies and is highly tree‑shakable, you only ship the code you actually use – often under 5 KB gzipped.

Key Features

• Broad format support – MP4, MOV, WebM, MKV, HLS, WAV, MP3, OGG, FLAC, ADTS, MPEG‑TS.
• Built‑in encoding/decoding – 25+ video, audio, and subtitle codecs, hardware‑accelerated where possible.
• Microsecond precision – Accurate reading/writing for trimming, cropping, and frame‑level editing.
• Conversion API – Simple Conversion class for transmuxing, transcoding, resizing, rotation, and more.
• Streaming I/O – Memory‑efficient streaming for files of any size.
• Tree‑shakable & zero dependencies – Minimal bundle size, ideal for modern web apps.
• Cross‑platform – Works in browsers and Node.js environments.

Installation

npm install mediabunny

Or include a pre‑built bundle via a <script> tag:

<script src="https://cdn.jsdelivr.net/npm/mediabunny/dist/mediabunny.cjs"></script>

The library requires ECMAScript 2021+ and TypeScript 5.7+ for type definitions.

Quick Usage Examples

Reading Metadata

import { Input, ALL_FORMATS, BlobSource } from 'mediabunny';

const input = new Input({
  source: new BlobSource(file),
  formats: ALL_FORMATS,
});

const duration = await input.computeDuration();
const videoTrack = await input.getPrimaryVideoTrack();
const audioTrack = await input.getPrimaryAudioTrack();

const { title, artist, album } = await input.getMetadataTags();

Creating a New MP4 File

import { Output, Mp4OutputFormat, BufferTarget, CanvasSource, QUALITY_HIGH } from 'mediabunny';

const output = new Output({
  format: new Mp4OutputFormat(),
  target: new BufferTarget(),
});

const videoSource = new CanvasSource(canvas, { codec: 'avc', bitrate: QUALITY_HIGH });
output.addVideoTrack(videoSource);
await output.start();
// add frames …
await output.finalize();

const mp4Buffer = output.target.buffer; // ready to download or stream

Converting Between Formats

import { Input, Output, Conversion, ALL_FORMATS, BlobSource, WebMOutputFormat } from 'mediabunny';

const input = new Input({ source: new BlobSource(file), formats: ALL_FORMATS });
const output = new Output({ format: new WebMOutputFormat(), target: new BufferTarget() });

const conversion = await Conversion.init({ input, output });
await conversion.execute();

Documentation & Community

• Full docs – https://mediabunny.dev/docs
• Examples – Run npm run dev to explore live demos.
• Discord – Join the community chat for support and feature requests.
• Sponsorship – The project is funded by sponsors like Remotion, Gling AI, and Diffusion Studio. Contributions help sustain development.

License

Mediabunny is released under the Mozilla Public License 2.0 (MPL‑2.0), a permissive weak‑copyleft license. You can use the library in commercial or closed‑source projects, provided any modifications to the source are published under the same license.

Why Choose Mediabunny?

If you need client‑side media manipulation without pulling in heavy native binaries, Mediabunny offers a modern, TypeScript‑first API that leverages the browser’s native codecs. Its small footprint, streaming‑oriented design, and extensive format support make it ideal for web‑based video editors, streaming platforms, and audio tools.

Getting Started

1. Install the package via npm.
2. Review the Getting Started guide in the docs.
3. Experiment with the provided examples.
4. Contribute or sponsor if you benefit from the library.

With Mediabunny, powerful media workflows are now possible directly in the browser.