Skip to main content

Command Palette

Search for a command to run...

Mediabunny - Mediatoolkit for Modern Web

Updated
3 min read
Mediabunny - Mediatoolkit for Modern Web

In today's fast-paced digital world, rich media—video and audio—is everywhere. From social media feeds to educational platforms, e-commerce, and entertainment, the ability to effectively handle media files directly within the browser has become not just a luxury, but a necessity for building truly dynamic and responsive web applications.

Mediabunny, a brand-new, open-source JavaScript library designed to be a complete toolkit for high-performance media operations on the web.

Why Mediabunny? The Need for In-Browser Media Power

For years, developers have relied on server-side solutions like FFmpeg for robust media processing tasks such as converting, encoding, and manipulating video and audio files. While incredibly powerful, these solutions often introduce latency, increase server load, and can be complex to integrate.

Mediabunny changes this paradigm. It's vision was to create a "FFmpeg for the web" – a pure TypeScript library built from scratch, optimized for browser environments, and leveraging modern web APIs like WebCodecs to unlock unparalleled speed and efficiency.

The goal is simple: empower developers to perform complex media operations directly in the user's browser, faster than anybunny else!

Key Features that Set Mediabunny apart

  1. Mediabunny isn't just another media library it's a comprehensive suite of tools engineered for precision and performance

  2. Wide Format Support: Handle a vast array of media types with ease. Mediabunny can read and write popular formats including MP4, MOV, WebM, MKV, WAVE, MP3, Ogg, ADTS, and FLAC.

  3. Built-in Encoding & Decoding: Forget server roundtrips. Mediabunny supports over 25 video, audio, and subtitle codecs, leveraging the browser's native hardware acceleration through the WebCodecs API for lightning-fast processing.

  4. High Precision Operations: Need microsecond-accurate trimming or frame extraction? Mediabunny provides fine-grained control for all reading and writing operations.

  5. Powerful Conversion API: Easy-to-use API offers a wealth of features including

  • Transmuxing & Transcoding: Change container formats or codecs efficiently.

  • Resizing & Cropping: Adjust video dimensions and focus.

  • Rotation: Correct video orientation.

  • Resampling: Modify audio sample rates.

  • Trimming: Cut video and audio segments with precision.

Other Features

  1. Streaming I/O: Memory efficiency is crucial for large files. Mediabunny handles reading and writing files of virtually any size using memory-efficient streaming, preventing browser slowdowns.

  2. Extremely Tree-shakable: Mediabunny is designed so you only include the features you actually use, leading to incredibly small final bundle sizes (as small as 5 kB gzipped!).

  3. Zero Dependencies: To ensure maximum performance and minimal overhead, Mediabunny is implemented entirely in highly performant TypeScript, with absolutely zero external dependencies.

  4. Cross-Platform Compatibility: Whether you're building for web browsers or backend Node.js applications, Mediabunny works seamlessly across both environments.

Installation

Install it via npm using the following command

  npm install mediabunny

Alternatively, include it directly with a script tag using one of the builds. Doing so exposes a global Mediabunny object.

  <script src="mediabunny.cjs"></script>

Convert files

Will see a sample code on how we can convert a file

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(), // Convert to WebM
    target: new BufferTarget(),
});

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

Open Source and Community-Driven

Mediabunny is an open-source project released under the MPL-2.0 license. This means it's completely free to use for any purpose, including closed-source commercial applications.

With Mediabunny, developers can now build richer, more interactive, and performant web applications that handle media files like never before. Imagine in-browser video editors, audio transcoders, or advanced media analysis tools – all running client-side, delivering an instantaneous user experience.

Know more about Mediabunny

More from this blog

Nidhin's blog

168 posts

✨Crafting Code with a Smile for 8 Years:) Merging the Formal Dance of Angular, the Playful Rhythms of React, and the Next-level Moves of Next.js 🚀