Skip to main content

extractFrames()v4.0.311

Part of the @remotion/webcodecs package.

Extracts frames from a video at specific timestamps.

Extracting frames
tsx
import {extractFrames} from '@remotion/webcodecs';
 
await extractFrames({
  src: 'https://parser.media/video.mp4',
  timestampsInSeconds: [0, 1, 2, 3, 4],
  onFrame: (frame) => {
    console.log(frame);
                 
(parameter) frame: VideoFrame
  },
});

API​

src​

A URL or File/Blob.

If it is a remote URL, it must support CORS.

timestampsInSeconds​

An array of timestamps in seconds, or a function that returns a promise resolving to an array of timestamps in seconds based on the video track.

Consider you wanting you to create a filmstrip of a video. You can do this by extracting as many frames as fit in a canvas.

Extracting as many frames as fit in a canvas
tsx
import type {ExtractFramesTimestampsInSecondsFn} from '@remotion/webcodecs';
 
const toSeconds = 10;
const fromSeconds = 0;
const canvasWidth = 500;
const canvasHeight = 80;
 
const timestamps: ExtractFramesTimestampsInSecondsFn = async ({track}) => {
  const aspectRatio = track.width / track.height;
  const amountOfFramesFit = Math.ceil(
    canvasWidth / (canvasHeight * aspectRatio),
  );
  const timestampsInSeconds: number[] = [];
  const segmentDuration = toSeconds - fromSeconds;
 
  for (let i = 0; i < amountOfFramesFit; i++) {
    timestampsInSeconds.push(
      fromSeconds + (segmentDuration / amountOfFramesFit) * (i + 0.5),
    );
  }
 
  return timestampsInSeconds;
};

Note that currently, you can not get the duration of the video in seconds before the extraction.
For this you need currently to make another parseMedia() call beforehand.

onFrame​

A callback that will be called with the frame at the given timestamp.
Each frame is a VideoFrame object that can for example be drawn to a canvas.

acknowledgeRemotionLicense?​

Acknowledge the Remotion License to make the console message disappear.

signal?​

An optional AbortSignal to abort the extraction.

logLevel?​

string LogLevel

One of "error", "warn", "info", "debug", "trace".
Default value: "info", which logs only important information.

See also​