Mediabunny, complete media toolkit.

In this article, we review Mediabunny. You will learn:

1. What is Mediabunny?
2. Mediabunny usage in Supersplat

What is Mediabunny?

Mediabunny is a JavaScript library for reading, writing, and converting video and audio files. Directly in the browser, and faster than anybunny else.

Read any media file

Mediabunny allows you efficiently read data from any video or audio file, no matter the size: duration, resolution, rotation, tracks, codecs and other metadata, as well as raw or decoded media data from anywhere in the file. Load only what you need.

const input = new Input({
  source: new UrlSource('./bigbuckbunny.mp4'),
  formats: ALL_FORMATS, // .mp4, .webm, .wav, ...
});
 
const duration = await input.computeDuration();
 
const videoTrack = await input.getPrimaryVideoTrack();
const { displayWidth, displayHeight, rotation } = videoTrack;
 
const audioTrack = await input.getPrimaryAudioTrack();
const { sampleRate, numberOfChannels } = audioTrack;
 
// Get the frame halfway through the video
const sink = new VideoSampleSink(videoTrack);
const frame = await sink.getSample(duration / 2);
 
// Loop over all frames of the video
for await (const frame of sink.samples()) {
  // ...
}

Learn more about Mediabunny.

Mediabunny usage in supersplat.

I found Mediabunny being imported in supersplat/src/render.ts.

import { 
  BufferTarget, 
  EncodedPacket, 
  EncodedVideoPacketSource, 
  MkvOutputFormat, 
  MovOutputFormat, 
  Mp4OutputFormat, 
  Output, 
  StreamTarget, 
  WebMOutputFormat 
} from 'mediabunny';

You might be wondering what Supersplat is. Well, remember how I pick a trending repo every week and share the patterns and packages used? Yeah, Superslat is listed as one of the trending repos.

Superslat is a 3D Gaussian Splat Editor.

superslat/render.ts has registerRenderEvents defined for the following events:

• render.video
• render.image
• render.offscreen

About me:

Hey, my name is ramunarasinga. Email: ramunarasinga@gmail.com

Tired of AI slop?

I spent 3+ years studying OSS codebases and wrote 350+ articles on what makes them production-grade. I built an open source tool that reviews your PR against your existing codebase patterns..

Your codebase. Your patterns. Enforced.

Get started for free — thinkthroo.com.

References:

1. mediabunny.dev/.

2. webdev/comments/1m2ivfg/i_built_mediabunny_a_zerodependency_typescript/.

3. superspl.at/editor.

4. playcanvas/supersplat/blob/main/src/render.ts#L1C1-L2C1.