新闻详情

新闻详情

首页 / 资讯中心 / 详情

Mediabunny 入门:在浏览器中完成媒体文件读写、转换与处理的纯 TypeScript 工具箱

发布时间:2026/9/29 7:54:02来源:尧图网络
Mediabunny 入门:在浏览器中完成媒体文件读写、转换与处理的纯 TypeScript 工具箱
音视频视频处理音频处理【免费下载链接】mediabunnyPure TypeScript media toolkit for reading, writing, and converting video and audio files, directly in the browser.项目地址https://gitcode.com/gh_mirrors/me/mediabunny点击查看免费下载Mediabunny 是一个用纯 TypeScript 从零编写、零依赖、可树摇tree-shakable的 JavaScript 媒体工具库让浏览器可以直接读取、写入和转换 MP4、WebM、MP3、HLS 等媒体文件。它被定位为面向 Web 的 FFmpeg涵盖了元数据解析、压缩、转封装、转码、流式 I/O 等完整能力适合文件转换、缩略图提取、视频编辑器、直播录制等场景。读完本文你将理解 Mediabunny 的整体能力边界、核心架构与源码组织方式并知道该从哪些指南深入掌握它的读写与转换 API。项目定位为 Web 而生的媒体工具包Mediabunny 是一个 JavaScript 库用于直接在浏览器中读取、写入和转换媒体文件如 MP4 或 WebM。它旨在成为 Web 上高性能媒体操作的完整工具箱代码从零开始、以纯 TypeScript 编写、零运行时依赖并且极具树摇友好性——你只引入实际使用的部分项目文档与 README 均明确说明了这一点。从实现上看它的核心是一组容器格式的复用器muxer与解复用器demuxer每种容器格式各有一套读写实现分别位于仓库的 src/isobmff、src/matroska、src/mp3、src/wave、src/ogg、src/adts、src/flac、src/mpeg-ts、src/hls 等目录中。库的主入口 src/index.ts 统一导出了Input、Output、Conversion、各种输入/输出格式、Source/Target、媒体 Sink、编解码查询工具与自定义编码器注册接口。可以把它理解为像 FFmpeg 一样的工具但它是为 Web 的需求从零构建的不依赖本地二进制、不依赖服务端转码全部能力都在浏览器沙箱内以 JavaScript/WebCodecs 完成。核心特性总览项目文档列出了一份相当全面的能力清单这里按主题归类并补充对应的源码佐证格式与编解码读取媒体文件元数据、提取媒体数据、创建新媒体文件、转换媒体文件读写多种容器格式.mp4、.mov、.webm、.mkv、.mp3、.wav、.ogg、.aac、.flac、.ts以及各种变体Fast Start MP4、fragmented MP4fMP4、可流式 Matroska、透明 WebM 等读写 HLS点播与直播支持 25 种以上的视频、音频与字幕编解码器详见 supported-formats-and-codecs包括avc、hevc、vp8、vp9、av1、prores、aac、opus、mp3、vorbis、flac、ac3、eac3、dts及全套 PCM 编解码器微秒级精度的读取与写入性能与 I/O硬件加速编解码基于 WebCodecs API懒加载、优化的按需文件读取只在请求数据时读取必要字节输入输出流式化支持任意大小文件文件位置无关内存、磁盘、网络等均可作为数据来源管道化设计高效利用硬件并自动处理背压backpressure高效的时间轴 seek处理与元数据压缩、缩放、旋转、裁剪、重采样、裁剪trim等工具元数据标签读写标题、作者、封面图、自定义标签、附带文件等转封装transmuxing与转码transcoding多视频/音频/字幕轨道支持自定义编码器与解码器注册用于 polyfill抽象层次面向不同使用场景的低层与高层抽象服务端支持Node、Bun、Deno通过mediabunny/server扩展包实现这些能力在源码中有清晰的对应物解码相关工具集中在 src/decode.ts编码相关含Quality与编解码能力探测集中在 src/encode.ts自定义编解码器协议定义在 src/custom-coder.ts媒体数据读取的 Sink 体系位于 src/media-sink.ts写入侧的媒体源体系位于 src/media-source.ts。典型使用场景Mediabunny 是一个通用工具包理论上可以用于无限多种组合方式。官方文档列举了以下典型场景文件转换与压缩在浏览器内把任意输入格式转成目标格式并按需压缩见 converting-media-files展示文件元数据时长、分辨率、旋转、帧率等见 reading-media-files提取缩略图从视频轨道中按时间戳抽取缩略图见 media-sinks 中的CanvasSink在浏览器中创建视频程序化生成视频文件如把 Canvas 内容编码成 MP4/WebM构建视频编辑器基于精细的时间控制与多轨道能力直播录制与推流结合MediaRecorder、MediaStream轨道源与流式 Target 实现通过 Web Audio API 做大文件的采样级精确播放例如用AudioBufferSink以 Web Audio 播放音频片段仓库的 examples 目录提供了这些场景的可运行实现包括media-player、thumbnail-generation、procedural-generation、live-recording、file-compression、hls-transcoding、metadata-extraction等示例可以在浏览器中直接体验对应的 API 用法。快速上手安装与起点安装方式与系统要求见 installation 与 READMEnpm install mediabunny也可以使用 yarn、pnpm 或 bun 安装。需要能够运行 ECMAScript 2021 或更高版本的 JavaScript 环境预期在现代浏览器中运行TypeScript 类型需要 5.7 及以上版本。此外还支持以script srcmediabunny.cjs方式直接引入会暴露全局Mediabunny对象。拿到库之后官方文档给出的入门路径是Quick start一整套常用代码片段合集——读取元数据、读取媒体数据、提取缩略图、提取编码包、创建新文件、写磁盘、网络流式上传、直播录制、透明视频、编解码能力探测、文件转换、音频提取、压缩、叠加水印、多文件合并、读取 HLS 播放列表Reading media files以Input为中心的全部读取操作Writing media files以Output为中心的全部写入操作Converting media files以Conversion为中心的文件转换Packets samples深入理解EncodedPacket、VideoSample、AudioSample与 WebCodecs 的对应关系服务端使用mediabunny/serverMediabunny 的 API 简单而灵活是传统服务端媒体处理管线通常需要手动调用 FFmpeg CLI的现代替代方案。库主要为客户端环境构建但当与mediabunny/server扩展包见 extensions/server结合时完整的 Mediabunny 功能集即可在 Node、Bun、Deno 等服务端环境中使用。该扩展包提供的能力包括视频解码与编码AVCH.264、HEVCH.265、VP8、VP9、AV1同时支持 length-prefixed 与 Annex B 两种 AVC/HEVC 封装以及通过 VP9 实现透明视频音频解码与编码AAC、MP3、Vorbis、Opus、FLAC、AC-3、E-AC-3、DTSAAC 同时支持 AAC 与 ADTS 两种格式视频帧变换缩放、旋转、裁剪全平台自动硬件加速macOS、Linux、Windows内置多线程零拷贝解码与编码路径仓库中 packages/server 目录即该扩展包的实现含audio-decoder.ts、video-decoder.ts、audio-encoder.ts、video-encoder.ts等源码。除此之外仓库还提供了若干官方扩展包用于补齐浏览器 WebCodecs 不覆盖的编解码能力packages/aac-encoder某些浏览器 WebCodecs 不支持 AAC 编码时的 polyfillpackages/mp3-encoderWebCodecs 完全不支持 MP3 编码用此包 polyfillpackages/flac-encoderFLAC 编码 polyfillpackages/ac3 与 packages/dtsAC-3/E-AC-3 与 DTS 的原生编解码WebCodecs 不原生支持packages/proresProRes 解码支持ProRes 不在 WebCodecs 规范内这些扩展的用途、适用前提与必须遵守的实现规则在 supported-formats-and-codecs 的Custom coders一节中有详细说明。设计动机从 mp4-muxer / webm-muxer 的演进Mediabunny 是作者此前两个库 mp4-muxer 与 webm-muxer 的进化版两者都诞生于 WebCodecs API 出现之际。原库虽然完成了本职工作但存在几个痛点两个库之间有大量重复代码API 又极其相似没有帮助开发者应对 WebCodecs API 及相关浏览器 API 的复杂细节mp4-demuxer 什么时候有——缺乏读取侧的完整能力。Mediabunny 正是把这两个库统一为一个、解决上述问题并大幅扩展范围的产物切换输出文件格式只需改一行代码其余 API 完全一致在 WebCodecs API 之上提供了大量抽象简化了使用mp4 的 demuxer读取侧从诞生起就内置。得益于树摇如果你只需要一个 MP4 或 WebM muxer这个库的打包体积依然可以非常小README 提到最小可到 5 kB gzipped。如果你正在从 mp4-muxer 或 webm-muxer 迁移项目文档建议参考各自的官方迁移指南。技术架构解析从架构上看Mediabunny 的核心是一组复用器与解复用器——每种容器格式各有一对。解复用器demuxer从source数据源流式读取数据复用器muxer把数据流式写入target数据目标。每个解复用器都能提取文件元数据以及压缩后的媒体数据而复用器则把元数据与编码后的媒体数据写入新文件。在此基础上Mediabunny 围绕 WebCodecs API 提供了几层包装来简化使用读取侧为轨道创建携带正确 codec 配置的解码器并以管道化方式高效解码媒体数据。从媒体文件中提取正确的解码器配置可能相当棘手有时需要深入到编码包packet的 bitstream 内部——这正是InputTrack.getDecoderConfig()等 API 的职责所在。写入侧推算出必要的编码器配置建立编码器用它们编码原始媒体数据同时尊重编码器施加的背压。转换侧Conversion抽象建立在读写原语之上把两者以重度管道化的方式结合起来确保读写以锁步lockstep方式齐头并进。它还包含大量条件逻辑探测输出轨道兼容性、判断解码支持、寻找可编码的编解码配置视频处理利用 Canvas API音频重采样与上/下混音则使用自定义实现与 Web Audio API 相同的算法。数据流概念Source 与 Target在读写两侧位置无关性是关键设计。读取侧src/source.ts提供了多种输入源BlobSource浏览器中读取磁盘文件、BufferSource内存、UrlSource网络带智能预取与重试、FilePathSource服务端文件路径、ReadableStreamSource增量流式输入、CustomSource任意自定义读取以及用于 HLS 等多文件格式的PathedSource/CustomPathedSource。写入侧src/target.ts提供了对应目标BufferTarget内存、StreamTarget流式写出兼容 File System API、AppendOnlyStreamTarget纯追加写用于网络上传等场景、FilePathTarget服务端写文件、NullTarget丢弃数据、PathedTargetHLS 等多文件输出。编解码能力探测由于 WebCodecs 的编解码可用性取决于浏览器Mediabunny 提供了专门的工具函数来查询当前环境到底能编码/解码哪些编解码器src/decode.ts、src/encode.tscanDecode/canEncode、getDecodableCodecs/getEncodableCodecs、getFirstEncodableVideoCodec等。这些检查会把注册的自定义编解码器一并纳入考虑是构建健壮转换流程的重要前置手段。概念模型Packet 与 Sample媒体数据在 Mediabunny 中以两种形态存在Packet编码后的媒体数据与Sample原始、未压缩、可直接呈现的媒体数据。EncodedPacket同时用于视频与音频包VideoSample表示单帧视频AudioSample表示一段通常很短的音频。它们与 WebCodecs 概念一一对应EncodedVideoChunk/EncodedAudioChunk/VideoFrame/AudioData且提供toEncodedVideoChunk()、toAudioBuffer()、draw()等便捷方法。细节见 packets-and-samples。从源码与测试进一步深入如果你希望深入源码层面理解上述架构仓库提供了完整证据链核心类src/input.tsInput、src/output.tsOutput、src/conversion.tsConversion容器实现src/isobmffMP4/MOV/CMAF、src/matroskaMKV/WebM、src/mp3、src/wave、src/ogg、src/adtsAAC、src/flac、src/mpeg-ts、src/hls编解码与媒体数据src/decode.ts、src/encode.ts、src/sample.ts、src/packet.ts、src/media-sink.ts、src/resample.ts音频重采样测试验证test/browser 与 test/node 目录覆盖了各容器读写、转码、HLS、透明视频、编码器扩展、server 扩展等行为的自动化测试结合官方指南你可以按需选择深挖的方向读操作从 reading-media-files 开始写操作从 writing-media-files 开始转换从 converting-media-files 开始底层概念则进入 packets-and-samples 与 supported-formats-and-codecs。赞分享音视频视频处理音频处理【免费下载链接】mediabunnyPure TypeScript media toolkit for reading, writing, and converting video and audio files, directly in the browser.项目地址https://gitcode.com/gh_mirrors/me/mediabunny点击查看免费下载相关推荐Mediabunny 使用指南在浏览器中读写与转换音视频的纯 TypeScript 媒体工具包Mediabunny 使用指南在浏览器中读写与转换音视频的纯 TypeScript 媒体工具包 导读 Mediabunny 是一个从零实现、零依赖、面向浏览音视频视频处理音频处理Mediabunny 全览在浏览器中直接读写与转换音视频的 TypeScript 媒体工具包Mediabunny 全览在浏览器中直接读写与转换音视频的 TypeScript 媒体工具包 Mediabunny 是一个纯 TypeScript 实现、零运音视频视频处理音频处理Mediabunny 媒体转换指南在浏览器中完成转封装、转码、裁剪与压缩Mediabunny 媒体转换指南在浏览器中完成转封装、转码、裁剪与压缩 Mediabunny 是一套纯 TypeScript 编写的媒体工具库可让浏览器直音视频视频处理音频处理上一篇QKeyMapper跨设备控制革命 为游戏玩家与效率工作者打造的即时映射解决方案下一篇鸣潮工具箱3步解决游戏卡顿让帧率提升60%的终极指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

