mcpField
P
product-recording

product-recording

github.com/remotion-dev创意与媒体68.6k84 次安装今天更新
代码仓库

关于 product-recording

product-recording 是用于准备浏览器录制并将用户原始录制导入 packages/brand 的内部 Remotion 工作流技能。它保留录制元数据，并说明验证和托管资源迁移步骤。

主要功能

  1. 01准备 Remotion Studio 和 Chrome
  2. 02构图并检查可选镜头
  3. 03将录制控制权交给用户
  4. 04导入保留元数据的原始录制
  5. 05校验哈希后迁移资源

适用场景

  1. 01准备浏览器演示录制
  2. 02将 MP4 或 WebM 录制导入 brand
  3. 03用托管 URL 替换本地媒体资源

MCP 相关

该工作流在可用时可使用 Canvas Capture 扩展的 WebMCP 工具 setup_shot 和 get_shot。

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/remotion-dev/remotion --skill product-recording

安装后在 Claude Code 中输入/product-recording确认已加载。

详细介绍

产品录制

准备浏览器和镜头，让用户执行并录制交互， 然后将原始录制文件放入 packages/brand。这是一个内部 Remotion 工作流；请将此技能保留在 .agents/skills 中。

准备 Studio 和 Chrome

  1. 使用 canvas-capture-extension 在其持久目录中构建并安装扩展。重新构建后，通过 chrome://extensions 重新加载已安装的扩展；仅成功构建并不会刷新 Chrome 中已加载的扩展。

  2. 使用已启用 Canvas Draw Element 的兼容版 Chrome。 保留无关的浏览器标签页和未完成的录制。

  3. 查找所需合成的注册信息和所属软件包。按照 studio 准备依赖项、构建并启动服务器，但请从所属软件包启动，并在兼容的 Chrome 中打开录制页面。使用 bunx remotion studio --no-open，并使用该命令输出的确切 URL，包括报告已有服务器时。不要假设端口 3000 属于此代码库。

  4. 在查询字符串中添加 studioPixelRatio=4 打开合成，并保留其他 URL 参数。例如，若 Studio 报告端口 3001：

    http://localhost:3001/RollerSkiRoughCut?studioPixelRatio=4

    此参数会提高 Studio 画布的后备分辨率，使时间轴录制画面更清晰。它不会设置扩展的输出分辨率。 RollerSkiRoughCut 位于 packages/jonnys-videos；查找其他所需合成的位置，不要假设它们位于 packages/example。

  5. 确认所需合成和当前时间轴均可见。通过工具栏图标或扩展菜单启用 Canvas Capture。

准备可选镜头并交接

  • 根据演示需要调整视口、时间轴高度和缩放、播放头及侧边栏。请在构图前完成这些操作。
  • 如果可用，请使用扩展的 setup_shot 和 get_shot WebMCP 工具。启用扩展后即可使用这些工具。选择视口、一个可见元素或矩形区域；使用 get_shot 并设置 preview: true 检查静帧。裁剪区域会固定在视口 CSS 像素坐标中，因此更改窗口或布局后，请重新构图。
  • 如果这些工具不可用，请使用扩展的 Entire page 或 Select area 控件，并目视确认选择区域。输出缩放比例和尺寸与 studioPixelRatio 相互独立；请根据预期镜头设置它们，并检查显示的尺寸。
  • 交接前，记录用户 Downloads 文件夹中现有录制文件及其修改时间，以便之后识别新录制。
  • 将镜头准备就绪，但不要开始录制。告诉用户点击 Record，执行交互、停止录制，然后选择 Download recording。光标及录制的开始和停止由用户控制。此处暂停，直到用户完成录制；不要用较早的下载文件替代，也不要声称已完成导入。

导入下载的录制文件

  1. 用户完成后，根据文件名和相对于交接时间的修改时间，在 ~/Downloads 中找到新下载完成的录制文件。 排除未完成的 .crdownload 文件。如果有多个可能的录制文件，请询问 应使用哪一个。

  2. 保留带有嵌入式 REMOTION_CAPTURE_DATA 元数据的原始 MP4 或 WebM。 导入前不要转码；这些元数据包含可编辑的光标数据。

  3. 使用 import-canvas-capture，目标路径为 packages/brand，并指定其合成注册文件（当前为 src/Root.tsx）。选择一个未使用且描述明确的合成 ID。在 packages/brand 中，可以通过以下命令调用本地构建的 CLI：

    node ../cli/remotion-cli.js experimental-codemod add-canvas-capture \
  /absolute/path/to/downloaded-capture.mp4 \
  --composition-file src/Root.tsx --id TimelineRecording

    遵循该技能中关于尺寸、依赖项和冲突的指导。检查录制文件的尺寸；导入完整画面时，传入匹配的 --width 和 --height：默认的 1920×1080 合成可能会裁切更大的录制画面，因为生成的组件会保留视频的原始尺寸。 保留下载文件以及现有的合成和资源。

  4. 检查生成的组件、注册信息、复制的公共资源以及任何依赖项变更。移交前运行相关的品牌验证。

移交录制文件

最后使用 offload-r2：将导入的录制文件上传到 remotion.media，确认公开对象的 SHA-256 与本地文件一致，然后将合成中的本地资源引用替换为托管 URL。 只有验证通过后，才删除仓库本地的媒体副本；保留原始下载文件。遵循该技能中的针对性验证，然后报告合成 ID、托管 URL 和变更的文件。明确区分可供录制的浏览器与已完成、已导入并已移交的录制文件。

评论

支持 Markdown