Mediabunny：ブラウザ向け動画・オーディオの JavaScript ツールキット
はじめに
Mediabunny は 純粋な TypeScript 製メディアツールキットで、ブラウザや Node.js で強力な動画・音声処理機能を提供します。軽量でウェブ志向の FFmpeg 代替と考えてください：MP4、MOV、WebM、MKV、HLS、WAV、MP3、OGG、FLAC、ADTS、MPEG‑TS といった幅広いコンテナフォーマットの読み書き・変換が可能で、WebCodecs API を通じて 25 種類以上のコーデックをサポートします。ランタイム依存がゼロ で、ツリーシェイカブル なので、実際に使用するコードだけを配布できます—圧縮時は 5 KB 未満になることもあります。
主な機能
- 幅広いフォーマットサポート – MP4、MOV、WebM、MKV、HLS、WAV、MP3、OGG、FLAC、ADTS、MPEG‑TS。
- 組み込みエンコード/デコード – 25 種類以上の動画・音声・字幕コーデックをサポートし、可能な限りハードウェアアクセラレーションを利用します。
- マイクロ秒単位の精度 – トリミング、クロッピング、フレームレベルの編集などで正確な読み書きを実現します。
- 変換 API –
Conversionクラスを使ってトランスムックス、トランスコーディング、リサイズ、回転などを簡単に行えます。 - ストリーミング I/O – 任意のサイズのファイルに対してメモリ効率の高いストリーミングが可能です。
- ツリーシェイカブルかつ依存関係ゼロ – バンドルサイズが最小限に抑えられ、最新のウェブアプリに最適です。
- クロスプラットフォーム – ブラウザと 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();
// add frames …
await output.finalize();
const mp4Buffer = output.target.buffer; // ready to download or stream
フォーマット間の変換
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 Public License 2.0 (MPL‑2.0) の下でリリースされている、許容的な弱いコピーレフトライセンスです。ソースコードへの変更を同じライセンスで公開すれば、商用やクローズドソースのプロジェクトでも利用できます。
Mediabunny を選ぶ理由
重いネイティブバイナリを導入せずに クライアント側でのメディア操作 が必要な場合、Mediabunny はブラウザのネイティブコーデックを活用した最新の TypeScript ファースト API を提供します。小さなフットプリント、ストリーミング志向の設計、豊富なフォーマットサポートにより、ウェブベースの動画エディタ、ストリーミングプラットフォーム、オーディオツールに最適です。
はじめに
- npm でパッケージをインストールします。
- ドキュメントの Getting Started ガイドを確認します。
- 提供されているサンプルを試してみます。
- ライブラリを活用している場合は、貢献やスポンサーになることを検討してください。
Mediabunny を使えば、強力なメディアワークフローをブラウザ上で直接実現できます。