Skip to main content
Hyperframes 提供了两个官方部署模板，将组合包装在小型 Web 应用程序中：浏览器内预览和生成 MP4 服务器端的 /api/render 端点。两者都是开源的 Apache-2.0，并且可以通过一个按钮进行部署。
模板计算贮存部署
VercelVercel 沙箱 (Firecracker microVM)Vercel Blobvercel.com/templates/ai/hyperframes-on-vercel
CloudflareCloudflare 容器（Workers + 持久对象）R2存储库自述文件中的一键按钮
两个模板使用相同的形状：
  • 通过 <hyperframes-player> Web 组件在浏览器中预览捆绑的 ui-3d-reveal 组合。
  • 通过发布到 /api/render 渲染 为 MP4。处理程序将合成发送到预先安装了 Chromium、FFmpeg 和 hyperframes 的沙盒运行时，然后将 MP4 流式传输回对象存储并返回公共 URL。
  • 本地创作，部署预览+渲染API。组合仍然使用 npx hyperframes init 在您的计算机上构建，然后放入模板的 public/compositions/ 目录中。

​
选择模板

如果您已在 Vercel 上部署、想要零配置 Blob 存储或想要重用 Vercel 的 CI/预览环境，请选择此选项。使用 Vercel 部署你得到什么
  • 具有 <hyperframes-player> 预览和 POST /api/render 路线的 Next.js 应用程序。
  • 在 next build 期间构建的预烘焙 Vercel Sandbox 快照 — 冷渲染会跳过 Chromium/FFmpeg 安装并在大约 100 毫秒内从快照恢复。
  • 在部署时自动配置的 Vercel Blob 存储。 BLOB_READ_WRITE_TOKEN 已为您注入。
表现渲染在 standard-4 (4 vCPU) 上运行。使用 --workers auto，三个并行 Chrome 工作线程比单个工作线程显着缩短了渲染时间。具体渲染时间取决于合成长度、复杂性和资源大小。定价Vercel Pro 计划包括每月的 Sandbox 积分。请参阅 Vercel 沙盒定价，了解当前每 vCPU 和每 GB 费率以及最新的信用额度。
Vercel Functions 上限为 300 秒，压缩包大小为 50 MB，不适合 Chromium + FFmpeg。该模板专门使用 Vercel Sandbox，因为它是专门为此工作负载构建的原语 - 运行时间长达 5 小时，每个渲染最多 8 个 vCPU。

​
建筑学

这两个模板都遵循相同的流程：浏览器在本地播放预览，然后 POST 到渲染端点，该端点委托给带有 Chromium + FFmpeg 的沙盒运行时。 
 Browser                    Edge / Function              Sandboxed renderer
┌──────────────────┐       ┌────────────────────┐       ┌──────────────────────────┐
│ <hyperframes-    │ ────▶ │ /api/render        │ ────▶ │ hyperframes render       │
│  player>         │       │  ship composition  │       │  (Chromium + FFmpeg,     │
│ preview iframe   │       │  → renderer        │       │   pre-installed)         │
│                  │ ◀──── │  ← stream MP4      │ ◀──── │                          │
│                  │  url  │  → upload to blob  │  mp4  │                          │
└──────────────────┘       └────────────────────┘       └──────────────────────────┘
                                    │
                                    └─▶ Vercel Blob / Cloudflare R2
这两个模板中的关键成本节省器是预烘焙渲染器。安装 Chromium 系统库加上 chrome-headless-shell 需要 30-60 秒，这将主导每个冷渲染。 Vercel 的模板在构建时对沙箱进行快照； Cloudflare 的模板将所有内容烘焙到容器镜像中。两者都可以在几毫秒内恢复，并让您将整个请求预算用于实际渲染。

​
交换构图

两个模板均附带一个捆绑组合 (ui-3d-reveal)。使用您自己的：
1

本地创作

组合是 HTML - 使用 CLI 在您的计算机上创作它们：
Terminal
npx hyperframes init my-video
cd my-video
npx hyperframes preview
2

将包放入模板中

将您的作品复制到 public/compositions/<your-name>/ 中。
3

将模板指向它

  • Vercel：编辑 lib/preview.ts 顶部的 PREVIEW_COMPOSITION_DIR 以及 app/page.tsx 中的尺寸（如果不是 1920×1080）。
  • Cloudflare：运行 npm run deploy 时设置 PREVIEW_COMPOSITION_DIR=compositions/<your-name>，或编辑 scripts/build.mjs 中的默认值。如果需要，更新 public/index.html 中的玩家尺寸。
4

部署

Terminal
# Vercel
vercel deploy

# Cloudflare
npm run deploy

​
何时使用模板而不是自己创建

模板针对预览 UI 后面的单个渲染端点进行了优化。它们是运行托管 Hyperframes 渲染 API 的最快方法。如果您需要：
  • 具有重试、重复数据删除或优先级的 渲染队列 - 从模板开始，然后添加您自己的队列（例如 Vercel 队列、Cloudflare 队列、SQS）。
  • 多租户渲染与每用户合成上传 - 从模板开始，用运行时获取的合成替换捆绑的合成。
  • 自托管渲染 - 请参阅渲染指南 并在您自己的基础设施上运行 hyperframes render --docker。
对于其他一切，模板是建议的起点。

​
下一步

渲染

在本地或 Docker 中渲染合成

播放器套餐

在任何 HTML 页面中嵌入 <hyperframes-player>

维塞尔模板

Error 500 (Server Error)!!1500.That’s an error.There was an error. Please try again later.That’s all we know.

Cloudflare 模板

Error 500 (Server Error)!!1500.That’s an error.There was an error. Please try again later.That’s all we know.