AI Hub Icon
AIBit 发现开源项目
首页 / 实用开源项目

Mediabunny：浏览器视频与音频的JavaScript工具包

May 08, 2026
分类: 实用开源项目
标签:
Open Source javascript Video Processing Browser media toolkit

简介

Mediabunny是一个纯TypeScript媒体工具包，为浏览器和Node.js带来了强大的视频和音频处理能力。可以将其视为轻量级、专注于Web的FFmpeg替代品：它能够读取、写入和转换多种容器格式（MP4、MOV、WebM、MKV、HLS、WAV、MP3、OGG、FLAC、ADTS、MPEG-TS），并通过WebCodecs API支持超过25种编解码器。由于它零运行时依赖且高度可摇树优化，您只需打包实际使用的代码——通常压缩后小于5KB。

主要特性

  • 广泛的格式支持 – MP4、MOV、WebM、MKV、HLS、WAV、MP3、OGG、FLAC、ADTS、MPEG-TS。
  • 内置编码/解码 – 25+种视频、音频和字幕编解码器，尽可能硬件加速。
  • 微秒级精度 – 精确的读取/写入，用于修剪、裁剪和帧级编辑。
  • 转换API – 简单的Conversion类，用于转封装、转码、调整大小、旋转等。
  • 流式输入/输出 – 内存高效的流式处理，适用于任意大小的文件。
  • 可摇树优化且零依赖 – 最小的包体积，适合现代Web应用。
  • 跨平台 – 在浏览器和Node.js环境中均可运行。

安装

npm install mediabunny

或通过<script>标签包含预构建的包：

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

该库需要ECMAScript 2021+和TypeScript 5.7+以获取类型定义。

快速使用示例

读取元数据

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();

创建新的MP4文件

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();
// 添加帧 …
await output.finalize();

const mp4Buffer = output.target.buffer; // 准备下载或流式传输

格式间转换

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();

文档与社区

  • 完整文档 – https://mediabunny.dev/docs
  • 示例 – 运行npm run dev以探索实时演示。
  • Discord – 加入社区聊天以获取支持和功能请求。
  • 赞助 – 该项目由Remotion、Gling AI和Diffusion Studio等赞助商资助。贡献有助于持续开发。

许可证

Mediabunny根据Mozilla公共许可证2.0（MPL‑2.0）发布，这是一个宽松的弱版权许可证。您可以在商业或闭源项目中使用该库，前提是对源代码的任何修改均以相同许可证发布。

为什么选择Mediabunny？

如果您需要客户端媒体处理而无需引入沉重的原生二进制文件，Mediabunny提供了一个现代、TypeScript优先的API，利用浏览器的原生编解码器。其小巧的体积、面向流的设计和广泛的格式支持，使其成为基于Web的视频编辑器、流媒体平台和音频工具的理想选择。

快速开始

  1. 通过npm安装包。
  2. 查看文档中的快速开始指南。
  3. 尝试提供的示例。
  4. 如果您从该库中受益，请贡献或赞助。

借助Mediabunny，强大的媒体工作流程现在可以直接在浏览器中实现。

原始文章: 查看原文

分享这篇文章