Mediabunny 是一个用于在浏览器中直接读取、写入和转换媒体文件(如 MP4 或 WebM)的 JavaScript 库。它旨在成为 Web 上进行高性能媒体操作的完整工具包。它完全使用纯 TypeScript 从头编写,零依赖,并且极其支持树摇(tree-shakable),意味着你只需引入你所使用的部分。你可以将其视为类似于 FFmpeg 的工具,但专为 Web 需求而构建。

功能 ​

以下是该库能够完成的大量任务:

  • 从媒体文件中读取元数据
  • 从媒体文件中提取媒体数据
  • 创建新的媒体文件
  • 转换媒体文件
  • 通过 WebCodecs API 实现硬件加速的解码与编码
  • 支持多个视频、音频和字幕轨道
  • 支持多种容器格式的读写(.mp4, .mov, .webm, .mkv, .mp3, .wav, .ogg, .aac, .flac, .ts),包括变体格式,如 Fast Start 模式的 MP4、分片 MP4、可流式传输的 Matroska、透明 WebM 等
  • 支持 HLS 的读写,包括点播(VOD)和直播
  • 支持 25 种不同的编解码器
  • 延迟、优化且按需的文件读取
  • 输入和输出流式处理,支持任意文件大小
  • 文件位置无关性(内存、磁盘、网络等)
  • 提供压缩、调整大小、旋转、裁剪、重采样、修剪等实用工具
  • 元数据标签的读写(标题、艺术家、封面艺术、自定义标签、附加文件等)
  • 复用(Transmuxing)和转码(Transcoding)
  • 微秒级的读写精度
  • 高效的基于时间的搜索(Seeking)
  • 流水线设计以实现高效的硬件利用和自动背压(Backpressure)
  • 支持自定义编码器与解码器以进行 Polyfill
  • 为不同用例提供低层和高层抽象
  • 性能卓越
  • 通过 @mediabunny/server 支持服务器端环境(Node, Bun, Deno)

……可能还有更多。

应用场景 ​

Mediabunny 是一个通用工具包,可以以无限多种方式使用。但这里列举了一些思路:

  • 文件转换与压缩
  • 显示文件元数据(时长、尺寸等)
  • 提取缩略图
  • 在浏览器中创建视频
  • 构建视频编辑器
  • 实时录制与流媒体传输
  • 通过 Web Audio API 高效、样本精确地播放大文件

查看 示例 页面,了解许多这些想法的实现演示!

入门指南 ​

要开始使用 Mediabunny,以下是一些起点:

服务器端使用 ​

Mediabunny 简单而灵活的 API 提供了一种现代替代方案,可用于传统的服务器端媒体处理流程(后者可能需要手动调用 FFmpeg 的 CLI)。Mediabunny 主要面向客户端环境构建,但当与 @mediabunny/server 扩展结合使用时,完整的 Mediabunny 功能集可在 Node、Bun 和 Deno 等服务器端环境中使用。

该扩展启用了以下功能:

  • AVC (H.264)、HEVC (H.265)、VP8、VP9 和 AV1 的视频解码器和编码器。支持长度前缀和 Annex B 格式的 AVC/HEVC,以及通过 VP9 实现的透明视频。
  • AAC、MP3、Vorbis、Opus、FLAC、AC-3、E-AC-3 和 DTS 的音频解码器和编码器。支持 AAC 的 AAC 和 ADTS 两种格式。
  • 视频帧变换支持(调整大小、旋转、裁剪)
  • 所有平台(macOS、Linux、Windows)上的自动硬件加速
  • 内置多线程
  • 零拷贝解码和编码路径

更多信息,请参阅 相应的指南。

动机 ​

Mediabunny 是我之前开发的库 mp4-muxer 和 webm-muxer 的进化版,这两者均因 WebCodecs API 的出现而创建。虽然它们完成了各自的任务,但我发现了一些痛点:

  • 两个库之间存在大量重复代码,否则 API 非常相似。
  • 缺乏对导航 WebCodecs API 及相关浏览器 API 困难点的帮助。
  • "mp4-demuxer 什么时候出??”

本库是将这些库统一为一个的结果,解决了上述所有问题,并扩大了范围。现在:

  • 更改输出文件格式只需一行代码;其余 API 保持不变。
  • 在 WebCodecs API 和浏览器 API 之上提供了大量抽象。
  • mp4-demuxer 现已可用。

得益于树摇机制,如果您只需要 MP4 或 WebM 复用器,本库的打包体积仍然非常小。

迁移指南 ​

如果您来自 mp4-muxer 或 webm-muxer,您应该迁移到 Mediabunny。为此,请参考以下指南:

技术概览 ​

核心上,Mediabunny 是一组复用器和解复用器的集合,每种容器格式各有一个。解复用器从源流式传输数据,而复用器将数据流式传输到目标。每个解复用器都能提取文件元数据以及压缩的媒体数据,而复用器则将元数据和编码后的媒体数据写入新文件。

Mediabunny 随后围绕 WebCodecs API 提供了多个封装层以简化使用:在读取方面,它创建具有正确编解码器配置的解码器,并以流水线方式高效地解码媒体数据。在写入方面,它确定所需的编解码器配置并设置编码器,用于对原始媒体数据进行编码,同时尊重编码器施加的反压。从媒体文件中提取正确的解码器配置可能很棘手,有时需要深入分析编码媒体数据包的比特流。

转换抽象构建在 Mediabunny 的读写原语之上,并将两者以高度流水线的方式结合,确保读取和写入同步进行。它还包含大量条件逻辑,用于探测输出轨道兼容性、解码支持,并寻找可编码的编解码器配置。它利用 Canvas API 进行视频处理操作,并使用自定义实现进行音频重采样和上下混音。