remotion-integration

# HeyGen + Remotion 集成 本指南涵盖了生成 HeyGen 数字人视频并将其用于 Remotion 合成的工作流。 ## 快速开始 typescript // 1. 获取带有默认语音的数字人 const avatar = await getAvatarDetails(avatarId); // 2. 生成视频（带背景的 MP4 - 最常见） const videoId = await generateVideo({ video_inputs: [{ character: { type: "avatar", avatar_id: avatar.id, avatar_style: "normal" }, voice: { type: "text", input_text: script, voice_id: avatar.default_voice_id }, background: { type: "color", value: "#1a1a2e" }, }], dimension: { width: 1920, height: 1080 }, }); // 3. 轮询等待完成 (10-15+ 分钟) // 4. 在 Remotion 中使用，并在上方叠加动态图形 ## 概览 典型工作流： 1. 使用 HeyGen 生成数字人视频 2. 等待完成并获取视频 URL 3. 下载或直接在 Remotion 中使用 URL 4. 与其他元素（背景、叠加层、动画）进行合成 ## 选择合适的输出格式 | 您的合成内容 | 推荐 | 原因 | |------------------|-------------|-----| | 数字人作为演示者并带有叠加层 | MP4 + 背景 | 更简单，叠加层置于上方 | | Loom 风格（数字人覆盖在屏幕录制上） | WebM + `closeUp`，在 Remotion 中遮罩 | 需要透明度，在 CSS 中应用圆形遮罩 | | 数字人叠加在其他视频/内容上 | WebM (透明) | 需要透过数字人看到背后的内容 | | 全屏数字人 | MP4 + 背景 | 标准做法 | **大多数情况下使用带背景的 MP4。** 当您需要看到数字人 *背后* 的内容时，请使用 WebM。 **注意：** WebM 仅支持 `normal` 和 `closeUp` 样式。对于圆形边框，请在 Remotion 中使用 CSS `border-radius: 50%`。 ## 推荐：并行开发工作流 HeyGen 视频生成需要 **10-15+ 分钟**。不要等待，请并行工作： 1. **启动 HeyGen 生成** - 将 `video_id` 保存到文件，立即退出 2. **构建 Remotion 合成** - 使用占位符或数字人的 `preview_video_url`（短循环） 3. **定期检查 HeyGen 状态** 或在构建完成后检查 4. **替换占位符** 为准备好的真实视频 URL **根据脚本估算时长**：语音速率约为 150 字/分钟，因此 `wordCount / 150 * 60 * fps` 可得出大致帧数。 **合成技巧**：设计组件时使其在有或没有数字人视频的情况下均可工作，以便可以独立测试动态图形。 ## 尺寸对齐 **关键**：确保 HeyGen 输出尺寸与您的 Remotion 合成尺寸匹配。 ### 常见尺寸