Video sinks provide ways to retrieve and render decoded video frames from video tracks.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/Vanilagy/mediabunny/llms.txt
Use this file to discover all available pages before exploring further.
VideoSampleSink
A sink that retrieves decoded video samples (video frames) from a video track.Constructor
The video track to read samples from
Methods
getSample
Retrieves the video sample (frame) corresponding to the given timestamp.The timestamp used for retrieval, in seconds. Returns the last video sample (in presentation order) with a start timestamp less than or equal to the given timestamp. Returns null if the timestamp is before the track’s first timestamp.
VideoSample | null
The video sample at the specified timestamp, or null if not found
samples
Creates an async iterator that yields video samples (frames) in presentation order.The timestamp in seconds at which to start yielding samples (inclusive)
The timestamp in seconds at which to stop yielding samples (exclusive)
AsyncGenerator<VideoSample>
An async iterator that yields video samples. This method will intelligently pre-decode a few frames ahead to enable fast iteration.
samplesAtTimestamps
Creates an async iterator that yields a video sample for each timestamp in the argument.An iterable or async iterable of timestamps in seconds. This method uses an optimized decoding pipeline if these timestamps are monotonically sorted, decoding each packet at most once.
AsyncGenerator<VideoSample | null>
An async iterator that yields video samples. May yield null if no frame is available for a given timestamp.
CanvasSink
A sink that renders video samples (frames) to canvases. This is often more useful than directly retrieving frames, as it comes with common preprocessing steps such as resizing or applying rotation metadata.This sink will yield
HTMLCanvasElements when in a DOM context, and OffscreenCanvases otherwise.Constructor
The video track to render frames from
Configuration options for canvas rendering
CanvasSinkOptions
Whether the output canvases should have transparency instead of a black background. Set this to
true when using this sink to read transparent videos.The width of the output canvas in pixels, defaulting to the display width of the video track. If height is not set, it will be deduced automatically based on aspect ratio.
The height of the output canvas in pixels, defaulting to the display height of the video track. If width is not set, it will be deduced automatically based on aspect ratio.
The fitting algorithm in case both width and height are set:
'fill'- Stretch the image to fill the entire box, potentially altering aspect ratio'contain'- Contain the entire image within the box while preserving aspect ratio (may lead to letterboxing)'cover'- Scale the image until the entire box is filled, while preserving aspect ratio
The clockwise rotation by which to rotate the raw video frame. Defaults to the rotation set in the file metadata. Rotation is applied before resizing.
Specifies the rectangular region of the input video to crop to. The crop region will automatically be clamped to the dimensions of the input video track. Cropping is performed after rotation but before resizing. The crop region is in the display pixel space of the underlying video data.
When set, specifies the number of canvases in the pool. These canvases will be reused in a ring buffer / round-robin fashion. This keeps the amount of allocated VRAM constant and relieves the browser from constantly allocating/deallocating canvases. A pool size of 0 or
undefined disables the pool and means a new canvas is created each time.Methods
getCanvas
Retrieves a canvas with the video frame corresponding to the given timestamp.The timestamp used for retrieval, in seconds. Returns the last video frame (in presentation order) with a start timestamp less than or equal to the given timestamp. Returns null if the timestamp is before the track’s first timestamp.
WrappedCanvas | null
A canvas with the rendered video frame and timing information, or null if not found
canvases
Creates an async iterator that yields canvases with video frames in presentation order.The timestamp in seconds at which to start yielding canvases (inclusive)
The timestamp in seconds at which to stop yielding canvases (exclusive)
AsyncGenerator<WrappedCanvas>
An async iterator that yields canvases. This method will intelligently pre-decode a few frames ahead to enable fast iteration.
canvasesAtTimestamps
Creates an async iterator that yields a canvas for each timestamp in the argument.An iterable or async iterable of timestamps in seconds. This method uses an optimized decoding pipeline if these timestamps are monotonically sorted, decoding each packet at most once.
AsyncGenerator<WrappedCanvas | null>
An async iterator that yields canvases. May yield null if no frame is available for a given timestamp.
WrappedCanvas
A canvas with additional timing information.A canvas element or offscreen canvas
The timestamp of the corresponding video sample, in seconds
The duration of the corresponding video sample, in seconds