extractFrames()v4.0.311

Part of the @remotion/webcodecs package.

Extracts frames from a video at specific timestamps using parseMedia().

Since Remotion is migrating to Mediabunny, we recommend using the Mediabunny-based frame extraction implementation for new projects.

Extracting frames
tsx
import {extractFrames} from'@remotion/webcodecs';
awaitextractFrames({
 src: 'https://remotion.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
importtype {ExtractFramesTimestampsInSecondsFn} from'@remotion/webcodecs';
consttoSeconds=10;
constfromSeconds=0;
constcanvasWidth=500;
constcanvasHeight=80;
consttimestamps:ExtractFramesTimestampsInSecondsFn=async ({track}) => {
constaspectRatio= track.width / track.height;
constamountOfFramesFit=Math.ceil(canvasWidth / (canvasHeight * aspectRatio));
consttimestampsInSeconds:number[] = [];
constsegmentDuration= 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​

• Extracting frames with Mediabunny (recommended)
• Source code for this function
• @remotion/webcodecs
• parseMedia()