ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

Mediabunny 使用指南:在浏览器中读写与转换音视频的纯 TypeScript 媒体工具包

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 是一个从零实现、零依赖、面向浏览器的 JavaScript 媒体工具库支持 MP4、MOV、WebM、MKV、HLS、WAVE、MP3、Ogg、ADTS、FLAC、MPEG-TS 等多种容器的读取与写入并基于 WebCodecs API 提供 25 编解码器的硬件加速编解码能力。本文以官方 README 为主线结合仓库源码与配套文档完整讲解它的安装方式、三大核心用法读取元数据、创建媒体文件、文件转换、质量与码率控制原理、MPL-2.0 许可边界以及本地开发流程读完即可在真实项目中落地使用。Mediabunny 是什么Mediabunny 是一个用于读取reading、写入writing和转换converting媒体文件的 JavaScript 库可以在浏览器中直接处理 MP4、WebM、MP3、HLS 等格式。官方将其定位为面向 Web 场景的完整高性能媒体工具包它用纯 TypeScript 从零实现零依赖性能出色并且极度支持 tree-shaking——按需打包最小仅约 5 kBgzip。可以把它理解为一个为 Web 而生的 FFmpeg。核心特性包括详见 docs/guide/introduction.md广泛的格式支持可读且可写 MP4、MOV、WebM、MKV、HLS、WAVE、MP3、Ogg、ADTS、FLAC、MPEG-TS含 Fast Start MP4、fragmented MP4、可流式 Matroska、透明 WebM 等变体以及 HLS 的 VOD 与直播内置编解码能力通过 WebCodecs API 支持 25 视频、音频、字幕编解码器并享受硬件加速高精度微秒级的精确读写操作转换 API内置易用的转换抽象支持 transmuxing换封装不换编码、transcoding转码、缩放、旋转、裁剪、重采样、裁剪时间区间等流式 I/O基于流的内存高效读写支持任意大小的文件跨平台除浏览器外还可在 Node、Bun、Deno 中通过 mediabunny/server 扩展 使用完整功能可 tree-shaking只用什么就打什么零依赖全部用高性能 TypeScript 实现。快速开始安装与运行环境通过 npm 安装npm install mediabunny也可以从发布包中直接使用 script 标签引入预构建产物这种方式会暴露一个全局Mediabunny对象script srcmediabunny.cjs/script运行环境要求任何能运行 ECMAScript 2021 及以后版本的 JavaScript 环境Mediabunny 面向现代浏览器如需 TypeScript 类型则要求 TypeScript 5.7 及以上仓库当前开发依赖为 TypeScript 5.9见 package.json。库本身以 ESM 为主同时提供 CJS 构建dist/bundles/mediabunny.cjs与mediabunny.node.cjsNode 环境专用见 package.json 的exports字段。读取文件元数据Input是所有读取操作的起点它代表一个或多个文件组成的输入媒体。创建Input时需指定数据源source与候选格式列表formats。官方 README 的最小示例import { Input, ALL_FORMATS, BlobSource } from mediabunny; // Reading from disk const input new Input({ source: new BlobSource(file), formats: ALL_FORMATS, }); const duration await input.computeDuration(); // in seconds const videoTrack await input.getPrimaryVideoTrack(); const audioTrack await input.getPrimaryAudioTrack(); const displayWidth await videoTrack.getDisplayWidth(); const displayHeight await videoTrack.getDisplayHeight(); const rotation await videoTrack.getRotation(); const sampleRate await audioTrack.getSampleRate(); const numberOfChannels await audioTrack.getNumberOfChannels(); const { title, artist, album } await input.getMetadataTags();从源码src/input.ts可以看到这些方法的底层行为new Input(options)只做参数校验与登记不会立即执行任何读取操作真正的 I/O 发生在你调用具体方法之后——这是惰性、按需读取设计的体现computeDuration()返回所有轨道中最大的结束时间戳单位秒它会遍历全部轨道以给出最精确的时长因此对轨道很多的输入如 HLS manifest可能较耗时追求速度可用getDurationFromMetadata()换取精度getPrimaryVideoTrack()/getPrimaryAudioTrack()并非简单地取第一条轨道而是综合文件内位置、disposition、码率越高越优先、能否与音频/视频轨道配对等因素排序后取最优见 src/input.ts 的getPrimaryVideoTrack实现source不只支持BlobSource文件/Blob还支持BufferSource、FilePathSource、UrlSource、ReadableStreamSource、CustomSource等甚至可用slice(offset, length)读取嵌在大文件内部的媒体见 src/source.ts 与 docs/guide/reading-media-files.md。更丰富的元数据读取示例估算帧率、读取封面图、自定义标签等见 docs/guide/quick-start.md配套可直接运行的示例位于 examples/metadata-extraction。创建新媒体文件Output代表将要写出的新媒体文件。创建时指定输出格式format与写入目标target。README 示例展示了用 canvas 作为视频源直接生成 MP4import { Output, Mp4OutputFormat, BufferTarget, CanvasSource, Quality } from mediabunny; const output new Output({ format: new Mp4OutputFormat(), target: new BufferTarget(), // Writing to memory }); // Add a video track backed by a canvas element const videoSource new CanvasSource(canvas, { codec: avc, bitrate: new Quality(high), }); output.addVideoTrack(videoSource); await output.start(); // Add frames... await output.finalize(); const buffer output.target.buffer; // Final MP4 file几点实战要点target决定文件写到哪里BufferTarget写入内存最终通过output.target.buffer取回ArrayBufferStreamTarget可配合 File System Access API 直接写磁盘{ chunked: true }可批量磁盘操作AppendOnlyStreamTarget可把输出流式推给网络请求配合fetch的body直接上传自动处理慢网速带来的背压backpressure输出格式必须是append-only才能流式写入例如new Mp4OutputFormat({ fastStart: fragmented })。从源码看src/output-format.tsfastStart支持false | in-memory | reserve | fragmented四种取值fragmented通过生成 fMP4 把元数据放到文件开头in-memory/reserve则是不同策略的内存缓冲方式媒体源非常多样除CanvasSource外还有AudioBufferSource喂AudioBuffer、MediaStreamVideoTrackSource/MediaStreamAudioTrackSource接摄像头/麦克风、VideoSampleSource、EncodedPacketSource等见 src/media-source.ts 与 docs/guide/media-sources.md。例如用MediaStream轨道 WebMOutputFormat VP9/Opus 就能实现比MediaRecorder更可控的直播录制支持透明视频WebM/Matroska 容器下用codec: vp9配合alpha: keep即可编码带透明通道的视频每条轨道可附带元数据languageCode、name、disposition、maximumPacketCount、bitrate等并可调用output.setMetadataTags({ title, artist, ... })写入标签见 src/output.ts。完整的创建文件示例含音轨、元数据、逐帧加帧见 docs/guide/quick-start.md 的Create new media files一节浏览器端程序化生成视频的演示位于 examples/procedural-generation。转换文件Conversion是构建在读写原语之上的高级抽象也是 README 中最短平快的用例——把一个文件转成另一种格式只需三行核心代码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(), // Convert to WebM target: new BufferTarget(), }); const conversion await Conversion.init({ input, output }); await conversion.execute();转换 API 的能力远不止换格式完整文档见 docs/guide/converting-media-files.mdtransmuxing换封装、复制媒体数据与transcoding改编码自动决策默认copy模式为preferred——能直接复制编码数据就复制快且无损不能复制就转码同时尽量保持精确时间戳可配置mode: forced强制复制不能复制的轨道将被丢弃也可copy: false完全禁用复制音视频处理video选项支持width/height/fitfill | contain | cover、rotate0/90/180/270、flip、crop、frameRate、keyFrameInterval、alpha、process自定义逐帧处理如叠加水印、灰度滤镜等audio选项支持numberOfChannels混音/分音、sampleRate重采样、sampleFormat、process等裁剪与压缩trim: { start, end }截取区间tracks: primary只保留主音视频轨结合width、quality可一键压缩文件Track 级细粒度控制video/audio可传函数按每个轨道分别返回配置也可传数组实现fan-out从一个输入轨道生成多个输出轨道如同时产出 1080p/720p/480p 多档 HLS 码流组合composable转换composable: true后转换只负责往Output里加自己的轨道并泵送数据start()/finalize()/元数据等生命周期由你掌控从而可以把多个输入文件甚至外部手动写入的轨道合并进同一个输出执行控制execute({ until, pauseSignal })支持部分执行推进到某个时间戳暂停、再续跑与基于AbortSignal的暂停cancel()可彻底取消onProgress回调可监控 01 的进度isValid与discardedTracks在init()后即可检查哪些轨道被丢弃及原因如undecodable_source_codec、no_encodable_target_codec等HLS 直播转换trim: { start: currentDuration, end: currentDuration 60 }可只捕获直播流接下来 60 秒的内容。这些选项在源码中都有完整实现与严格校验见 src/conversion.ts 的validateVideoOptions/validateAudioOptions例如同时设置width与height时必须提供fitrotate只能是 0/90/180/270。配套示例包括 examples/file-compression、examples/hls-transcoding、examples/live-recording。深入源码架构与实现原理解复用器 复用器 WebCodecs 抽象从 README 的 Implementation 章节与 docs/guide/introduction.md 的 Technical overview 可知Mediabunny 的核心是每种容器格式一对的解复用器demultiplexer与复用器multiplexer解复用器从Source流式读取数据提取文件元数据与压缩媒体数据复用器把元数据与编码后的媒体数据写进新文件Target在两者之上Mediabunny 封装了 WebCodecs API读取时按正确 codec 配置创建解码器并流水线化解码写入时推导编码配置、按编码器背压高效编码。仓库中每种格式的实现在src/下按目录组织isobmff/MP4/MOV/CMAF、matroska/WebM/MKV、mpeg-ts/、hls/、adts/、flac/、mp3/、ogg/、wave/等所有公开 API 从 src/index.ts 统一导出。逻辑大量采用流水线与惰性求值设计以保持高性能与低内存占用。质量与码率控制Quality 类README 的示例中出现了new Quality(high)。源码中的 Quality 类src/encode.ts的Quality支持三种表达方式new Quality(high) // 定性档位 new Quality({ quality: 0.75 }) // 0~1 数值档位 new Quality({ bitrate: 3_000_000 }) // 显式码率bps new Quality({ quantizer: 23 }) // 显式量化参数类似 FFmpeg 的 CRF其中定性档位在内部映射为very-low: 0, low: 0.25, medium: 0.5, high: 0.75, very-high: 1对于支持量化编码的视频编解码器AVC/HEVC/VP9/AV1定性档位会优先映射为量化参数编码恒定质量量化范围分别为 AVC/HEVC 0–51、VP9 0–63、AV1 0–255音频码率则基于各编解码器的基准码率如 AAC 128 kbps、Opus 64 kbps、MP3 160 kbps乘以质量系数推导见src/encode.ts的qualityToBitrateFactor与_toAudioBitrate。因此Quality的选择会直接影响输出文件大小与画质——压缩视频时用new Quality(low)追求画质用high或very-high。支持的格式与编解码器输入格式InputFormatADTS、FLAC、HLS、MatroskaMKV/WebM、MP3、MP4、MPEG-TS、Ogg、QuickTimeMOV、Wave可通过ALL_FORMATS一次全部启用见 src/input-format.ts 与 docs/guide/input-formats.md输出格式OutputFormatMP4/MOVIsobmffOutputFormat、WebM、MKV、HLS、CMAF、MPEG-TS、WAV、MP3、Ogg、ADTS、FLAC见 src/output-format.ts 与 docs/guide/output-formats.md编解码器注册表每种编解码器的完整说明见 docs/codec-registry如 AVC、HEVC、VP9、AV1、AAC、Opus、MP3、FLAC 等。服务端支持mediabunny/server扩展packages/server让完整 Mediabunny 功能可运行于 Node、Bun、Deno提供 AVC/HEVC/VP8/VP9/AV1 视频编解码与 AAC/MP3/Vorbis/Opus/FLAC/AC-3/E-AC-3/DTS 音频编解码支持帧变换、跨平台自动硬件加速、内置多线程与零拷贝编解码路径。详细指南见 docs/guide/extensions/server.md。许可证与使用边界Mediabunny 采用Mozilla Public License 2.0MPL-2.0完整文本见 LICENSE这是一种非常宽松的弱 copyleft 许可证与 MIT 差异不大允许用于任何商业或非商业目的且无需支付版税用于开源与闭源项目自由分发基于它构建的项目检查与修改其源代码义务如果你修改了 Mediabunny 的受许可源码例如 fork并对外分发必须以 MPL-2.0 公开你的修改——这保证了库本身的使用是宽松的同时任何改进都留在开源社区禁止从任何源文件中移除许可证与版权头声称持有 Mediabunny 商标与任何库一样Mediabunny不提供任何形式的担保对直接或间接损失不承担责任。本地开发与构建README 列出了完整的开发流程仓库使用 TypeScript、esbuild、API Extractor、Vite、VitePress 构建npm install # 安装依赖 npm run watch # 监听模式构建 bundle npm run build # 生产构建含类型定义 npm run check # 类型检查 npm run lint # ESLint npm run docs:generate # 生成 API 文档 npm run docs:dev # 启动文档开发服务器 npm run dev # 启动示例开发服务器访问 http://localhost:5173/examples/[name]/ npm run docs:build # 构建文档与示例测试方面仓库在test/browser/与test/node/两个目录下提供了覆盖各格式读写、编解码、转换、HLS、元数据、采样等场景的 Vitest 用例例如test/browser/mpeg-ts-muxing.test.ts、test/node/hls-input.test.ts、test/node/read-wav.test.ts等npm test会先执行scripts/bundle.ts预构建再运行全部用例可作为理解各功能正确行为与边界情况的补充参考。进一步阅读官方文档与示例都包含在本仓库中可直接继续深入安装与快速上手、快速开始代码合集读取媒体文件、写入媒体文件、转换媒体文件媒体源、媒体汇sinks、数据包与采样支持的格式与编解码器、读取 HLS、写入 HLS可运行示例examples/media-player、examples/thumbnail-generation、examples/metadata-extraction、examples/hls-transcoding、examples/live-recording赞分享音视频视频处理音频处理【免费下载链接】mediabunnyPure TypeScript media toolkit for reading, writing, and converting video and audio files, directly in the browser.项目地址https://gitcode.com/gh_mirrors/me/mediabunny点击查看免费下载相关推荐AEUX连接故障深度解析与高效修复方案AEUX连接故障深度解析与高效修复方案 AEUX是一款专业的跨平台设计工具连接插件能够将Sketch、Figma等设计工具中的图层无缝传输到After Eff音视频视频处理音频处理Mediabunny 快速上手浏览器内音视频读写、转换与生成完整实战指南Mediabunny 快速上手浏览器内音视频读写、转换与生成完整实战指南 Mediabunny 是一款纯 TypeScript 实现的媒体工具库可在浏览器中音视频视频处理音频处理Wasp SEO 与 GEO 优化指南面向搜索引擎与 AI 爬虫的完整实践Wasp SEO 与 GEO 优化指南面向搜索引擎与 AI 爬虫的完整实践 在 Wasp 全栈框架中让你的应用同时被传统搜索引擎SEO和 AI 助手G音视频视频处理音频处理上一篇PDFiumViewer终极指南5分钟快速上手开源PDF查看器下一篇WSLg终极指南在Windows上无缝运行Linux图形应用的完整教程创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表