Chapter 736: Extracting frames from a video in JavaScript

Core Idea

Extracting frames from a video file, for example to display a filmstrip in an editing interface, can be done using Mediabunny.

Key Concepts

• Example: Extract frames at specific times
• Example: Create a filmstrip
• Memory management
• Abort frame extraction
• Setting a timeout
• See also

Code Examples

type Options = {
  track: {width: number; height: number};
  container: string;
  durationInSeconds: number | null;
};

export type ExtractFramesTimestampsInSecondsFn = (options: Options) => Promise<number[]> | number[];

export type ExtractFramesProps = {
  src: string;
  timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn;
  onVideoSample: (sample: VideoSample) => void;
  signal?: AbortSignal;
};

export async function extractFrames({src, timestampsInSeconds, onVideoSample, signal}: ExtractFramesProps): Promise<void> {
  using input = new Input({
    formats: ALL_FORMATS,
    source: new UrlSource(src),
  });

  const [durationInSeconds, format, videoTrack] = await Promise.all([input.computeDuration(), input.getFormat(), input.getPrimaryVideoTrack()]);
  if (!videoTrack) {
    throw new Error('No video track found in the input');
  }
  if (signal?.aborted) {
    throw new Error('Aborted');
  }

  const timestamps =
    typeof timestampsInSeconds === 'function'
      ? await timestampsInSeconds({
          track: {
            width: videoTrack.displayWidth,
            height: videoTrack.displayHeight,
          },
          container: format.name,
          durationInSeconds,
        })
      : timestampsInSeconds;

  if (timestamps.length === 0) {
    return;
  }

  if (signal?.aborted) {
    throw new Error('Aborted');
  }

  const sink = new VideoSampleSink
// ...(truncated)

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

Key Takeaways

1. Understand example: extract frames at specific times when working with Extracting frames from a video in JavaScript.
2. Understand example: create a filmstrip when working with Extracting frames from a video in JavaScript.
3. Understand memory management when working with Extracting frames from a video in JavaScript.
4. Understand abort frame extraction when working with Extracting frames from a video in JavaScript.
5. Understand setting a timeout when working with Extracting frames from a video in JavaScript.

Connects To

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