Skip to content

Mediabunny全能媒体工具包

一个直接在浏览器中读写和转换音视频文件的JavaScript库,速度比任何其他工具都快。

Mediabunny标志

JS生态系统中构建Web优先媒体应用缺失的一环。

作者头像

Yonatan, Gling AI

Mediabunny提供了底层控制与高层易用性的完美结合。它快速、轻量,终于让人感觉这是为Web原生打造的媒体处理方案,而非简单移植。

作者头像

Konstantin, Diffusion Studio

bash
npm install mediabunny

高效读取任意媒体文件

Mediabunny允许您高效地从任何视频或音频文件中读取数据,无论文件大小:时长、分辨率、旋转角度、轨道、编解码器和其他元数据,以及文件中任意位置的原始或解码后的媒体数据。只加载您需要的内容。

文档
ts
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()) {
	// ...
}
ts
const output = new Output({
	format: new Mp4OutputFormat(), // .mp4
	target: new BufferTarget(), // in memory
});

// Add video, driven by a canvas
const videoSource = new CanvasSource(canvas, {
	codec: 'av1',
	bitrate: QUALITY_HIGH,
});
output.addVideoTrack(videoSource);

// Add audio, driven by audio buffers
const audioSource = new AudioBufferSource({
	codec: 'opus',
	bitrate: QUALITY_HIGH,
});
output.addAudioTrack(audioSource);

await output.start();

// Add media data here...

await output.finalize();
const { buffer } = output.target; // Contains the final file

以编程方式创建新媒体文件

直接在客户端生成新的媒体文件(如MP4或WebM),速度可达硬件允许的极限。添加多个视频、音频或字幕轨道,并精确控制到微秒级别。

文档

超高速文件转换

使用转换API将任何媒体文件转换为其他格式:执行转封装、转码、调整大小、旋转、音频重采样、裁剪等操作。

文档
ts
const input = new Input({
	source: new BlobSource(file), // Read from disk
	formats: ALL_FORMATS,
});
const output = new Output({
	format: new WebMOutputFormat(), // Convert to .webm
	target: new StreamTarget(writableStream), // Write to disk
});

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

// Done!

通用I/O

从内存、磁盘或网络读写文件。创建用于离线的文件,或在创建时实时流式传输。从画布、摄像头、屏幕、麦克风、音频缓冲区、您自己的编码堆栈或任何来源注入媒体数据。一切由您掌控。

广泛的容器和编解码器支持

Mediabunny支持多种常用容器格式和广泛的视频音频编解码器。而且所有这些都支持双向操作!(即读取和写入)

查看完整列表

提取元数据

Mediabunny

862 操作/秒

@remotion/media-parser

233 操作/秒

web-demuxer

80.6 操作/秒

mp4box.js

43.5 操作/秒

ffmpeg.wasm

1.83 操作/秒

遍历所有视频数据包

Mediabunny

10800 数据包/秒

web-demuxer

2390 数据包/秒

@remotion/media-parser

842 数据包/秒

转换为.webm并调整至320x180

Mediabunny

804 帧/秒

@remotion/webcodecs

324 帧/秒

ffmpeg.wasm

12.0 帧/秒

从磁盘读取BigBuckBunny1080pH264.mov (691 MiB)
Ryzen 7600X, RTX 4070, NVMe SSD, 测试于2025-06-22

高性能

通过仅读取您需要的内容、渐进式写入、利用WebCodecs API的硬件加速编解码,以及采用流水线设计,Mediabunny能够快速完成任务。

为Web从零打造

Mediabunny 完全用 TypeScript 实现,零依赖。其 API 设计具有高度的 tree-shaking 特性,意味着你只需引入你使用的部分。

打包体积,压缩后

读取.wav文件

5.10 kB

写入.wav文件

5.79 kB

写入.webm文件

11.4 kB

读取.webm文件

15.2 kB

读取.mp4文件

16.0 kB

写入.mp4文件

17.3 kB

读取所有格式

30.0 kB

mp4box.js

37.3 kB

全部功能

69.6 kB

@remotion/webcodecs

108 kB

ffmpeg.wasm

测量于 2025-06-22

...以及更多!

查看完整功能列表

因你而成就

Mediabunny 是一个基于 MPL-2.0 许可的开源项目,可以免费用于任何目的,包括闭源商业用途。对于像这样的基础库来说,宽松的许可证至关重要。这个项目需要大量的工作和投入,这一切都得益于这些赞助者的慷慨支持:

金牌赞助商

铜牌赞助商

个人赞助商

还有你

Released under the Mozilla Public License 2.0.