SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场feature-video

feature-video

编程与开发

查看项目

更新于 10-16 04:39

技能介绍

用途

feature-video 用于为 Pull Request 录制功能演示视频，并将视频以内联播放器形式嵌入 PR 描述，方便审查者直观了解改动效果。当 PR 需要可视化演示，或用户要求演示某项功能时使用。

主要能力

  • 录制浏览器交互，展示功能操作流程
  • 将截图拼接为 MP4 视频
  • 将视频原生上传到 GitHub，生成 user-attachments/assets/ 链接
  • 将视频以内联播放器形式嵌入 PR 描述
  • 支持仅录制模式（无 PR 时先保存本地，稍后上传）
  • 支持仅上传模式（传入已有 .mp4 文件路径直接上传）

使用方式

前置条件

  • 本地开发服务器运行中（如 bin/dev、npm run dev、rails server）
  • 已安装 agent-browser CLI（需加载 agent-browser 技能了解详情）
  • 已安装 ffmpeg（用于视频转换）
  • gh CLI 已认证且对仓库有推送权限
  • Git 仓库位于功能分支（PR 可选，技能可创建草稿或仅录制）
  • 一次性 GitHub 浏览器授权

基本用法

# 为当前分支的 PR 录制视频
/feature-video

# 为指定 PR 录制视频
/feature-video 847

# 使用自定义基础 URL 录制
/feature-video 847 http://localhost:5000

# 为 staging 环境录制
/feature-video current https://staging.example.com

工作流程

  1. 解析参数并确定 PR：第一个参数为 PR 编号、"current"（默认当前分支 PR）或已有 .mp4 文件路径（仅上传恢复模式）；第二个参数为基础 URL（默认 http://localhost:3000）。若无 PR，可选择创建草稿 PR、仅录制或取消。
  2. 验证所需工具：检查 ffmpeg、agent-browser、gh 是否安装，缺失则提前报错。
  3. 收集功能上下文：获取 PR 详情和变更文件，将变更文件映射到应演示的路由/页面。
  4. 规划视频流程：创建镜头列表（开场、导航、功能演示、边界情况、成功状态），录制前向用户确认。
  5. 录制演示：生成唯一 run ID，创建输出目录，用 agent-browser 逐步捕获截图并按序编号。
  6. 创建视频：用 ffmpeg 将截图拼接为 MP4。
  7. 认证并上传到 GitHub：检查已有会话，必要时进行一次性授权，导航到 PR 页面，通过隐藏文件输入上传视频，等待处理并提取 URL。
  8. 更新 PR 描述：追加 Demo 段落，视频 URL 单独成行时渲染为内联播放器。
  9. 清理：询问用户后删除临时文件。

ffmpeg 拼接命令

ffmpeg -y -framerate 0.5 -pattern_type glob -i ".context/compound-engineering/feature-video/[RUN_ID]/screenshots/*.png" \
  -c:v libx264 -pix_fmt yuv420p -vf "scale=1280:-2" \
  ".context/compound-engineering/feature-video/[RUN_ID]/videos/feature-demo.mp4"

适用场景

  • PR 需要为审查者提供可视化演示
  • 用户要求演示某项功能
  • 需要展示功能操作流程和结果状态

限制

  • 依赖本地开发服务器、agent-browser、ffmpeg 和 gh CLI
  • GitHub 会话会过期（通常数周），上传失败需重新授权
  • GitHub DOM 选择器（#fc-new_comment_field、#new_comment_field）可能随 GitHub UI 更新而变化
  • 视频文件大小受 GitHub 限制：免费 10MB，付费 100MB
  • 建议视频时长 10-30 秒

故障排查

  • ffmpeg: command not found：未安装 ffmpeg，用 brew install ffmpeg（macOS）或等效方式安装
  • agent-browser: command not found：未安装 agent-browser，加载 agent-browser 技能了解安装说明
  • 上传等待后文本框为空：会话过期或 GitHub 处理慢，检查会话有效性，若有效则增加等待时间重试
  • 文本框为空且 URL 为 github.com/login：会话过期，重新运行授权设置
  • gh pr view 失败：当前分支无 PR，选择创建草稿 PR 或仅录制模式
  • 视频文件过大：超过 GitHub 限制，重新编码（降低帧率 -framerate 0.33、降低分辨率 scale=960:-2 或提高 CRF -crf 28）
  • 上传 URL 不含 user-attachments/assets/：上传方式错误或 GitHub 变更，检查文件输入选择器是否正确