OpenMontage 中基于 Mediabunny 的视频抽帧实战按时间戳抽取缩略图、胶片条与单帧画面【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本文是一篇聚焦 OpenMontage 仓库内remotion-best-practices 技能规则extract-frames的技术指南。该规则给出了一段可在任意 Remotion / React 工程中直接复制的extractFrames()工具函数它借助 Mediabunny 在浏览器端按指定时间戳抽取视频帧用于生成封面缩略图、多帧胶片条filmstrip或对单帧画面做进一步处理。读完本文你将理解该函数的设计类型签名、资源管理、元数据获取、异步迭代抽帧、取消与超时掌握固定时间戳抽帧、依据视频元数据动态计算时间戳生成胶片条、以及用AbortSignal/Promise.race实现可控取消的完整实战写法并能把这些能力接入你基于 Remotion 的智能视频生成管线。规则文件在仓库中的定位OpenMontage 将针对视频/动效制作各个细分领域的实操知识沉淀为一组面向 Agent 的技能skill与规则rule文件。.agents/skills/remotion-best-practices就是专门为用 Remotion 创作视频准备的技能包它用一篇 SKILL.md 作为索引按子领域拆分了几十个独立规则文件例如字幕、音频可视化、转场、字体、画中画计时、音量、Lottie、图表等。本主题对应的规则文件是 .agents/skills/remotion-best-practices/rules/extract-frames.md它的职责在技能清单中被一句话概括为Extract frames from videos at specific timestamps using Mediabunny用 Mediabunny 在指定时间戳处抽取视频帧。该文件同时被镜像到.claude/skills/remotion-best-practices/rules/extract-frames.md两份内容完全一致分别供不同 Agent 配置.agents与.claude目录树在需要编写 Remotion 抽帧相关代码时按需加载。之所以需要这样一份按时间戳抽帧的规则是因为 OpenMontage 这类智能体视频制作系统在实践中会反复遇到两类需求产出预览/过程资产为生成好的成片或中间剪辑快速产出封面缩略图、多帧胶片条供编排与交付环节使用在浏览器侧精读视频抽出的单帧会进入后续的画面分析构图、颜色、字幕压画检查或作为进一步的视觉输入而不是每次都把整段视频拉回处理。规则文件的元信息里也明确标注了它的适用标签frames, extract, video, thumbnail, filmstrip, canvas——即帧、抽取、视频、缩略图、胶片条、Canvas。注如果你要处理的是与 Remotion 合成时间线强相关的媒体能力本技能包内还有一整套同源规则可配合查阅例如 rules/videos.md嵌入视频的裁剪/音量/速度/循环、rules/can-decode.md用 Mediabunny 判断视频能否被解码、rules/get-video-duration.md、rules/get-video-dimensions.md 等。而抽帧能力同样建立在 Mediabunny 之上与这些只读元数据类能力属于同一技术族。extractFrames()函数全景规则文件首先给出的是一段可以直接复制进任意工程的完整实现。它把打开视频 → 读元数据 → 按时间戳取帧 → 回调交付每一帧整条链路封装为一个 Promise 函数。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, ) Promisenumber[] | number[]; export type ExtractFramesProps { src: string; timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn; onVideoSample: (sample: VideoSample) void; signal?: AbortSignal; }; export async function extractFrames({ src, timestampsInSeconds, onVideoSample, signal, }: ExtractFramesProps): Promisevoid { 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(No video track found in the input); } if (signal?.aborted) { throw new Error(Aborted); } 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(Aborted); } const sink new VideoSampleSink(videoTrack); for await (using videoSample of sink.samplesAtTimestamps(timestamps)) { if (signal?.aborted) { break; } if (!videoSample) { continue; } onVideoSample(videoSample); } }关键 API 拆解new Input({ formats, source })UrlSource通过远程 URLHTTP(S) 视频地址构造一个媒体输入。formats: ALL_FORMATS表示尝试用全部受支持的容器格式去解析该来源。代码中用using声明输入对象这会让Input在作用域结束时自动执行资源释放见下文显式资源管理。computeDuration()/getFormat()/getPrimaryVideoTrack()三条异步只读查询被放进同一个Promise.all并行执行分别拿到视频时长秒、容器格式format.name形如mp4与主视频轨。拿到的是带解码能力的轨道句柄因此后续可以定位关键帧。空轨道与取消的早期检查videoTrack为空直接抛错在解码开始前就检查signal?.aborted避免在已经取消的场景下白做昂贵的解码工作。这个先检查、后开工的顺序是抽帧这类高成本操作的重要写法。时间戳的来源可以是数组也可以是一次性回调若传入的是函数会以{ track, container, durationInSeconds }为参数调用让你能依据真实视频分辨率、容器与时长去反推需要哪些时间戳——这正是生成刚好铺满画布的胶片条这类需求的基础。VideoSampleSink(videoTrack)samplesAtTimestamps(timestamps)Mediabunny 的关键帧定位器会基于轨道含解码能力在指定时间戳集合处产出视频样本并返回一个异步可迭代对象。因此外层使用for await (...)逐个消费而不是一次性把全部帧塞进内存——视频很长、时间戳很多时内存友好。onVideoSample(sample)每一帧VideoSample都通过该回调交付。VideoSample暴露displayWidth、displayHeight以像素为单位展示宽度/高度与draw(ctx, x, y)把当前帧绘制到 Canvas 2D 上下文是帧 → 画面的出口。空时间戳短路若解析出的时间戳数组为空函数直接返回、不做任何解码属于廉价而实用的边界保护。循环内的取消检查每次取到样本后先检查signal?.aborted命中则break使取消是及时且优雅的——不会卡在某个长解码里无响应。显式资源管理using带来的编译要求函数实现里出现了三处usingusing input ...、for await (using videoSample of ...)、以及在调用侧using frame sample;。这是 JavaScript 的显式资源管理Explicit Resource Management语法被using声明的对象若实现了Symbol.dispose异步版本为Symbol.asyncDispose会在离开作用域时被自动释放。它的收益是无论正常结束还是中途抛错Input/VideoSample占用的解码资源都能被确定性回收不会长期悬挂占用浏览器媒体资源。因此把这段代码复制进自己的工程时需要确保编译目标支持该语法TypeScript 侧需要5.2 及以上的编译器版本且tsconfig.json的lib/target配置覆盖esnext.disposable相关声明实践中通常把target提到ES2022 并让 TS 走较新的 DOM/ES lib或按你的构建链显式引入相应 lib运行时侧浏览器与对应转译/打包产物需要支持资源管理语义现代 Chromium 系与 Node 22 等已原生支持老环境则要依赖构建工具的降级处理。如果不想引入using一个可行改法是显式try / finally并在finally中手工释放资源规则文件之所以坚持using正是因为该技能包面向的是给 Agent 的、现代且健壮的参考实现。基本用法按固定时间戳抽取并绘制到 Canvas这是最直接的调用方式——给出一个硬编码的时间戳数组逐个把对应帧画到新建的 Canvas 上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); }, });这段代码揭示了几条值得记住的约定每帧回调里都要自建 Canvas回调并不负责把帧存到哪交付的只是一个可绘制的样本新建 Canvas 并以sample.displayWidth / sample.displayHeight设置宽高可以保证画面不缩放、比例无损。draw(ctx, 0, 0)从左上角原点铺满整块画布。时间戳单位是秒[0, 1, 2, 3, 4]表示抽取第 0、1、2、3、4 秒处的帧。若你的时间基准来自 Remotion 的帧号frame记得先换算成秒如frame / fps。时间戳不必有序或去重Mediabunny 按请求逐帧交付实际取到哪些位置由解码器根据时间戳就近定位决定。之后你可以把画布导出为 Blob如canvas.toBlob(...)得到 PNG/JPEG用于缩略图或直接把canvas节点插入 DOM 预览。这套定时取帧 → Canvas 绘制 → 导出/展示的链路正好覆盖规则元标签里的thumbnail、canvas两类场景例如为一条刚渲染完的成片生成若干时间点上的封面候选图。生成胶片条Filmstrip用回调按视频元数据动态算帧当目标不是几个固定时刻而是我要在固定宽高的画布里铺满一段连续内容的 N 帧时就需要先知道视频的宽高比再反推能放几张、每张取哪个时刻。timestampsInSeconds支持函数形态正是为此设计const canvasWidth 500; const canvasHeight 80; const fromSeconds 0; const toSeconds 10; await extractFrames({ src: https://remotion.media/video.mp4, timestampsInSeconds: async ({ track, durationInSeconds }) { const aspectRatio track.width / track.height; const amountOfFramesFit Math.ceil( canvasWidth / (canvasHeight * aspectRatio), ); const segmentDuration toSeconds - fromSeconds; const timestamps: number[] []; for (let i 0; i amountOfFramesFit; i) { timestamps.push( fromSeconds (segmentDuration / amountOfFramesFit) * (i 0.5), ); } return timestamps; }, onVideoSample: (sample) { console.log(Frame at ${sample.timestamp}s); const canvas document.createElement(canvas); canvas.width sample.displayWidth; canvas.height sample.displayHeight; const ctx canvas.getContext(2d); sample.draw(ctx!, 0, 0); }, });这里核心是布局驱动的动态时间戳算法可容纳帧数canvasHeight * aspectRatio是按当前视频宽高比、在画布高度 80px 内一帧应有的宽度canvasWidth / 该宽度向上取整即得横排能放几帧。竖屏视频aspectRatio 1与横屏视频在此处会自动给出不同的帧数无需手写。时间戳位置把[fromSeconds, toSeconds]这里是 0–10s这段区间均分为 N 段取每段的中点 0.5偏移作为取帧时刻避免取到段落首尾的切帧模糊画面。元数据的其他来源回调还收到container如mp4与durationInSeconds。前者可用来对不同容器做格式差异处理后者可以帮你把toSeconds兜底到视频实际长度例如Math.min(toSeconds, durationInSeconds)防止对超短视频请求出界时间戳。回调返回值类型允许是number[]或Promisenumber[]函数本身即可async因此异步计算布局也是被支持的。sample.timestamp则让你在交付时知道这一帧实际来自视频的哪个时刻——它不一定严格等于请求值因为解码器是按最近可解帧就近取的。对 OpenMontage 的使用者而言胶片条最常见的两种用途是剪辑前的素材速览条一眼看清整段 10 秒内画面演变与交付环节的过程可视化。用 AbortSignal 优雅取消抽帧是重解码操作在长视频、弱网、用户离开页面等场景下都可能需要中途叫停。extractFrames()透传了一个可选的signal并在解码前后与每帧交付前都检查了它。规则文件给出了带超时的取消示例const controller new AbortController(); setTimeout(() controller.abort(), 5000); try { await extractFrames({ src: https://remotion.media/video.mp4, timestampsInSeconds: [0, 1, 2, 3, 4], onVideoSample: (sample) { using frame sample; const canvas document.createElement(canvas); canvas.width frame.displayWidth; canvas.height frame.displayHeight; const ctx canvas.getContext(2d); frame.draw(ctx!, 0, 0); }, signal: controller.signal, }); console.log(Frame extraction complete!); } catch (error) { console.error(Frame extraction was aborted or failed:, error); }两个值得记录的要点取消与异常的边界5 秒后controller.abort()。若抽帧在取消前已完成则打印 Frame extraction complete!否则extractFrames内部会在下一次检查点抛出 Aborted或提前 break错误会进入catch分支。规则文件选择用throw new Error(Aborted)表达已被取消因此调用方要把取消当作错误路径处理。用using管理帧这里出现了using frame sample;——每帧在回调结束即自动释放避免回调积压大量未释放的VideoSample。这与函数内部用using管理Input是同一套资源纪律谁打开、谁释放。AbortSignal 的真正价值在于它可以被外部事件驱动而不限于计时器你可以把组件卸载用户点击停止新的抽帧任务抢占旧的等任意信号源接进来让取消成为协作式的、可组合的机制。用 Promise.race 实现超时兜底setTimeout abort的缺点是一旦函数内部因为某种原因卡死比如网络资源悬挂、解码器异常abort()也许不会被及时消费外层await就可能迟迟不返回。规则文件给出的第二个模式用Promise.race把超时提升为第一公民——无论抽帧内部如何只要超时计时器先落定调用方必然得到拒绝const controller new AbortController(); const timeoutPromise new Promisenever((_, reject) { const timeoutId setTimeout(() { controller.abort(); reject(new Error(Frame extraction timed out after 10 seconds)); }, 10000); controller.signal.addEventListener(abort, () clearTimeout(timeoutId), { once: true, }); }); try { await Promise.race([ extractFrames({ src: https://remotion.media/video.mp4, timestampsInSeconds: [0, 1, 2, 3, 4], onVideoSample: (sample) { using frame sample; const canvas document.createElement(canvas); canvas.width frame.displayWidth; canvas.height frame.displayHeight; const ctx canvas.getContext(2d); frame.draw(ctx!, 0, 0); }, signal: controller.signal, }), timeoutPromise, ]); console.log(Frame extraction complete!); } catch (error) { console.error(Frame extraction was aborted or failed:, error); }这个版本的三个机关相互配合计时器负责必达10 秒一到立即controller.abort()请求抽帧侧配合取消并reject让Promise.race必然抛错。abort 监听负责清理一旦抽帧侧因为任何原因触发signal的 abort注意监听的是任意来源的 abort不止是本次超时就clearTimeout(timeoutId)防止任务已经正常结束时残留一个 10 秒后的幽灵拒绝——这能避免对已完成的 Promise 做无意义的二次 reject 噪音。Promise.race负责裁决取抽帧与超时两者中先落定的结果。正常抽完 → 打印完成先超时 → 进入 catch。如果去掉第 2 点的监听清理最坏情况是抽帧在第 2 秒就完成、打印了 complete但第 10 秒那个reject依然会对一个已经 settle 的Promise.race造成不可见的副作用unhandled rejection 风险。所以清理计时器与取消信号是配套的规则文件的写法堪称完整范式。两套取消方案怎么选一句话概括只想要到点就叫停用 AbortSignal 版本想要无论内部状态如何、超时都必然失败返回用 Promise.race 版本。二者也常常叠加使用外部原因 abort 超时兜底。工程化要点与适用前提最后把这份规则放进 OpenMontage 的真实工程语境里有几点值得说明。第一这段代码的运行环境是有 DOM/Cavans 能力的宿主。因为抽帧结果的唯一出口是sample.draw(ctx, ...)到 Canvas 2D 上下文。在 OpenMontage 的组成结构中与 Remotion 有关的前端/浏览器侧工程是 remotion-composer——一个基于 Remotion v4 系列remotion: ^4.0.484并依赖同版本的remotion/media、remotion/captions、remotion/transitions等的Remotion 合成渲染器用于把智能生成的场景配置渲染成动画讲解视频。若你需要在渲染预览/过程检查环节对生成的视频做缩略图与胶片条处理规则里的函数可以直接融入这类工程而 Mediabunny 并非remotion-composer当前dependencies中声明的直接依赖若要在新工程中启用本规则需自行引入mediabunny包。第二这是一份给 Agent 写代码时参考的规则而非 OpenMontage 运行时必需模块。仓库把这类面向模型的知识按技能组织remotion-best-practices就是其中一员。同一目录里还有大量主题平行的规则动画、字幕、转场、测量文本 等Agent 生成 Remotion 代码时应先由 SKILL.md 按需分发到对应规则——需要抽帧时就加载本文对应的extract-frames.md。第三注意命名空间与资源纪律。extractFrames与 Mediabunny 的Input、UrlSource、VideoSampleSink、VideoSample是直接 import 的顶层符号整段代码可复制、可改名、可参数化但要保证using语法的编译支持、在每帧回调中及时消费需要留存就复制到自己的 Canvas / ImageData / Blob并总是把signal从 UI 生命周期或任务调度处传入才能让抽帧在长任务中保持可取消、可回收、不泄漏。把以上三点落实你就在 OpenMontage / Remotion 工程里获得了一套按需、可控、随时可中止的浏览器端视频抽帧能力——小到单张缩略图大到几十帧的连续胶片条都可以用同一份extractFrames()契约优雅地完成。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
OpenMontage 中基于 Mediabunny 的视频抽帧实战按时间戳抽取缩略图、胶片条与单帧画面【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage本文是一篇聚焦 OpenMontage 仓库内remotion-best-practices 技能规则extract-frames的技术指南。该规则给出了一段可在任意 Remotion / React 工程中直接复制的extractFrames()工具函数它借助 Mediabunny 在浏览器端按指定时间戳抽取视频帧用于生成封面缩略图、多帧胶片条filmstrip或对单帧画面做进一步处理。读完本文你将理解该函数的设计类型签名、资源管理、元数据获取、异步迭代抽帧、取消与超时掌握固定时间戳抽帧、依据视频元数据动态计算时间戳生成胶片条、以及用AbortSignal/Promise.race实现可控取消的完整实战写法并能把这些能力接入你基于 Remotion 的智能视频生成管线。规则文件在仓库中的定位OpenMontage 将针对视频/动效制作各个细分领域的实操知识沉淀为一组面向 Agent 的技能skill与规则rule文件。.agents/skills/remotion-best-practices就是专门为用 Remotion 创作视频准备的技能包它用一篇 SKILL.md 作为索引按子领域拆分了几十个独立规则文件例如字幕、音频可视化、转场、字体、画中画计时、音量、Lottie、图表等。本主题对应的规则文件是 .agents/skills/remotion-best-practices/rules/extract-frames.md它的职责在技能清单中被一句话概括为Extract frames from videos at specific timestamps using Mediabunny用 Mediabunny 在指定时间戳处抽取视频帧。该文件同时被镜像到.claude/skills/remotion-best-practices/rules/extract-frames.md两份内容完全一致分别供不同 Agent 配置.agents与.claude目录树在需要编写 Remotion 抽帧相关代码时按需加载。之所以需要这样一份按时间戳抽帧的规则是因为 OpenMontage 这类智能体视频制作系统在实践中会反复遇到两类需求产出预览/过程资产为生成好的成片或中间剪辑快速产出封面缩略图、多帧胶片条供编排与交付环节使用在浏览器侧精读视频抽出的单帧会进入后续的画面分析构图、颜色、字幕压画检查或作为进一步的视觉输入而不是每次都把整段视频拉回处理。规则文件的元信息里也明确标注了它的适用标签frames, extract, video, thumbnail, filmstrip, canvas——即帧、抽取、视频、缩略图、胶片条、Canvas。注如果你要处理的是与 Remotion 合成时间线强相关的媒体能力本技能包内还有一整套同源规则可配合查阅例如 rules/videos.md嵌入视频的裁剪/音量/速度/循环、rules/can-decode.md用 Mediabunny 判断视频能否被解码、rules/get-video-duration.md、rules/get-video-dimensions.md 等。而抽帧能力同样建立在 Mediabunny 之上与这些只读元数据类能力属于同一技术族。extractFrames()函数全景规则文件首先给出的是一段可以直接复制进任意工程的完整实现。它把打开视频 → 读元数据 → 按时间戳取帧 → 回调交付每一帧整条链路封装为一个 Promise 函数。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, ) Promisenumber[] | number[]; export type ExtractFramesProps { src: string; timestampsInSeconds: number[] | ExtractFramesTimestampsInSecondsFn; onVideoSample: (sample: VideoSample) void; signal?: AbortSignal; }; export async function extractFrames({ src, timestampsInSeconds, onVideoSample, signal, }: ExtractFramesProps): Promisevoid { 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(No video track found in the input); } if (signal?.aborted) { throw new Error(Aborted); } 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(Aborted); } const sink new VideoSampleSink(videoTrack); for await (using videoSample of sink.samplesAtTimestamps(timestamps)) { if (signal?.aborted) { break; } if (!videoSample) { continue; } onVideoSample(videoSample); } }关键 API 拆解new Input({ formats, source })UrlSource通过远程 URLHTTP(S) 视频地址构造一个媒体输入。formats: ALL_FORMATS表示尝试用全部受支持的容器格式去解析该来源。代码中用using声明输入对象这会让Input在作用域结束时自动执行资源释放见下文显式资源管理。computeDuration()/getFormat()/getPrimaryVideoTrack()三条异步只读查询被放进同一个Promise.all并行执行分别拿到视频时长秒、容器格式format.name形如mp4与主视频轨。拿到的是带解码能力的轨道句柄因此后续可以定位关键帧。空轨道与取消的早期检查videoTrack为空直接抛错在解码开始前就检查signal?.aborted避免在已经取消的场景下白做昂贵的解码工作。这个先检查、后开工的顺序是抽帧这类高成本操作的重要写法。时间戳的来源可以是数组也可以是一次性回调若传入的是函数会以{ track, container, durationInSeconds }为参数调用让你能依据真实视频分辨率、容器与时长去反推需要哪些时间戳——这正是生成刚好铺满画布的胶片条这类需求的基础。VideoSampleSink(videoTrack)samplesAtTimestamps(timestamps)Mediabunny 的关键帧定位器会基于轨道含解码能力在指定时间戳集合处产出视频样本并返回一个异步可迭代对象。因此外层使用for await (...)逐个消费而不是一次性把全部帧塞进内存——视频很长、时间戳很多时内存友好。onVideoSample(sample)每一帧VideoSample都通过该回调交付。VideoSample暴露displayWidth、displayHeight以像素为单位展示宽度/高度与draw(ctx, x, y)把当前帧绘制到 Canvas 2D 上下文是帧 → 画面的出口。空时间戳短路若解析出的时间戳数组为空函数直接返回、不做任何解码属于廉价而实用的边界保护。循环内的取消检查每次取到样本后先检查signal?.aborted命中则break使取消是及时且优雅的——不会卡在某个长解码里无响应。显式资源管理using带来的编译要求函数实现里出现了三处usingusing input ...、for await (using videoSample of ...)、以及在调用侧using frame sample;。这是 JavaScript 的显式资源管理Explicit Resource Management语法被using声明的对象若实现了Symbol.dispose异步版本为Symbol.asyncDispose会在离开作用域时被自动释放。它的收益是无论正常结束还是中途抛错Input/VideoSample占用的解码资源都能被确定性回收不会长期悬挂占用浏览器媒体资源。因此把这段代码复制进自己的工程时需要确保编译目标支持该语法TypeScript 侧需要5.2 及以上的编译器版本且tsconfig.json的lib/target配置覆盖esnext.disposable相关声明实践中通常把target提到ES2022 并让 TS 走较新的 DOM/ES lib或按你的构建链显式引入相应 lib运行时侧浏览器与对应转译/打包产物需要支持资源管理语义现代 Chromium 系与 Node 22 等已原生支持老环境则要依赖构建工具的降级处理。如果不想引入using一个可行改法是显式try / finally并在finally中手工释放资源规则文件之所以坚持using正是因为该技能包面向的是给 Agent 的、现代且健壮的参考实现。基本用法按固定时间戳抽取并绘制到 Canvas这是最直接的调用方式——给出一个硬编码的时间戳数组逐个把对应帧画到新建的 Canvas 上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); }, });这段代码揭示了几条值得记住的约定每帧回调里都要自建 Canvas回调并不负责把帧存到哪交付的只是一个可绘制的样本新建 Canvas 并以sample.displayWidth / sample.displayHeight设置宽高可以保证画面不缩放、比例无损。draw(ctx, 0, 0)从左上角原点铺满整块画布。时间戳单位是秒[0, 1, 2, 3, 4]表示抽取第 0、1、2、3、4 秒处的帧。若你的时间基准来自 Remotion 的帧号frame记得先换算成秒如frame / fps。时间戳不必有序或去重Mediabunny 按请求逐帧交付实际取到哪些位置由解码器根据时间戳就近定位决定。之后你可以把画布导出为 Blob如canvas.toBlob(...)得到 PNG/JPEG用于缩略图或直接把canvas节点插入 DOM 预览。这套定时取帧 → Canvas 绘制 → 导出/展示的链路正好覆盖规则元标签里的thumbnail、canvas两类场景例如为一条刚渲染完的成片生成若干时间点上的封面候选图。生成胶片条Filmstrip用回调按视频元数据动态算帧当目标不是几个固定时刻而是我要在固定宽高的画布里铺满一段连续内容的 N 帧时就需要先知道视频的宽高比再反推能放几张、每张取哪个时刻。timestampsInSeconds支持函数形态正是为此设计const canvasWidth 500; const canvasHeight 80; const fromSeconds 0; const toSeconds 10; await extractFrames({ src: https://remotion.media/video.mp4, timestampsInSeconds: async ({ track, durationInSeconds }) { const aspectRatio track.width / track.height; const amountOfFramesFit Math.ceil( canvasWidth / (canvasHeight * aspectRatio), ); const segmentDuration toSeconds - fromSeconds; const timestamps: number[] []; for (let i 0; i amountOfFramesFit; i) { timestamps.push( fromSeconds (segmentDuration / amountOfFramesFit) * (i 0.5), ); } return timestamps; }, onVideoSample: (sample) { console.log(Frame at ${sample.timestamp}s); const canvas document.createElement(canvas); canvas.width sample.displayWidth; canvas.height sample.displayHeight; const ctx canvas.getContext(2d); sample.draw(ctx!, 0, 0); }, });这里核心是布局驱动的动态时间戳算法可容纳帧数canvasHeight * aspectRatio是按当前视频宽高比、在画布高度 80px 内一帧应有的宽度canvasWidth / 该宽度向上取整即得横排能放几帧。竖屏视频aspectRatio 1与横屏视频在此处会自动给出不同的帧数无需手写。时间戳位置把[fromSeconds, toSeconds]这里是 0–10s这段区间均分为 N 段取每段的中点 0.5偏移作为取帧时刻避免取到段落首尾的切帧模糊画面。元数据的其他来源回调还收到container如mp4与durationInSeconds。前者可用来对不同容器做格式差异处理后者可以帮你把toSeconds兜底到视频实际长度例如Math.min(toSeconds, durationInSeconds)防止对超短视频请求出界时间戳。回调返回值类型允许是number[]或Promisenumber[]函数本身即可async因此异步计算布局也是被支持的。sample.timestamp则让你在交付时知道这一帧实际来自视频的哪个时刻——它不一定严格等于请求值因为解码器是按最近可解帧就近取的。对 OpenMontage 的使用者而言胶片条最常见的两种用途是剪辑前的素材速览条一眼看清整段 10 秒内画面演变与交付环节的过程可视化。用 AbortSignal 优雅取消抽帧是重解码操作在长视频、弱网、用户离开页面等场景下都可能需要中途叫停。extractFrames()透传了一个可选的signal并在解码前后与每帧交付前都检查了它。规则文件给出了带超时的取消示例const controller new AbortController(); setTimeout(() controller.abort(), 5000); try { await extractFrames({ src: https://remotion.media/video.mp4, timestampsInSeconds: [0, 1, 2, 3, 4], onVideoSample: (sample) { using frame sample; const canvas document.createElement(canvas); canvas.width frame.displayWidth; canvas.height frame.displayHeight; const ctx canvas.getContext(2d); frame.draw(ctx!, 0, 0); }, signal: controller.signal, }); console.log(Frame extraction complete!); } catch (error) { console.error(Frame extraction was aborted or failed:, error); }两个值得记录的要点取消与异常的边界5 秒后controller.abort()。若抽帧在取消前已完成则打印 Frame extraction complete!否则extractFrames内部会在下一次检查点抛出 Aborted或提前 break错误会进入catch分支。规则文件选择用throw new Error(Aborted)表达已被取消因此调用方要把取消当作错误路径处理。用using管理帧这里出现了using frame sample;——每帧在回调结束即自动释放避免回调积压大量未释放的VideoSample。这与函数内部用using管理Input是同一套资源纪律谁打开、谁释放。AbortSignal 的真正价值在于它可以被外部事件驱动而不限于计时器你可以把组件卸载用户点击停止新的抽帧任务抢占旧的等任意信号源接进来让取消成为协作式的、可组合的机制。用 Promise.race 实现超时兜底setTimeout abort的缺点是一旦函数内部因为某种原因卡死比如网络资源悬挂、解码器异常abort()也许不会被及时消费外层await就可能迟迟不返回。规则文件给出的第二个模式用Promise.race把超时提升为第一公民——无论抽帧内部如何只要超时计时器先落定调用方必然得到拒绝const controller new AbortController(); const timeoutPromise new Promisenever((_, reject) { const timeoutId setTimeout(() { controller.abort(); reject(new Error(Frame extraction timed out after 10 seconds)); }, 10000); controller.signal.addEventListener(abort, () clearTimeout(timeoutId), { once: true, }); }); try { await Promise.race([ extractFrames({ src: https://remotion.media/video.mp4, timestampsInSeconds: [0, 1, 2, 3, 4], onVideoSample: (sample) { using frame sample; const canvas document.createElement(canvas); canvas.width frame.displayWidth; canvas.height frame.displayHeight; const ctx canvas.getContext(2d); frame.draw(ctx!, 0, 0); }, signal: controller.signal, }), timeoutPromise, ]); console.log(Frame extraction complete!); } catch (error) { console.error(Frame extraction was aborted or failed:, error); }这个版本的三个机关相互配合计时器负责必达10 秒一到立即controller.abort()请求抽帧侧配合取消并reject让Promise.race必然抛错。abort 监听负责清理一旦抽帧侧因为任何原因触发signal的 abort注意监听的是任意来源的 abort不止是本次超时就clearTimeout(timeoutId)防止任务已经正常结束时残留一个 10 秒后的幽灵拒绝——这能避免对已完成的 Promise 做无意义的二次 reject 噪音。Promise.race负责裁决取抽帧与超时两者中先落定的结果。正常抽完 → 打印完成先超时 → 进入 catch。如果去掉第 2 点的监听清理最坏情况是抽帧在第 2 秒就完成、打印了 complete但第 10 秒那个reject依然会对一个已经 settle 的Promise.race造成不可见的副作用unhandled rejection 风险。所以清理计时器与取消信号是配套的规则文件的写法堪称完整范式。两套取消方案怎么选一句话概括只想要到点就叫停用 AbortSignal 版本想要无论内部状态如何、超时都必然失败返回用 Promise.race 版本。二者也常常叠加使用外部原因 abort 超时兜底。工程化要点与适用前提最后把这份规则放进 OpenMontage 的真实工程语境里有几点值得说明。第一这段代码的运行环境是有 DOM/Cavans 能力的宿主。因为抽帧结果的唯一出口是sample.draw(ctx, ...)到 Canvas 2D 上下文。在 OpenMontage 的组成结构中与 Remotion 有关的前端/浏览器侧工程是 remotion-composer——一个基于 Remotion v4 系列remotion: ^4.0.484并依赖同版本的remotion/media、remotion/captions、remotion/transitions等的Remotion 合成渲染器用于把智能生成的场景配置渲染成动画讲解视频。若你需要在渲染预览/过程检查环节对生成的视频做缩略图与胶片条处理规则里的函数可以直接融入这类工程而 Mediabunny 并非remotion-composer当前dependencies中声明的直接依赖若要在新工程中启用本规则需自行引入mediabunny包。第二这是一份给 Agent 写代码时参考的规则而非 OpenMontage 运行时必需模块。仓库把这类面向模型的知识按技能组织remotion-best-practices就是其中一员。同一目录里还有大量主题平行的规则动画、字幕、转场、测量文本 等Agent 生成 Remotion 代码时应先由 SKILL.md 按需分发到对应规则——需要抽帧时就加载本文对应的extract-frames.md。第三注意命名空间与资源纪律。extractFrames与 Mediabunny 的Input、UrlSource、VideoSampleSink、VideoSample是直接 import 的顶层符号整段代码可复制、可改名、可参数化但要保证using语法的编译支持、在每帧回调中及时消费需要留存就复制到自己的 Canvas / ImageData / Blob并总是把signal从 UI 生命周期或任务调度处传入才能让抽帧在长任务中保持可取消、可回收、不泄漏。把以上三点落实你就在 OpenMontage / Remotion 工程里获得了一套按需、可控、随时可中止的浏览器端视频抽帧能力——小到单张缩略图大到几十帧的连续胶片条都可以用同一份extractFrames()契约优雅地完成。【免费下载链接】OpenMontageWorlds first open-source, agentic video production system. 12 production pipelines, 100 tools, 700 agent skill and production-knowledge files. Turn your AI coding assistant into a full video production studio.项目地址: https://gitcode.com/GitHub_Trending/op/OpenMontage创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
到底创建了几个对象？)
