部署
Hyperframes 提供两个官方部署模板，将合成包装在一个小型 Web 应用中：一个浏览器内预览和一个在服务端生成 MP4 的 /api/render 端点。两者都是开源的（Apache-2.0），可通过单个按钮部署。
| 模板 | 计算 | 存储 | 部署 |
|---|---|---|---|
| Vercel | Vercel Sandbox（Firecracker microVM） | Vercel Blob | vercel.com/templates/ai/hyperframes-on-vercel |
| Cloudflare | Cloudflare Containers（Workers + Durable Object） | R2 | 仓库 README 中的一键按钮 |
两个模板使用相同的架构：
- 在浏览器中通过
<hyperframes-player>Web 组件预览打包的ui-3d-reveal合成。 - 通过 POST 到
/api/render渲染为 MP4。处理程序将合成发送到预装了 Chromium、FFmpeg 和hyperframes的沙箱运行时，然后将 MP4 流式传输回对象存储并返回公共 URL。 - 本地创作，部署预览 + 渲染 API。合成仍在你的机器上通过
npx hyperframes init构建，然后放入模板的public/compositions/目录。
选择模板
Vercel
如果你已经在 Vercel 上部署、想要零配置的 Blob 存储，或想要重用 Vercel 的 CI/预览环境，请选择此选项。
你将获得什么
- 一个带有
<hyperframes-player>预览和POST /api/render路由的 Next.js 应用。 - 在
next build期间构建的预烘焙 Vercel Sandbox 快照——冷渲染跳过 Chromium/FFmpeg 安装并在约 100ms 内从快照恢复。 - 部署时自动配置的 Vercel Blob 存储。
BLOB_READ_WRITE_TOKEN会自动注入。
性能
渲染在 standard-4（4 vCPU）上运行。使用 --workers auto，三个并行 Chrome worker 相比单 worker 显著减少渲染时间。具体渲染时间取决于合成长度、复杂性和素材大小。
定价
Vercel Pro 计划每月包含 Sandbox 额度。参见 Vercel Sandbox 定价了解当前每 vCPU 和每 GB 费率以及最新的额度分配。
ℹ️ Note
Vercel Functions 限制为 300 秒和 50 MB 压缩包，无法容纳 Chromium + FFmpeg。模板专门使用 Vercel Sandbox，因为它是为此工作负载构建的原语——每次渲染最多 5 小时运行时间和最多 8 个 vCPU。
Cloudflare
如果你已经在使用 Cloudflare Workers、想要 R2 的免费出站流量，或想要完全控制渲染器镜像，请选择此选项。
你将获得什么
- 一个提供预览 HTML 并将
/api/render请求转发到RenderContainerDurable Object 的 Worker。 - 一个预构建的 OCI 容器镜像，预装了 Chromium + FFmpeg +
hyperframes——无需在请求时安装。 - 部署时自动配置的 R2 存储桶（
hyperframes-renders）。
性能
渲染在 standard-4（4 vCPU，12 GiB）上运行。使用 --workers auto，三个并行 Chrome worker 相比单 worker 显著减少渲染时间。容器实例在 10 分钟不活动后进入休眠，因此在静默期后的下一个请求会产生冷启动延迟。
定价
Cloudflare Containers 按 10ms 为单位计费内存、CPU 和磁盘；R2 存储在 Cloudflare 网络内无出站费用。需要 Workers Paid 计划。参见 Cloudflare Containers 定价和 R2 定价了解当前费率。
ℹ️ Note
Cloudflare 的托管 Browser Rendering API 无法安装 FFmpeg——这就是为什么模板使用 Cloudflare Containers，它为你提供一个真正的 OCI 容器，在 Worker 绑定的 Durable Object 中拥有最多 4 个 vCPU 和 12 GiB RAM。
架构
两个模板遵循相同的流程：浏览器本地播放预览，然后 POST 到渲染端点，该端点委托给具有 Chromium + FFmpeg 的沙箱运行时。
浏览器 边缘 / 函数 沙箱渲染器
┌──────────────────┐ ┌────────────────────┐ ┌──────────────────────────┐
│ <hyperframes- │ ────▶ │ /api/render │ ────▶ │ hyperframes render │
│ player> │ │ 发送合成 │ │ (Chromium + FFmpeg, │
│ 预览 iframe │ │ → 渲染器 │ │ 预安装) │
│ │ ◀──── │ ← 流式传输 MP4 │ ◀──── │ │
│ │ url │ → 上传到 blob │ mp4 │ │
└──────────────────┘ └────────────────────┘ └──────────────────────────┘
│
└─▶ Vercel Blob / Cloudflare R2
两个模板中节省成本的关键是预烘焙渲染器。安装 Chromium 系统库和 chrome-headless-shell 需要 30-60 秒，这将主导每次冷渲染。Vercel 的模板在构建时创建沙箱快照；Cloudflare 的模板将所有内容烘焙到容器镜像中。两者都在毫秒内恢复，让你将整个请求预算用于实际渲染。
替换合成
两个模板都附带一个打包的合成（ui-3d-reveal）。要使用你自己的：
本地创作
合成是 HTML——使用 CLI 在你的机器上创作：
npx hyperframes init my-video
cd my-video
npx hyperframes preview
将打包文件放入模板
将你的合成复制到 public/compositions/<your-name>/。
将模板指向它
- Vercel：编辑
lib/preview.ts顶部的PREVIEW_COMPOSITION_DIR，如果不是 1920×1080 则修改app/page.tsx中的尺寸。 - Cloudflare：在运行
npm run deploy时设置PREVIEW_COMPOSITION_DIR=compositions/<your-name>，或编辑scripts/build.mjs中的默认值。如果需要，更新public/index.html中的 player 尺寸。
部署
# Vercel
vercel deploy
# Cloudflare
npm run deploy
何时使用模板 vs 自行构建
模板针对预览 UI 后面的单一渲染端点进行了优化。这是运行托管 Hyperframes 渲染 API 的最快方式。如果你需要：
- 带有重试、去重或优先级的渲染队列——从模板开始，然后添加你自己的队列（如 Vercel Queues、Cloudflare Queues、SQS）。
- 带有按用户合成上传的多租户渲染——从模板开始，用运行时获取的替换打包的合成。
- 自托管渲染——参见渲染指南并在你自己的基础设施上运行
hyperframes render --docker。
对于其他所有情况，模板是推荐的起点。
下一步
- 渲染 在本地或 Docker 中渲染合成
- Player 包
在任何 HTML 页面中嵌入
<hyperframes-player> - Vercel 模板 GitHub 源代码
- Cloudflare 模板 GitHub 源代码