SuperAPI AI 工具集

render-video

设计与创作

查看项目

更新于 10-16 08:05

技能介绍

用途:把 Helios composition 逐帧捕获并编码成视频文件(如 MP4),用于自动化视频制作或导出高质量动画。渲染在 Node.js 环境中通过 @helios-project/renderer 完成。

必要用法:先确保 composition 正在运行,渲染器需要一个可访问的 URL,本地可运行 npm run dev(例如 http://localhost:3000/composition.html),也可使用任何可访问的远程 URL。然后创建 render.js(或使用 ts-node 时创建 render.ts),从 @helios-project/renderer 导入 Renderer,配置宽度、高度、fps、时长或帧数、mode(canvas 或 dom)以及音频轨道、inputProps 等参数,调用 renderer.render(compositionUrl, outputPath, { onProgress }) 执行渲染。运行脚本可用 npx ts-node render.ts 或 node render.js。

主要能力:支持配置分辨率、帧率、时长或精确帧数;mode 可选 canvas(绘制到 canvas)或 dom(使用 CSS/HTML 元素的动画);支持音频轨道(路径、音量、偏移)与音频编码器(如 aac);支持 inputProps 传入动态内容;可通过 onProgress 显示进度,通过 tracePath 启用追踪调试。

适用场景:需要批量或自动化生成视频、导出高质量动画,以及希望把网页动画渲染成视频文件的流程。

限制与排错:渲染前 composition 服务器必须运行,否则报页面超时或连接被拒绝;出现黑屏或空视频时,确认 composition 中调用了 helios.bindToDocumentTimeline()、window.helios 已暴露,canvas 模式确保绘制到 canvas 元素、dom 模式确保元素可见;渲染卡住时检查浏览器控制台错误并可用 tracePath 开启追踪;音频问题需检查音频路径相对于脚本运行目录是否正确,dom 模式下若依赖 <audio> 等隐式音频,需确保相应元素存在于 DOM 中。费用、平台与性能细节暂未提供。