ContextQMD
Back to Remotion

extractFramesOnWebWorker()

packages/docs/docs/webcodecs/extract-frames-on-web-worker.mdx

4.0.4733.3 KB
Original Source

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

extractFramesOnWebWorker()<AvailableFrom v="4.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.

tsx
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);
    //           ^?
  },
});

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.

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 <TsType type="LogLevel" source="@remotion/media-parser"/>

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

See also