Mediabunny: Kit de herramientas JavaScript para video y audio en el navegador

Introducción

Mediabunny es un kit de herramientas multimedia pure TypeScript que lleva potentes capacidades de procesamiento de video y audio al navegador y a Node.js. Piénsalo como una alternativa ligera y centrada en la web a FFmpeg: puede leer, escribir y convertir una amplia gama de formatos contenedor (MP4, MOV, WebM, MKV, HLS, WAV, MP3, OGG, FLAC, ADTS, MPEG‑TS) y soporta más de 25 códecs a través de la API WebCodecs. Debido a que tiene cero dependencias en tiempo de ejecución y es altamente tree‑shakable, solo envías el código que realmente utilizas, a menudo menos de 5 KB comprimido con gzip.

Características clave

• Amplio soporte de formatos – MP4, MOV, WebM, MKV, HLS, WAV, MP3, OGG, FLAC, ADTS, MPEG‑TS.
• Codificación/decodificación incorporada – más de 25 códecs de video, audio y subtítulos, acelerados por hardware cuando sea posible.
• Precisión de microsegundos – Lectura/escritura precisa para recorte, recorte de video y edición a nivel de fotograma.
• API de conversión – Clase Conversion simple para transmuxing, transcodificación, redimensionado, rotación y más.
• E/S de streaming – Streaming eficiente en memoria para archivos de cualquier tamaño.
• Tree‑shakable y sin dependencias – Tamaño de paquete mínimo, ideal para aplicaciones web modernas.
• Multiplataforma – Funciona en navegadores y entornos Node.js.

Instalación

npm install mediabunny

O incluye un bundle preconstruido mediante una etiqueta <script>:

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

La biblioteca requiere ECMAScript 2021+ y TypeScript 5.7+ para las definiciones de tipos.

Ejemplos de uso rápido

Lectura de metadatos

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

Creación de un nuevo archivo 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

Conversión entre formatos

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

Documentación y comunidad

• Documentación completa – https://mediabunny.dev/docs
• Ejemplos – Ejecuta npm run dev para explorar demostraciones en vivo.
• Discord – Únete al chat de la comunidad para soporte y solicitudes de funciones.
• Patrocinio – El proyecto está financiado por patrocinadores como Remotion, Gling AI y Diffusion Studio. Las contribuciones ayudan a mantener el desarrollo.

Licencia

Mediabunny se publica bajo la Mozilla Public License 2.0 (MPL‑2.0), una licencia permisiva de copyleft débil. Puedes usar la biblioteca en proyectos comerciales o de código cerrado, siempre que cualquier modificación al código fuente se publique bajo la misma licencia.

¿Por qué elegir Mediabunny?

Si necesitas manipulación de medios del lado del cliente sin incorporar binarios nativos pesados, Mediabunny ofrece una API moderna, centrada en TypeScript, que aprovecha los códecs nativos del navegador. Su pequeña huella, diseño orientado al streaming y amplio soporte de formatos lo hacen ideal para editores de video basados en la web, plataformas de streaming y herramientas de audio.

Primeros pasos

1. Instala el paquete mediante npm.
2. Revisa la guía de Primeros pasos en la documentación.
3. Experimenta con los ejemplos proporcionados.
4. Contribuye o patrocina si te beneficias de la biblioteca.

Con Mediabunny, los flujos de trabajo de medios potentes ahora son posibles directamente en el navegador.