Claude Code + Deepseek 安装与配置指南:TaoToken 统一 Key 接入 settings.json 骨架 2026/9/29 8:52:24

Claude Code + Deepseek 安装与配置指南:TaoToken 统一 Key 接入 settings.json 骨架

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
8篇2章3节:VS Code 插件安装与管理——用 TaoToken 统一 Key 打通 AI 编程插件配置 2026/9/29 8:52:24

8篇2章3节:VS Code 插件安装与管理——用 TaoToken 统一 Key 打通 AI 编程插件配置

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
重磅!用 TaoToken 统一 Key 接入 Gemini 1.5 Pro:1000万上下文与 GSM8K 评测第一的配置实战 2026/9/29 8:52:24

重磅!用 TaoToken 统一 Key 接入 Gemini 1.5 Pro:1000万上下文与 GSM8K 评测第一的配置实战

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
FMEA资产化落地指南:从失效模式分析到质量知识库的复用 2026/9/29 8:52:15

FMEA资产化落地指南:从失效模式分析到质量知识库的复用

做质量这行久了,你会发现一个特别拧巴的现象:很多公司的FMEA做完就“封箱”了。项目评审时费劲巴拉凑出来的失效模式分析,过了客户审核、拿到PPAP批准,就把文件往共享盘一扔,从此再没人翻开。下次新产品、新项目启动&a…

阅读更多 →
Handy 离线语音转文字:3 步跑通,开口说话文字直接出现,音频不出电脑 2026/9/29 8:52:15

Handy 离线语音转文字:3 步跑通,开口说话文字直接出现,音频不出电脑

Handy 离线语音转文字:3 步跑通,开口说话文字直接出现,音频不出电脑 【免费下载链接】Handy A free, open source, and extensible speech-to-text application that works completely offline. 项目地址: https://gitcode.com/GitHub_Tren…

阅读更多 →
深度评测:OpenClaw 与实在Agent 接入 TaoToken 统一 API 通道,谁才是业务自动化终点站? 2026/9/29 8:52:15

深度评测:OpenClaw 与实在Agent 接入 TaoToken 统一 API 通道,谁才是业务自动化终点站?

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