浏览器端音视频处理新选择：Mediabunny 让 Web 媒体开发飞起来

在 Web 开发中，音视频处理一直是个“老大难”问题：传统方案要么依赖后端服务器中转（延迟高、成本高），要么使用移植自桌面的库（体积大、性能差），始终缺乏一个“为 Web 而生”的轻量高效解决方案。而今天要介绍的 Mediabunny，正是填补这一空白的 JavaScript 库——它能直接在浏览器中实现音视频的读取、写入、转换，且速度和易用性都远超同类工具。

一、什么是 Mediabunny？

Mediabunny 是一个专注于 浏览器端音视频全流程处理 的 JavaScript 库，核心定位是“为 Web 原生设计，而非移植适配”。它基于 TypeScript 开发，提供了从底层控制到高层封装的完整 API，让开发者既能精细操作媒体数据，又无需处理复杂的编解码细节。

简单说，它解决了三个核心痛点：

1. 无需后端依赖：所有处理都在客户端完成，减少网络请求和服务器成本；
2. 性能拉满：利用浏览器 WebCodecs API 实现硬件加速，配合“按需加载”“流水线设计”，速度远超同类库；
3. 轻量且灵活：零依赖、支持树摇优化（只打包用到的功能），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 等主流库，以下是关键场景的对比数据：

性能优势的核心原因：

• 按需加载：只读取必要数据，避免冗余处理；
• 硬件加速：借助 WebCodecs API 调用 GPU 编解码；
• 流水线设计：读写、编解码并行处理，减少等待时间。

五、为什么选择 Mediabunny？核心优势总结

1. 专为 Web 设计，而非移植：零依赖、TypeScript 原生，API 符合 Web 开发习惯，树摇优化后体积极小（全功能仅 69.6KB，远小于 ffmpeg.wasm 的几 MB）；
2. 性能天花板：硬件加速 + 高效设计，解决浏览器端媒体处理“卡慢”问题；
3. 易用性平衡：既有高层封装（如 Conversion 一键转换），又支持底层控制（如逐帧处理），满足从快速开发到定制化需求；
4. 开源免费：基于 MPL-2.0 协议，可用于商业闭源项目，无license 顾虑。

六、局限性

• 浏览器兼容性取决于WebCodecs API的支持程度
• 复杂处理可能受限于客户端设备性能
• 目前可能还不支持一些专业级媒体处理功能

七、应用场景展望

Mediabunny 适合所有需要在浏览器中处理音视频的场景：

• Web 音视频编辑器（如在线剪片、加滤镜）；
• 实时媒体处理（如摄像头直播前的美颜、分辨率调整）；
• 离线媒体工具（如本地文件格式转换、元数据提取）；
• 教育/医疗场景（如视频标注、音频分析）。

结语

Mediabunny 的出现，终于让 Web 开发者拥有了一个“原生、高效、易用”的音视频处理工具，无需再依赖后端或笨重的移植库。作为开源项目，它的发展离不开社区贡献，如果你在使用中遇到问题或有功能需求，可前往其 GitHub 仓库（需自行搜索，官网未直接提供链接）参与讨论。

如果你正在开发 Web 音视频相关项目，不妨试试 Mediabunny——它可能会让你的开发效率和产品性能都提升一个档次！