diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts index d993ca5..371e1ff 100644 --- a/docs/.vitepress/config.mts +++ b/docs/.vitepress/config.mts @@ -1,12 +1,18 @@ import { withMermaid } from 'vitepress-plugin-mermaid'; import footnote from 'markdown-it-footnote'; +import tailwindcss from '@tailwindcss/vite'; // https://vitepress.dev/reference/site-config export default withMermaid({ title: 'Mediabunny', description: 'A VitePress Site', cleanUrls: true, + head: [ + ['link', { rel: 'icon', href: '/mediabunny-logo.svg' }], + ], themeConfig: { + logo: '/mediabunny-logo.svg', + // https://vitepress.dev/reference/default-theme-config nav: [ { text: 'Guide', link: '/guide/introduction', activeMatch: '/guide' }, @@ -54,7 +60,7 @@ export default withMermaid({ ], socialLinks: [ - { icon: 'github', link: 'https://github.com/vuejs/vitepress' }, + { icon: 'github', link: 'https://github.com/Vanilagy/mediabunny' }, ], search: { @@ -67,9 +73,14 @@ export default withMermaid({ }, markdown: { math: true, + theme: { light: 'github-light', dark: 'github-dark-dimmed' }, config(md) { md.use(footnote); }, }, + vite: { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + plugins: [tailwindcss() as any], + }, outDir: '../dist-docs', }); diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts new file mode 100644 index 0000000..a7d3dd7 --- /dev/null +++ b/docs/.vitepress/theme/index.ts @@ -0,0 +1,6 @@ +import DefaultTheme from 'vitepress/theme'; +import './theme.css'; +import '@fontsource-variable/rubik'; +import '@fontsource/dm-mono'; + +export default DefaultTheme; diff --git a/docs/.vitepress/theme/theme.css b/docs/.vitepress/theme/theme.css new file mode 100644 index 0000000..a1d495e --- /dev/null +++ b/docs/.vitepress/theme/theme.css @@ -0,0 +1,52 @@ +@import "tailwindcss"; + +:root { + --vp-font-family-base: 'Rubik Variable', sans-serif; + --vp-font-family-mono: 'DM Mono', monospace; + + --vp-home-hero-image-background-image: linear-gradient( + 40deg, + rgb(255, 255, 255, 0), + rgb(255, 87, 205) + ); + --vp-home-hero-image-filter: blur(30px); + + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); + + --vp-c-brand-1: hsl(342, 90%, 65%); + --vp-c-brand-2: hsl(327, 80%, 70%); + --vp-c-brand-3: hsl(327, 80%, 60%); +} + +@media (min-width: 640px) { + :root { + --vp-home-hero-image-filter: blur(50px); + } +} + +.dark { + --vp-c-brand-1: hsl(342, 100%, 77%); + + --vp-c-bg: oklch(20.385% 0.00773 285.719); + --vp-c-bg-alt: oklch(17.105% 0.00397 285.961); + --vp-c-bg-elv: oklch(22.927% 0.01144 278.034); + --vp-c-bg-soft: oklch(22.927% 0.01144 278.034); + + --vp-c-gray-1: oklch(43.933% 0.0226 248.367); + --vp-c-gray-2: oklch(35.955% 0.02077 259.438); + --vp-c-gray-3: oklch(30.266% 0.01685 266.452); + --vp-c-gray-soft: oklch(50.504% 0.03148 248.444 / 0.16); +} + +.vp-doc a:hover { + color: rgb(203, 40, 99); +} + +.dark .vp-doc a:hover { + color: hsl(345, 100%, 85%); +} + +body { + overflow-x: hidden; +} \ No newline at end of file diff --git a/docs/codec-soup.svg b/docs/codec-soup.svg new file mode 100644 index 0000000..0982ad8 --- /dev/null +++ b/docs/codec-soup.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/guide/introduction.md b/docs/guide/introduction.md index ed1d32f..852ee05 100644 --- a/docs/guide/introduction.md +++ b/docs/guide/introduction.md @@ -1,6 +1,6 @@ # Introduction -Mediabunny is a JavaScript library for reading, writing, and converting media files (like MP4 or WebM), directly in the browser. It aims to be a complete toolkit for doing high-performance media operations on the web. It's written from scratch in pure TypeScript, has zero dependencies, and is extremely tree-shakable, meaning you only include what you use. You can think of it like [FFmpeg](https://ffmpeg.org/), but built for the web. +Mediabunny is a JavaScript library for reading, writing, and converting media files (like MP4 or WebM), directly in the browser. It aims to be a complete toolkit for doing high-performance media operations on the web. It's written from scratch in pure TypeScript, has zero dependencies, and is extremely tree-shakable, meaning you only include what you use. You can think of it kind of like [FFmpeg](https://ffmpeg.org/), but built for the web's needs. ## Features diff --git a/docs/guide/quick-start.md b/docs/guide/quick-start.md index a2ee7e8..246dc40 100644 --- a/docs/guide/quick-start.md +++ b/docs/guide/quick-start.md @@ -467,7 +467,13 @@ const output = new Output({ // ... }); -const conversion = await Conversion.init({ input, output }); +const conversion = await Conversion.init({ + input, + output, + audio: { + sampleRate: 16000, // Resample to 16 kHz + }, +}); await conversion.execute(); // Conversion is complete ``` diff --git a/docs/index.md b/docs/index.md index 3522e28..745753e 100644 --- a/docs/index.md +++ b/docs/index.md @@ -2,46 +2,252 @@ # https://vitepress.dev/reference/default-theme-home-page layout: home +title: Mediabunny + hero: - name: "My Awesome Project" - text: "A VitePress Site" - tagline: My great project tagline + name: Mediabunny + text: Complete media toolkit + tagline: A JavaScript library for reading, writing, and converting media files. Directly in the browser, and faster than anybunny else. + image: + src: /mediabunny-logo.svg + alt: Mediabunny logo actions: - theme: brand - text: Markdown Examples - link: /markdown-examples + text: Hop in + link: /guide/introduction - theme: alt - text: API Examples - link: /api-examples - -features: - - title: Feature A - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit - - title: Feature B - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit - - title: Feature C - details: Lorem ipsum dolor sit amet, consectetur adipiscing elit + text: Examples + link: /examples --- -things the guide needs to cover: -- writing files ✅ - - output usage ✅ - - all output formats ✅ - - all media sources ✅ -- reading files ✅ - - input usage ✅ - - all input formats ✅ - - all media sinks ✅ -- utility functions ✅ -- supported containers / codecs ✅ -- samples & packets ✅ -- conversion ✅ +
+
+
+

