mirror of
https://github.com/arcodange-org/mediabunny.git
synced 2026-09-27 02:43:48 +02:00
Write home page, add logo, configure theme
This commit is contained in:
Vanilagy
@@ -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',
|
||||
});
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
import DefaultTheme from 'vitepress/theme';
|
||||
import './theme.css';
|
||||
import '@fontsource-variable/rubik';
|
||||
import '@fontsource/dm-mono';
|
||||
|
||||
export default DefaultTheme;
|
||||
@@ -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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 115 KiB |
@@ -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
|
||||
|
||||
|
||||
@@ -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
|
||||
```
|
||||
|
||||
+242
-36
@@ -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 ✅
|
||||
<div class="space-y-16 mt-8">
|
||||
<div class="grid grid-cols-2 gap-20 items-center">
|
||||
<div>
|
||||
<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Read any media file, efficiently</h1>
|
||||
<p class="text-lg">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.</p>
|
||||
<a class="!no-underline inline-flex items-center gap-1.5" :no-icon="true" href="/guide/reading-media-files">
|
||||
Docs
|
||||
<span class="vpi-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-sm relative">
|
||||
|
||||
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?
|
||||
<div class="absolute size-70 rounded-full bg-[#ff45ac]/0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-[200px]" />
|
||||
|
||||
```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()) {
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-20 items-center">
|
||||
<div class="text-sm relative">
|
||||
|
||||
<div class="absolute size-70 rounded-full bg-[#ff45ac]/0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-[200px]" />
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Create new media files, programmatically</h1>
|
||||
<p class="text-lg">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.</p>
|
||||
<a class="!no-underline inline-flex items-center gap-1.5" :no-icon="true" href="/guide/writing-media-files">
|
||||
Docs
|
||||
<span class="vpi-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-20 items-center">
|
||||
<div>
|
||||
<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Hopping-fast file conversion</h1>
|
||||
<p class="text-lg">Use the Conversion API to transform any media file into any other media file: perform transmuxing, transcoding, resizing, rotation, audio resampling, trimming, and more.</p>
|
||||
<a class="!no-underline inline-flex items-center gap-1.5" :no-icon="true" href="/guide/converting-media-files">
|
||||
Docs
|
||||
<span class="vpi-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-sm relative">
|
||||
|
||||
<div class="absolute size-70 rounded-full bg-[#ff45ac]/0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-[200px]" />
|
||||
|
||||
```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!
|
||||
```
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-20 items-center">
|
||||
<div class="relative">
|
||||
<div class="absolute size-70 rounded-full bg-[#ff45ac]/0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-[200px]" />
|
||||
<img class="relative" src="./inspiring-io.svg">
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Universal I/O</h1>
|
||||
<p class="text-lg">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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-20 items-center">
|
||||
<div>
|
||||
<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Wide container & codec support</h1>
|
||||
<p class="text-lg">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)</p>
|
||||
<a class="!no-underline inline-flex items-center gap-1.5" :no-icon="true" href="/guide/supported-formats-and-codecs">
|
||||
See full list
|
||||
<span class="vpi-arrow-right" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="grid place-items-center relative">
|
||||
<div class="absolute size-70 rounded-full bg-[#ff45ac]/0 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-[200px]" />
|
||||
<img class="relative" src="./codec-soup.svg">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
const benchmarks = [
|
||||
{
|
||||
name: 'Extract metadata',
|
||||
unit: 'ops/s',
|
||||
results: [
|
||||
{ name: 'Mediabunny', value: 1000/1.16 },
|
||||
{ name: '@remotion/media-parser', value: 1000/4.28 },
|
||||
{ name: 'web-demuxer', value: 1000/12.4 },
|
||||
{ name: 'mp4box.js', value: 1000/23 },
|
||||
{ name: 'ffmpeg.wasm', value: 1000/547 },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Iterate over all video packets',
|
||||
unit: 'packets/s',
|
||||
results: [
|
||||
{ name: 'Mediabunny', value: 10800 },
|
||||
{ name: 'web-demuxer', value: 2390 },
|
||||
{ name: '@remotion/media-parser', value: 842 },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Convert to .webm & resize to 320x180',
|
||||
unit: 'frames/s',
|
||||
results: [
|
||||
{ name: 'Mediabunny', value: 804 },
|
||||
{ name: '@remotion/webcodecs', value: 324 },
|
||||
{ name: 'ffmpeg.wasm', value: 12 },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const bundleSizes = [
|
||||
{ name: 'Reading .wav files', size: 5.1 },
|
||||
{ name: 'Writing .wav files', size: 5.79 },
|
||||
{ name: 'Writing .webm files', size: 11.36 },
|
||||
{ name: 'Reading .webm files', size: 15.2 },
|
||||
{ name: 'Reading .mp4 files', size: 16.03 },
|
||||
{ name: 'Writing .mp4 files', size: 17.28 },
|
||||
{ name: 'Reading all formats', size: 30.02 },
|
||||
{ name: 'mp4box.js', size: 37.3, isThirdParty: true },
|
||||
{ name: 'web-demuxer', size: 44.8, isThirdParty: true },
|
||||
{ name: 'All features', size: 69.62 },
|
||||
{ name: '@remotion/webcodecs', size: 87.2 + 20.8, isThirdParty: true },
|
||||
];
|
||||
</script>
|
||||
|
||||
<div class="grid grid-cols-2 gap-20 items-center">
|
||||
<div class="space-y-8">
|
||||
<div v-for="benchmark in benchmarks" class="space-y-2">
|
||||
<p class="text-center font-medium text-sm !mt-0 !mb-2">{{ benchmark.name }}</p>
|
||||
<div v-for="result, i in benchmark.results" class="flex items-center gap-2">
|
||||
<p :class="{ '!text-[#ff78c2]': i === 0 }" class="!my-0 shrink-0 font-medium w-40 text-xs whitespace-nowrap text-right">{{ result.name }}</p>
|
||||
<div class="h-8 bg-[var(--vp-c-gray-2)] rounded-md" :style="{ width: `calc(${result.value / Math.max(...benchmark.results.map(x => x.value))}*(100% - 7.5rem - 10rem))`, background: i === 0 ? '-webkit-linear-gradient(-30deg, #ff45ac, #ff78c2)' : undefined }" />
|
||||
<p :class="{ '!text-[#ff78c2]': i === 0, 'opacity-50': i > 0 }" class="!my-0 text-xs w-30">{{ result.value < 100 ? result.value.toPrecision(3) : Math.floor(result.value) }} {{ benchmark.unit }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="!my-0 text-center text-[10px] opacity-50 !leading-4">Reading BigBuckBunny1080pH264.mov (691 MiB) from disk<br>Ryzen 7600X, RTX 4070, NVMe SSD, measured 2025-06-22</p>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">High performance</h1>
|
||||
<p class="text-lg">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.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-20 items-center">
|
||||
<div>
|
||||
<h1 class="inline-block" style="background: -webkit-linear-gradient(-30deg, #ff45ac, #ff78c2); -webkit-background-clip: text; color: transparent;">Built from scratch, for the web</h1>
|
||||
<p class="text-lg">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.</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<p class="text-center font-medium text-sm !mt-0 !mb-2">Bundle size, minified + gzipped</p>
|
||||
<div v-for="result in bundleSizes" class="flex items-center gap-2">
|
||||
<p :class="{ '!text-[#ff78c2]': !result.isThirdParty }" class="!my-0 shrink-0 font-medium w-40 text-xs whitespace-nowrap text-right">{{ result.name }}</p>
|
||||
<div class="h-8 bg-[var(--vp-c-gray-2)] rounded-md" :style="{ width: `calc(${result.size / Math.max(...bundleSizes.map(x => x.size))}*(100% - 7.5rem - 10rem))`, background: !result.isThirdParty ? '-webkit-linear-gradient(-30deg, #ff45ac, #ff78c2)' : undefined }" />
|
||||
<p :class="{ '!text-[#ff78c2]': !result.isThirdParty, 'opacity-50': result.isThirdParty }" class="!my-0 text-xs w-30">{{ result.size < 100 ? result.size.toPrecision(3) : Math.floor(result.size) }} kB</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<p class="!my-0 shrink-0 font-medium w-40 text-xs whitespace-nowrap text-right">ffmpeg.wasm</p>
|
||||
<div class="relative h-8">
|
||||
<div class="h-full rounded-md absolute top-0 left-0 w-10000" style="background: linear-gradient(to right, var(--vp-c-gray-2) 0px, transparent 2000px, transparent 100%);" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 52 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 32 KiB |
+2
-1
@@ -5,6 +5,7 @@
|
||||
"module": "NodeNext"
|
||||
},
|
||||
"include": [
|
||||
".vitepress/config.mts"
|
||||
".vitepress/config.mts",
|
||||
".vitepress/theme/index.ts",
|
||||
]
|
||||
}
|
||||
+1
-1
@@ -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;
|
||||
}
|
||||
+1
-1
@@ -1 +1 @@
|
||||
import '@fontsource-variable/inter';
|
||||
import '@fontsource-variable/rubik';
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<script type="module" src="../base.ts"></script>
|
||||
<script type="module" src="./file-compression.ts"></script>
|
||||
<link rel="stylesheet" href="../base.css">
|
||||
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
|
||||
@@ -37,10 +38,10 @@
|
||||
<video controls class="rounded-md mt-4" style="display: none;"></video>
|
||||
<p class="text-xs font-medium mt-1" id="compression-facts" style="display: none;"></p>
|
||||
|
||||
<div class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
|
||||
<p class="text-sm font-semibold">Mediabunny</p>
|
||||
</div>
|
||||
<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
||||
<p class="text-sm font-medium">Mediabunny</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/file-compression"
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<script type="module" src="../base.ts"></script>
|
||||
<script type="module" src="./live-recording.ts"></script>
|
||||
<link rel="stylesheet" href="../base.css">
|
||||
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
|
||||
@@ -38,10 +39,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
|
||||
<p class="text-sm font-semibold">Mediabunny</p>
|
||||
</div>
|
||||
<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
||||
<p class="text-sm font-medium">Mediabunny</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/live-recording"
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<script type="module" src="../base.ts"></script>
|
||||
<script type="module" src="./media-player.ts"></script>
|
||||
<link rel="stylesheet" href="../base.css">
|
||||
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2 h-svh">
|
||||
@@ -73,10 +74,10 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
|
||||
<p class="text-sm font-semibold">Mediabunny</p>
|
||||
</div>
|
||||
<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
||||
<p class="text-sm font-medium">Mediabunny</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/media-player"
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<script type="module" src="../base.ts"></script>
|
||||
<script type="module" src="./metadata-extraction.ts"></script>
|
||||
<link rel="stylesheet" href="../base.css">
|
||||
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
|
||||
@@ -30,10 +31,10 @@
|
||||
<p id="bytes-read" class="text-center text-xs font-medium mb-4"></p>
|
||||
<div id="metadata-container" class="text-sm"></div>
|
||||
|
||||
<div class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
|
||||
<p class="text-sm font-semibold">Mediabunny</p>
|
||||
</div>
|
||||
<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
||||
<p class="text-sm font-medium">Mediabunny</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/metadata-extraction"
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<script type="module" src="../base.ts"></script>
|
||||
<script type="module" src="./procedural-generation.ts"></script>
|
||||
<link rel="stylesheet" href="../base.css">
|
||||
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
|
||||
@@ -44,10 +45,10 @@
|
||||
<video controls class="rounded-md" id="result-video" style="display: none;"></video>
|
||||
<p class="text-xs font-medium mt-1" id="video-info" style="display: none;"></p>
|
||||
|
||||
<div class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
|
||||
<p class="text-sm font-semibold">Mediabunny</p>
|
||||
</div>
|
||||
<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
||||
<p class="text-sm font-medium">Mediabunny</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/procedural-generation"
|
||||
|
||||
@@ -8,6 +8,7 @@
|
||||
<script type="module" src="./../base.ts"></script>
|
||||
<script type="module" src="./thumbnail-generation.ts"></script>
|
||||
<link rel="stylesheet" href="../base.css">
|
||||
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
||||
</head>
|
||||
|
||||
<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
|
||||
@@ -30,10 +31,10 @@
|
||||
<p id="error-element" class="text-red-500"></p>
|
||||
<div id="thumbnail-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"></div>
|
||||
|
||||
<div class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
|
||||
<p class="text-sm font-semibold">Mediabunny</p>
|
||||
</div>
|
||||
<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
|
||||
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
||||
<p class="text-sm font-medium">Mediabunny</p>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/thumbnail-generation"
|
||||
|
||||
Generated
+16
-5
@@ -14,7 +14,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",
|
||||
@@ -1068,10 +1069,20 @@
|
||||
"node": "^18.18.0 || ^20.9.0 || >=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": {
|
||||
|
||||
+2
-1
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user