Skip to main content
warning

We are phasing out Remotion WebCodecs and are moving to Mediabunny!
We recommend using Mediabunny for extracting frames instead.

extractFramesOnWebWorker()v4.0.330

Part of the @remotion/webcodecs package.

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

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

import {extractFramesOnWebWorker} from '@remotion/webcodecs/worker';

await extractFramesOnWebWorker({
  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.

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​