Update docs

This commit is contained in:
Vanilagy
2025-08-30 16:50:52 +02:00
parent e5df6f1a63
commit f514c16ee9
2 changed files with 56 additions and 18 deletions
+54 -17
View File
@@ -420,7 +420,7 @@ This source is the fastest but requires the entire input file to be held in memo
### `BlobSource` ### `BlobSource`
This source is backed by an underlying [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) object. Since [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) extends `Blob`, this source is perfect for reading data directly from disk. This source is backed by an underlying [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) object. Since [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File) extends `Blob`, this source is perfect for reading data directly from disk (in the browser).
```ts ```ts
import { BlobSource } from 'mediabunny'; import { BlobSource } from 'mediabunny';
@@ -430,21 +430,26 @@ fileInput.addEventListener('change', (event) => {
}); });
``` ```
### `UrlSource` <Badge type="warning" text="beta" /> `BlobSource` accepts additional options as a second parameter:
```ts
type BlobSourceOptions = {
// The maximum number of bytes the cache is allowed to hold
// in memory. Defaults to 8 MiB.
maxCacheSize?: number;
};
```
::: warning ### `UrlSource`
This is a **beta** feature. `UrlSource` tends to make tons of requests and is potentially slow. This is something that will be fixed in the near future.
It still works, but keep in mind it's going to be much higher-latency than reading directly from disk or from memory. This source fetches data from a remote URL, useful for reading files over the network.
:::
This source fetches data from a URL. This is useful for reading files over the network.
```ts ```ts
import { UrlSource } from 'mediabunny'; import { UrlSource } from 'mediabunny';
const source = new UrlSource('https://example.com/bigbuckbunny.mp4'); const source = new UrlSource('https://example.com/bigbuckbunny.mp4');
``` ```
`UrlSource` will do some pretty crazy stuff to prefetch data intelligently based on observed access patterns to minimize request count and latency.
::: warning ::: warning
If you're using this source in the browser and the URL is on a different origin, make sure [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) is properly configured. If you're using this source in the browser and the URL is on a different origin, make sure [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS) is properly configured.
::: :::
@@ -454,6 +459,10 @@ If you're using this source in the browser and the URL is on a different origin,
type UrlSourceOptions = { type UrlSourceOptions = {
requestInit?: RequestInit; requestInit?: RequestInit;
getRetryDelay?: (previousAttempts: number) => number | null; getRetryDelay?: (previousAttempts: number) => number | null;
// The maximum number of bytes the cache is allowed to hold
// in memory. Defaults to 8 MiB.
maxCacheSize?: number;
}; };
``` ```
@@ -476,13 +485,31 @@ const source = new UrlSource('https://example.com/bigbuckbunny.mp4', {
}); });
``` ```
Not setting `getRetryDelay` means requests will not be retried. Not setting `getRetryDelay` will default to an infinite, capped exponential backoff pattern.
### `FilePathSource`
This input source can be used to load data directly from a file, given a file path. It requires a server-side environment such as Node, Bun, or Deno.
```ts
import { FilePathSource } from 'mediabunny';
const source = new FilePathSource('/home/david/Downloads/bigbuckbunny.mp4');
```
`FilePathSource` accepts additional options as a second parameter:
```ts
type FilePathSourceOptions = {
// The maximum number of bytes the cache is allowed to hold
// in memory. Defaults to 8 MiB.
maxCacheSize?: number;
};
```
### `StreamSource` ### `StreamSource`
This is a general-purpose input source you can use to read data from anywhere. All other input sources can be implemented on top of `StreamSource`. This is a general-purpose input source you can use to read data from anywhere.
For example, here we're reading a file from disk using the Node.js file system: For example, here we're reading a file from disk using the Node.js file system (although you should use [`FilePathSource`](#filepathsource) for that):
```ts ```ts
import { StreamSource } from 'mediabunny'; import { StreamSource } from 'mediabunny';
import { open } from 'node:fs/promises'; import { open } from 'node:fs/promises';
@@ -505,11 +532,21 @@ const source = new StreamSource({
The options of `StreamSource` have the following type: The options of `StreamSource` have the following type:
```ts ```ts
type StreamSourceOptions = { type StreamSourceOptions = {
// Called when data is requested.
// Should return or resolve to the bytes from the specified byte range.
read: (start: number, end: number) => Uint8Array | Promise<Uint8Array>;
// Called when the size of the entire file is requested.
// Should return or resolve to the size in bytes.
getSize: () => number | Promise<number>; getSize: () => number | Promise<number>;
read: (start: number, end: number) => Uint8Array | Promise<Uint8Array>;
maxCacheSize?: number;
prefetchProfile?: 'none' | 'fileSystem' | 'network';
}; };
``` ```
- `getSize`\
Called when the size of the entire file is requested. Must return or resolve to the size in bytes. This function is guaranteed to be called before `read`.
- `read`\
Called when data is requested. Must return or resolve to the bytes from the specified byte range, or a stream that yields these bytes.
- `maxCacheSize`\
The maximum number of bytes the cache is allowed to hold in memory. Defaults to 8 MiB.
- `prefetchProfile`\
Specifies the prefetch profile that the reader should use with this source. A prefetch propfile specifies the pattern with which bytes outside of the requested range are preloaded to reduce latency for future reads.
- `'none'` (default): No prefetching; only the data needed in the moment is requested.
- `'fileSystem'`: File system-optimized prefetching: a small amount of data is prefetched bidirectionally, aligned with page boundaries.
- `'network'`: Network-optimized prefetching, or more generally, prefetching optimized for any high-latency environment: tries to minimize the amount of read calls and aggressively prefetches data when sequential access patterns are detected.
+2 -1
View File
@@ -545,7 +545,8 @@ export type StreamSourceOptions = {
* pattern with which bytes outside of the requested range are preloaded to reduce latency for future reads. * pattern with which bytes outside of the requested range are preloaded to reduce latency for future reads.
* *
* - `'none'` (default): No prefetching; only the data needed in the moment is requested. * - `'none'` (default): No prefetching; only the data needed in the moment is requested.
* - `'fileSystem'`: File system-optimized prefetching: a small amount of data is prefetched bidirectionally. * - `'fileSystem'`: File system-optimized prefetching: a small amount of data is prefetched bidirectionally,
* aligned with page boundaries.
* - `'network'`: Network-optimized prefetching, or more generally, prefetching optimized for any high-latency * - `'network'`: Network-optimized prefetching, or more generally, prefetching optimized for any high-latency
* environment: tries to minimize the amount of read calls and aggressively prefetches data when sequential access * environment: tries to minimize the amount of read calls and aggressively prefetches data when sequential access
* patterns are detected. * patterns are detected.