@twick/media-utils / Exports / VideoFrameExtractor
Class: VideoFrameExtractor
Service for efficiently extracting frames from videos.
Features:
- Reuses a single video element per video URL
- LRU cache for extracted frames
- Fast seeking for timeline scrubbing
- Automatic cleanup of unused video elements
Example
const extractor = new VideoFrameExtractor();
// Extract frame at 5 seconds
const thumbnail = await extractor.getFrame("https://example.com/video.mp4", 5);
// Extract another frame from the same video (reuses video element)
const thumbnail2 = await extractor.getFrame("https://example.com/video.mp4", 10);
// Cleanup when done
extractor.dispose();
Table of contents
Constructors
Methods
Constructors
constructor
• new VideoFrameExtractor(options?): VideoFrameExtractor
Parameters
| Name | Type |
|---|---|
options | VideoFrameExtractorOptions |
Returns
Defined in
Methods
clearCache
▸ clearCache(): void
Clear the frame cache.
Returns
void
Defined in
dispose
▸ dispose(): void
Dispose of all video elements and clear caches. Removes all video elements from the DOM and clears both the frame cache and video element cache. Call this when the extractor is no longer needed to prevent memory leaks.
Returns
void
Defined in
getFrame
▸ getFrame(videoUrl, seekTime?): Promise<string>
Get a frame thumbnail from a video at a specific time. Uses caching and reuses video elements for optimal performance. Uses 0.1s instead of 0 when seekTime is 0, since frames at t=0 are often blank.
Parameters
| Name | Type | Default value | Description |
|---|---|---|---|
videoUrl | string | undefined | The URL of the video |
seekTime | number | 0.1 | The time in seconds to extract the frame (0 is treated as 0.1) |
Returns
Promise<string>
Promise resolving to a thumbnail image URL (data URL or blob URL)
Defined in
removeVideo
▸ removeVideo(videoUrl): void
Remove a specific video element and clear its cached frames.
Parameters
| Name | Type |
|---|---|
videoUrl | string |
Returns
void