Chapter 737: Extracting a thumbnail from a video in JavaScript

Core Idea

Extracting a single frame (thumbnail) from a video file can be done using Mediabunny.

Key Concepts

• Example
• Memory management
• Abort frame extraction
• Setting a timeout
• See also

Code Examples

export type ExtractThumbnailProps = {
  src: string;
  timestampInSeconds: number;
  signal?: AbortSignal;
};

export async function extractThumbnail({src, timestampInSeconds, signal}: ExtractThumbnailProps): Promise<VideoSample> {
  using input = new Input({
    formats: ALL_FORMATS,
    source: new UrlSource(src),
  });

  const videoTrack = await input.getPrimaryVideoTrack();
  if (!videoTrack) {
    throw new Error('No video track found in the input');
  }
  if (signal?.aborted) {
    throw new Error('Aborted');
  }

  const sink = new VideoSampleSink(videoTrack);
  const sample = await sink.getSample(timestampInSeconds);

  if (!sample) {
    throw new Error(`No frame found at timestamp ${timestampInSeconds}s`);
  }

  return sample;
}

• What it demonstrates: Usage pattern for Extracting a thumbnail from a video in JavaScript from the official docs.

Key Takeaways

1. Understand example when working with Extracting a thumbnail from a video in JavaScript.
2. Understand memory management when working with Extracting a thumbnail from a video in JavaScript.
3. Understand abort frame extraction when working with Extracting a thumbnail from a video in JavaScript.
4. Understand setting a timeout when working with Extracting a thumbnail from a video in JavaScript.
5. Understand see also when working with Extracting a thumbnail from a video in JavaScript.

Connects To

• can Decode: related page in the Mediabunny (@remotion/mediabunny) section.
• Extract Frames: related page in the Mediabunny (@remotion/mediabunny) section.
• Formats: related page in the Mediabunny (@remotion/mediabunny) section.