extract-frames

# 从视频中提取帧 使用 Mediabunny 在特定时间戳从视频中提取帧。这对于生成缩略图、胶片条或处理单个帧非常有用。 ## `extractFrames()` 函数 此函数可以复制粘贴到任何项目中。 tsx import { ALL_FORMATS, Input, UrlSource, VideoSample, VideoSampleSink, } from "mediabunny"; type Options = { track: { width: number; height: number }; container: string; durationInSeconds: number | null; }; export type ExtractFramesTimestampsInSecondsFn = ( options: Options ) => Promise | number[]; export type ExtractFramesProps = { src: string; timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn; onVideoSample: (sample: VideoSample) => void; signal?: AbortSignal; }; export async function extractFrames({ src, timestampsInSeconds, onVideoSample, signal, }: ExtractFramesProps): Promise { using input = new Input({ formats: ALL_FORMATS, source: new UrlSource(src), }); const [durationInSeconds, format, videoTrack] = await Promise.all([ input.computeDuration(), input.getFormat(), input.getPrimaryVideoTrack(), ]); if (!videoTrack) { throw new Error("未在输入中找到视频轨道"); } if (signal?.aborted) { throw new Error("已中止"); } const timestamps = typeof timestampsInSeconds === "function" ? await timestampsInSeconds({ track: { width: videoTrack.displayWidth, height: videoTrack.displayHeight, }, container: format.name, durationInSeconds, }) : timestampsInSeconds; if (timestamps.length === 0) { return; } if (signal?.aborted) { throw new Error("已中止"); } const sink = new VideoSampleSink(videoTrack); for await (using videoSample of sink.samplesAtTimestamps(timestamps)) { if (signal?.aborted) { break; } if (!videoSample) { continue; } onVideoSample(videoSample); } } ## 基本用法 在特定时间戳提取帧： tsx await extractFrames({ src: "https://remotion.media/video.mp4", timestampsInSeconds: [0, 1, 2, 3, 4], onVideoSample: (sample) => { const canvas = document.createElement("canvas"); canvas.width = sample.displayWidth; canvas.height = sample.displayHeight; const ctx = canvas.getContext("2d"); sample.draw(ctx!, 0, 0); }, }); ## 创建胶片条 使用 cal