@hyperframes /引擎
可搜索的网页到视频渲染引擎建立在木偶和FFmpeg。
框架无关：适用于GSAP、Lottie、Three.js、CSS动画或任何实现 window.__hf 寻求协议。
安装
npm install @hyperframes/engine
要求: Node.js >= 22, Chrome/Chromium（由Puppeteer自动下载），FFmpeg
它是做什么的
引擎打开你的HTML组合在一个无头的Chrome实例，寻找逐帧使用Chrome的 HeadlessExperimental.beginFrame API，捕获屏幕截图，并使用FFmpeg将其编码为视频。
关键服务
| 服务 | 描述 |
|---|---|
| browserManager | 启动和汇集无头Chrome实例(chrome-headless-shell） |
| frameCapture | 管理捕获会话-查找，截图，缓冲区生命周期 |
| screenshotService | 基于beginfrastructure的捕获与CDP （Chrome DevTools协议） |
| chunkEncoder | FFmpeg编码与分块连接，GPU检测，快速启动 |
| streamingEncoder | 实时将帧传输到FFmpeg（磁盘上没有中间png） |
| audioMixer | 解析 <audio> 元素和混合音轨通过FFmpeg |
| videoFrameExtractor | 从 <video> 合成元素 |
| parallelCoordinator | 跨工作进程拆分帧范围 |
| 服务器 | 通过Hono向浏览器提供本地HTML文件 |
使用
import {
acquireBrowser,
createCaptureSession,
initializeSession,
captureFrame,
closeCaptureSession,
} from "@hyperframes/engine";
// 1. Launch browser
const browserLease = await acquireBrowser({ captureMode: "beginFrame" });
// 2. Open a capture session
const session = createCaptureSession({
browser: browserLease.browser,
url: "http://localhost:3000/my-composition.html",
width: 1920,
height: 1080,
fps: 30,
});
await initializeSession(session);
// 3. Capture frames
for (let i = 0; i < totalFrames; i++) {
await captureFrame(session, i, `/tmp/frames/frame-${i}.png`);
}
// 4. Clean up
await closeCaptureSession(session);
await browserLease.release();
大多数用户应该使用 @hyperframes/producer 或者是 hyperframes 命令行，而不是直接调用引擎。
文档
完整的文档: hyperframes.heygen.com/packages/engine
相关的包
@hyperframes/core-类型，解析器，帧适配器@hyperframes/producer-在此引擎上构建的高级渲染管道hyperframes- - - - - - CLI