Mediabunny : Boîte à outils JavaScript pour la vidéo et l'audio dans le navigateur

Introduction

Mediabunny est une boîte à outils multimédia pure TypeScript qui apporte des capacités de traitement vidéo et audio puissantes au navigateur et à Node.js. Considérez‑la comme une alternative légère et orientée web à FFmpeg : elle peut lire, écrire et convertir une large gamme de formats de conteneurs (MP4, MOV, WebM, MKV, HLS, WAV, MP3, OGG, FLAC, ADTS, MPEG‑TS) et prend en charge plus de 25 codecs via l'API WebCodecs. Parce qu'elle a zéro dépendance à l'exécution et est hautement tree‑shakable, vous n'envoyez que le code que vous utilisez réellement – souvent moins de 5 KB compressés.

Fonctionnalités principales

• Large support de formats – MP4, MOV, WebM, MKV, HLS, WAV, MP3, OGG, FLAC, ADTS, MPEG‑TS.
• Encodage/décodage intégré – 25+ codecs vidéo, audio et sous‑titres, accélérés matériellement quand c'est possible.
• Précision à la microseconde – Lecture/écriture précise pour le rognage, le recadrage et l'édition au niveau de l'image.
• API de conversion – Classe Conversion simple pour le transmuxage, le transcodage, le redimensionnement, la rotation, et plus.
• E/S en streaming – Streaming efficace en mémoire pour des fichiers de toute taille.
• Tree‑shakable & zéro dépendance – Taille de bundle minimale, idéale pour les applications web modernes.
• Multi‑plateforme – Fonctionne dans les navigateurs et les environnements Node.js.

Installation

npm install mediabunny

Ou incluez un bundle pré‑construit via une balise <script> :

<script src="https://cdn.jsdelivr.net/npm/mediabunny/dist/mediabunny.cjs"></script>

La bibliothèque nécessite ECMAScript 2021+ et TypeScript 5.7+ pour les définitions de types.

Exemples d'utilisation rapide

Lecture des métadonnées

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();

Création d'un nouveau fichier 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();
// ajouter des images …
await output.finalize();

const mp4Buffer = output.target.buffer; // prêt à être téléchargé ou streamé

Conversion entre formats

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();

Documentation & Communauté

• Documentation complète – https://mediabunny.dev/docs
• Exemples – Exécutez npm run dev pour explorer les démos en direct.
• Discord – Rejoignez le chat communautaire pour le support et les demandes de fonctionnalités.
• Sponsorisation – Le projet est financé par des sponsors comme Remotion, Gling AI et Diffusion Studio. Les contributions aident à soutenir le développement.

Licence

Mediabunny est publié sous la Mozilla Public License 2.0 (MPL‑2.0), une licence permissive à copyleft faible. Vous pouvez utiliser la bibliothèque dans des projets commerciaux ou propriétaires, à condition que toute modification du code source soit publiée sous la même licence.

Pourquoi choisir Mediabunny ?

Si vous avez besoin de manipulation multimédia côté client sans importer de lourds binaires natifs, Mediabunny offre une API moderne, d'abord TypeScript, qui exploite les codecs natifs du navigateur. Son empreinte réduite, sa conception orientée streaming et son support étendu des formats en font un choix idéal pour les éditeurs vidéo web, les plateformes de streaming et les outils audio.

Pour commencer

1. Installez le package via npm.
2. Consultez le guide Pour commencer dans la documentation.
3. Expérimentez avec les exemples fournis.
4. Contribuez ou sponsorisez si vous bénéficiez de la bibliothèque.

Avec Mediabunny, des flux de travail multimédias puissants sont désormais possibles directement dans le navigateur.