瀏覽器端音視頻處理新選擇：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——它可能會讓你的開發效率和產品性能都提升一個檔次！