Read any media file, efficiently

+

Mediabunny allows you efficiently read data from any media file, no matter the size: duration, resolution, rotation, tracks, codecs and other metadata, as well as raw or decoded media data from anywhere in the file. Load only what you need.

+ + Docs + + +
+
-Examples: -✅ Extracting media file metadata -✅ Rendering thumbnails for a video / extracting a wave form? -✅ Media player -✅ Conversion demo: File compressor -✅ Procedurally generated video (faster than real time) -✅ Video generated from live sources -✅ Live streaming demo? \ No newline at end of file +
+ +```ts +const input = new Input({ + source: new UrlSource('./bigbuckbunny.mp4'), + formats: ALL_FORMATS, // .mp4, .webm, .wav, ... +}); + +const duration = await input.computeDuration(); + +const videoTrack = await input.getPrimaryVideoTrack(); +const { displayWidth, displayHeight, rotation } = videoTrack; + +const audioTrack = await input.getPrimaryAudioTrack(); +const { sampleRate, channelCount } = audioTrack; + +// Get the frame halfway through the video +const sink = new VideoSampleSink(videoTrack); +const { canvas } = await sink.getSample(duration / 2); + +// Loop over all frames of the video +for await (const frame of sink.samples()) { + // ... +} +``` + +
+
+ +
+
+ +
+ +```ts +const output = new Output({ + format: new Mp4OutputFormat(), // .mp4 + target: new BufferTarget(), // in memory +}); + +// Add video, driven by a canvas +const videoSource = new CanvasSource(canvas, { + codec: 'av1', + bitrate: QUALITY_HIGH, +}); +output.addVideoTrack(videoSource); + +// Add audio, driven by audio buffers +const audioSource = new AudioBufferSource({ + codec: 'opus', + bitrate: QUALITY_HIGH, +}); +output.addAudioTrack(audioSource); + +await output.start(); + +// Add media data here... + +await output.finalize; +const { buffer } = output.target; // Contains the final file +``` + +
+
+

Create new media files, programmatically

+

Generate new media files (such as MP4 or WebM) directly on the client, and as fast as the hardware allows. Add multiple video, audio, or subtitle tracks, and have precise control down to the microsecond.

+ + Docs + + +
+
+ +
+
+

Hopping-fast file conversion

+

Use the Conversion API to transform any media file into any other media file: perform transmuxing, transcoding, resizing, rotation, audio resampling, trimming, and more.

+ + Docs + + +
+
+ +
+ +```ts +const input = new Input({ + source: new BlobSource(file), // Read from disk + formats: ALL_FORMATS, +}); +const output = new Output({ + format: new WebMOutputFormat(), // Convert to .webm + target: new StreamTarget(writableStream), // Write to disk +}); + +const conversion = await Conversion.init({ input, output }); +await conversion.execute(); + +// Done! +``` + +
+
+ +
+
+
+ +
+
+

Universal I/O

+

Read and write files from and to memory, disk, or the network. Create files for offline use, or live-stream them as they're being created. Inject media data from a canvas, webcam, screen, microphone, audio buffer, your own encoding stack, or whatever. It's all up to you.

+
+
+ +
+
+

Wide container & codec support

+

Mediabunny supports many commonly used container formats and a wide variety of video and audio codecs. And all of them bidirectionally, too! (that means for reading and writing)

+ + See full list + + +
+
+
+ +
+
+ + + +
+
+
+

{{ benchmark.name }}

+
+

{{ result.name }}

+
+

