浏览器端音视频处理新选择：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——它可能会让你的开发效率和产品性能都提升一个档次！
