Skip to main content
warning

我们正在逐步淘汰 Remotion WebCodecs，并正在转向 Mediabunny！ 我们建议改为使用 Mediabunny 提取帧。

extractFramesOnWebWorker()v4.0.330

属于 @remotion/webcodecs 软件包的一部分.

🌐 Part of the @remotion/webcodecs package.

使用 parseMediaOnWebWorker() 在特定时间戳从视频中提取帧。

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

由于 Remotion 正在迁移到 Mediabunny，我们建议在新项目中使用基于 [Mediabunny] 的帧提取实现(/docs/mediabunny/extract-frames)。

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

Extracting frames
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​

一个 URL 或 File/Blob。

🌐 A URL or File/Blob.

如果是远程 URL，它必须支持 CORS。

🌐 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
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;
};

请注意，目前在提取之前，你无法获取视频的时长（以秒为单位）。 为此，你目前需要事先进行另一次 parseMedia() 调用。

🌐 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​

一个回调函数，将在给定时间戳的帧上被调用。每一帧都是一个 VideoFrame 对象，例如可以绘制到画布上。

🌐 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?​

确认 Remotion 许可证 以使控制台消息消失。

🌐 Acknowledge the Remotion License to make the console message disappear.

signal?​

一个可选的 AbortSignal 用于中止提取。

🌐 An optional AbortSignal to abort the extraction.

logLevel?​

字符串 LogLevel

🌐 string LogLevel

"error"、"warn"、"info"、"debug"、"trace" 之一。
默认值："info"，仅记录重要信息。

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

另请参阅​

🌐 See also

Last updated on