Introducing Mediabunny: A Web-Native, Zero-Dependency TypeScript Library for Media Processing in the Browser

In the evolving landscape of web development, handling media files directly within the browser has long been a complex challenge. Traditional solutions like FFmpeg, while powerful, rely on native binaries or WebAssembly modules that can be bulky and less performant. Addressing this gap, I am excited to introduce Mediabunny — a lightweight, comprehensive, and web-native media processing library built entirely in TypeScript.

Background and Motivation

My journey began with developing JavaScript libraries such as mp4-muxer and webm-muxer, which leveraged the WebCodecs API to facilitate in-browser video creation. These tools, while effective, received numerous feature requests prompting the development of a unified solution. As a result, I designed Mediabunny to serve as a versatile platform for reading, writing, and converting various media formats directly in the browser environment.

What is Mediabunny?

Mediabunny is an all-in-one media manipulation library that simplifies complex tasks including demuxing, muxing, decoding, encoding, resizing, rotation, resampling, transcoding, and compression. Imagine a version of FFmpeg optimized for the web — but without dependencies or external binaries. It supports popular formats such as WebM, MP4, MP3, Ogg, and WAVE, allowing developers to perform intricate media operations without leaving the browser.

Key Features and Capabilities

• Format Support: Read and create WebM, MP4, MP3, Ogg, and WAVE files.

• Media Processing: Demuxing, muxing, decoding, encoding, resizing, rotation, and resampling.

• Performance: Engineered for high speed, enabling real-time transcoding at up to ten times playback speed.

• WebCodecs Wrappers: Provides simplified interfaces around the WebCodecs API, facilitating easier encoding and decoding workflows.

• Browser Compatibility: Includes utilities to query and adapt to various browser support levels.

• Lightweight & Zero Dependencies: At only around 60 kB in final bundle size, Mediabunny maintains excellent performance while avoiding external dependencies or large WebAssembly modules.

Development and Use Cases

Mediabunny emerged from my work supporting web-based video editing projects, where it powers the media pipeline — handling playback without traditional <video> elements for a snappy, flicker-free experience, and enabling export functionalities that run at blazing speeds.