{{ result.value < 100 ? result.value.toPrecision(3) : Math.floor(result.value) }} {{ benchmark.unit }}

+
+
+

Reading BigBuckBunny1080pH264.mov (691 MiB) from disk
Ryzen 7600X, RTX 4070, NVMe SSD, measured 2025-06-22

+
+
+

High performance

+

By reading only what you need, writing progressively, utilizing hardware-accelerated encoding and decoding via the WebCodecs API, and using a pipelined design, Mediabunny is able to get the job done fast.

+
+
+ +
+
+

Built from scratch, for the web

+

Mediabunny is 100% implemented in TypeScript and has zero dependencies. Its API was designed to be highly tree-shakable, meaning you only include what you use.

+
+
+

Bundle size, minified + gzipped

+
+

{{ result.name }}

+
+

{{ result.size < 100 ? result.size.toPrecision(3) : Math.floor(result.size) }} kB

+
+
+

ffmpeg.wasm

+
+
+
+
+
+
+ +
diff --git a/docs/inspiring-io.svg b/docs/inspiring-io.svg new file mode 100644 index 0000000..4c1cc4a --- /dev/null +++ b/docs/inspiring-io.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/docs/public/mediabunny-logo.svg b/docs/public/mediabunny-logo.svg new file mode 100644 index 0000000..609b946 --- /dev/null +++ b/docs/public/mediabunny-logo.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/docs/tsconfig.json b/docs/tsconfig.json index 825fa12..17c9655 100644 --- a/docs/tsconfig.json +++ b/docs/tsconfig.json @@ -5,6 +5,7 @@ "module": "NodeNext" }, "include": [ - ".vitepress/config.mts" + ".vitepress/config.mts", + ".vitepress/theme/index.ts", ] } \ No newline at end of file diff --git a/examples/base.css b/examples/base.css index 99c88b7..8cc7c70 100644 --- a/examples/base.css +++ b/examples/base.css @@ -9,5 +9,5 @@ @theme { --color-zinc-750: oklch(32.2% 0.0095 285.919); - --font-sans: "Inter Variable", sans-serif; + --font-sans: 'Rubik Variable', sans-serif; } \ No newline at end of file diff --git a/examples/base.ts b/examples/base.ts index 675b224..d4e1823 100644 --- a/examples/base.ts +++ b/examples/base.ts @@ -1 +1 @@ -import '@fontsource-variable/inter'; +import '@fontsource-variable/rubik'; diff --git a/examples/file-compression/index.html b/examples/file-compression/index.html index 46edbe1..79fc087 100644 --- a/examples/file-compression/index.html +++ b/examples/file-compression/index.html @@ -8,6 +8,7 @@ + @@ -37,10 +38,10 @@ -
- -

Mediabunny

-
+ + +

Mediabunny

+ + @@ -38,10 +39,10 @@
-
- -

Mediabunny

-
+ + +

Mediabunny

+ + @@ -73,10 +74,10 @@
-
- -

Mediabunny

-
+ + +

Mediabunny

+ + @@ -30,10 +31,10 @@

-
- -

Mediabunny

-
+ + +

Mediabunny

+ + @@ -44,10 +45,10 @@ -
- -

Mediabunny

-
+ + +

Mediabunny

+ + @@ -30,10 +31,10 @@

-
- -

Mediabunny

-
+ + +

Mediabunny

+ =21.1.0" } }, - "node_modules/@fontsource-variable/inter": { - "version": "5.2.5", - "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.5.tgz", - "integrity": "sha512-TrWffUAFOnT8zroE9YmGybagoOgM/HjRqMQ8k9R0vVgXlnUh/vnpbGPAS/Caz1KIlOPnPGh6fvJbb7DHbFCncA==", + "node_modules/@fontsource-variable/rubik": { + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@fontsource-variable/rubik/-/rubik-5.2.6.tgz", + "integrity": "sha512-vMOZRIKXE46Q28QN+RKCq0KJW9eg8WAOrlb/W5rjBSzFeINC83ArLvWW4bH9H+bCrp5IeVovH6PqEAjdOU2+xA==", + "dev": true, + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, + "node_modules/@fontsource/dm-mono": { + "version": "5.2.6", + "resolved": "https://registry.npmjs.org/@fontsource/dm-mono/-/dm-mono-5.2.6.tgz", + "integrity": "sha512-d38urf08wZ/UcAM13kmuPkhr9xGEo0S9undlZ/99nBb7dK5+w1uqriP6VVJ8T7pYiNtRtZq7NxV/2KI/6Obsog==", "dev": true, "license": "OFL-1.1", "funding": { diff --git a/package.json b/package.json index faafeb4..1955c3f 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,8 @@ }, "devDependencies": { "@eslint/js": "^9.22.0", - "@fontsource-variable/inter": "^5.2.5", + "@fontsource-variable/rubik": "^5.2.6", + "@fontsource/dm-mono": "^5.2.6", "@microsoft/api-extractor": "^7.52.1", "@stylistic/eslint-plugin": "^4.2.0", "@tailwindcss/vite": "^4.1.7",