浏览器端音视频处理新选择：Mediabunny 让 Web 媒体开发飞起来 | 葡萄城技术团队
浏览器端音视频处理新选择：Mediabunny 让 Web 媒体开发飞起来
在 Web 开发中，音视频处理一直是个“老大难”问题：传统方案要么依赖后端服务器中转（延迟高、成本高），要么使用移植自桌面的库（体积大、性能差），始终缺乏一个“为 Web 而生”的轻量高效解决方案。而今天要介绍的 Mediabunny，正是填补这一空白的 JavaScript 库——它能直接在浏览器中实现音视频的读取、写入、转换，且速度和易用性都远超同类工具。
一、什么是 Mediabunny？
Mediabunny 是一个专注于 浏览器端音视频全流程处理 的 JavaScript 库，核心定位是“为 Web 原生设计，而非移植适配”。它基于 TypeScript 开发，提供了从底层控制到高层封装的完整 API，让开发者既能精细操作媒体数据，又无需处理复杂的编解码细节。
简单说，它解决了三个核心痛点：
- 无需后端依赖：所有处理都在客户端完成，减少网络请求和服务器成本；
- 性能拉满：利用浏览器
WebCodecs API实现硬件加速，配合“按需加载”“流水线设计”，速度远超同类库； - 轻量且灵活：零依赖、支持树摇优化（只打包用到的功能），bundle 体积最小仅 5KB 级。
二、Mediabunny 核心特性：不止于“能用”，更在于“好用”
Mediabunny 的功能覆盖了 Web 音视频开发的全场景，以下是最值得关注的五大特性：
1. 高效读写：只加载你需要的数据
传统库读取音视频时往往会加载整个文件，而 Mediabunny 支持“按需提取”——无论是元数据（时长、分辨率、编码格式）还是原始帧数据，都能精准读取，避免不必要的性能浪费。
支持的读取源：网络 URL、本地文件（Blob）、内存缓冲区，覆盖绝大多数场景。
2. 可编程生成：动态创建音视频文件
你可以直接在浏览器中生成 MP4、WebM 等格式的媒体文件，支持添加多轨道（视频、音频、字幕），且时间精度可控制到微秒级。比如从 Canvas 捕获动画、从音频缓冲区生成音效，都能直接封装成文件。
3. 闪电转换：一站式处理格式/尺寸/编码
通过 Conversion API 可实现“格式转换+编辑”一体化：转码（如 MP4 转 WebM）、裁剪、缩放、旋转、音频重采样等操作一步完成，无需拼接多个工具。
4. 通用 I/O：灵活对接各种媒体源
Mediabunny 几乎支持所有 Web 媒体输入输出场景：
- 输入：Canvas、摄像头、屏幕共享、麦克风、自定义编码数据；
- 输出：内存缓存、本地文件下载、流式传输（边生成边推送）。
5. 广泛兼容：覆盖主流容器与编解码器
无论是常见的 MP4、WebM、MP3、WAV，还是较新的 AV1 编码、H.265，Mediabunny 都支持“双向处理”（既能读又能写）。完整兼容列表包括：
- 容器：.mp4、.webm、.mov、.mkv、.ogg、.wav 等；
- 视频编码：H.264/AVC、H.265/HEVC、VP8、VP9、AV1；
- 音频编码：AAC、MP3、Opus、Vorbis、FLAC、PCM；
- 字幕：WebVTT。
三、上手实战：3 段代码看懂 Mediabunny 用法
Mediabunny 的 API 设计非常直观，以下三个示例覆盖“读-写-转”核心场景，复制即可运行（需先安装依赖）。
前置步骤：安装 Mediabunny
npm install mediabunny
示例 1：读取音视频元数据与帧数据
比如读取一个 MP4 文件的时长、分辨率，并提取中间帧：
import { Input, UrlSource, VideoSampleSink, ALL_FORMATS } from 'mediabunny';
// 1. 初始化输入（支持 URL、Blob 等源）
const input = new Input({
source: new UrlSource('./bigbuckbunny.mp4'), // 视频文件路径
formats: ALL_FORMATS, // 支持所有格式
});
// 2. 获取元数据
const duration = await input.computeDuration(); // 视频时长（秒）
const videoTrack = await input.getPrimaryVideoTrack();
const { displayWidth: width, displayHeight: height, rotation } = videoTrack; // 分辨率、旋转角度
const audioTrack = await input.getPrimaryAudioTrack();
const { sampleRate: sampleRate, numberOfChannels: channels } = audioTrack; // 采样率、声道数
console.log(`视频：${width}x${height}，时长：${duration}s；音频：${sampleRate}Hz，${channels}声道`);
// 3. 提取中间帧
const sink = new VideoSampleSink(videoTrack);
const middleFrame = await sink.getSample(duration / 2); // 获取中间位置的帧
// 可将 frame 绘制到 Canvas 或转为 Blob 下载
// 4. 遍历所有帧（适合批量处理）
for await (const frame of sink.samples()) {
// 处理每一针（如帧分析、滤镜效果）
}
示例 2：从 Canvas 生成 MP4 文件
将 Canvas 动画捕获并生成 MP4 视频：
import { Output, Mp4OutputFormat, BufferTarget, CanvasSource, QUALITY_HIGH } from 'mediabunny';
// 1. 初始化输出（格式：MP4，目标：内存缓冲区）
const output = new Output({
format: new Mp4OutputFormat(),
target: new BufferTarget(),
});
// 2. 添加视频轨道（从 Canvas 捕获）
const canvas = document.getElementById('my-canvas'); // 你的 Canvas 元素
const videoSource = new CanvasSource(canvas, {
codec: 'av1', // 使用 AV1 编码（高效压缩）
bitrate: QUALITY_HIGH, // 高画质
});
output.addVideoTrack(videoSource);
// 3. 添加音频轨道（从音频缓冲区生成）
const audioSource = new AudioBufferSource({
codec: 'opus', // Opus 音频编码
bitrate: QUALITY_HIGH,
});
output.addAudioTrack(audioSource);
// 4. 开始生成并写入数据
await output.start();
// （可选）向 audioSource 推送音频数据
// audioSource.push(audioBuffer);
// 5. 完成生成，获取最终文件
await output.finalize();
const fileBlob = new Blob([output.target.buffer], { type: 'video/mp4' });
// 下载文件
const a = document.createElement('a');
a.href = URL.createObjectURL(fileBlob);
a.download = 'canvas-animation.mp4';
a.click();
示例 3：MP4 转 WebM 并缩放尺寸
将本地 MP4 文件转换为 WebM 格式，并缩放到 320x180：
import { Input, BlobSource, Output, WebMOutputFormat, StreamTarget, Conversion, ALL_FORMATS } from 'mediabunny';
// 1. 读取本地文件（通过 <input type="file"> 获取）
const fileInput = document.getElementById('file-input');
fileInput.addEventListener('change', async (e) => {
const file = (e.target as HTMLInputElement).files[0];
if (!file) return;
// 2. 初始化输入（本地文件）和输出（WebM 格式，流式写入）
const input = new Input({
source: new BlobSource(file),
formats: ALL_FORMATS,
});
const output = new Output({
format: new WebMOutputFormat({
width: 320, // 目标宽度
height: 180, // 目标高度
}),
target: new StreamTarget(createWritableStream()), // 流式输出到文件
});
// 3. 执行转换
const conversion = await Conversion.init({ input, output });
await conversion.execute();
alert('转换完成！');
});
// 辅助函数：创建可写流（用于下载）
function createWritableStream() {
const chunks = [];
return new WritableStream({
write(chunk) { chunks.push(chunk); },
close() {
const blob = new Blob(chunks, { type: 'video/webm' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'converted.webm';
a.click();
},
});
}
四、性能碾压：数据说话，Mediabunny 有多快？
Mediabunny 在官方测试中（环境：Ryzen 7600X + RTX 4070 + NVMe SSD），性能全面超越 ffmpeg.wasm、mp4box.js 等主流库，以下是关键场景的对比数据：
| 测试场景 | Mediabunny | 同类库性能（对比） |
|---|---|---|
| 提取元数据（ops/s） | 862 | 是 @remotion/media-parser（233）的 3.7 倍，ffmpeg.wasm（1.83）的 471 倍 |
| 迭代视频包（packets/s） | 10800 | 是 web-demuxer（2390）的 4.5 倍 |
| MP4 转 WebM + 缩放至 320x180（frames/s） | 804 | 是 @remotion/webcodecs（324）的 2.5 倍，ffmpeg.wasm（12）的 67 倍 |
性能优势的核心原因：
- 按需加载：只读取必要数据，避免冗余处理；
- 硬件加速：借助
WebCodecs API调用 GPU 编解码； - 流水线设计：读写、编解码并行处理，减少等待时间。
五、为什么选择 Mediabunny？核心优势总结
- 专为 Web 设计，而非移植：零依赖、TypeScript 原生，API 符合 Web 开发习惯，树摇优化后体积极小（全功能仅 69.6KB，远小于 ffmpeg.wasm 的几 MB）；
- 性能天花板：硬件加速 + 高效设计，解决浏览器端媒体处理“卡慢”问题；
- 易用性平衡：既有高层封装（如
Conversion一键转换），又支持底层控制（如逐帧处理），满足从快速开发到定制化需求； - 开源免费：基于 MPL-2.0 协议，可用于商业闭源项目，无license 顾虑。
六、局限性
- 浏览器兼容性取决于WebCodecs API的支持程度
- 复杂处理可能受限于客户端设备性能
- 目前可能还不支持一些专业级媒体处理功能
七、应用场景展望
Mediabunny 适合所有需要在浏览器中处理音视频的场景：
- Web 音视频编辑器（如在线剪片、加滤镜）；
- 实时媒体处理（如摄像头直播前的美颜、分辨率调整）；
- 离线媒体工具（如本地文件格式转换、元数据提取）；
- 教育/医疗场景（如视频标注、音频分析）。
结语
Mediabunny 的出现，终于让 Web 开发者拥有了一个“原生、高效、易用”的音视频处理工具，无需再依赖后端或笨重的移植库。作为开源项目，它的发展离不开社区贡献，如果你在使用中遇到问题或有功能需求，可前往其 GitHub 仓库（需自行搜索，官网未直接提供链接）参与讨论。
如果你正在开发 Web 音视频相关项目，不妨试试 Mediabunny——它可能会让你的开发效率和产品性能都提升一个档次！
