Expo Launch Video

网站 · 文档 · 工作室 · 工具参考 · 更新日志

---

expo-launch-video 可以让你的 AI Agent 通过手机实时拍摄并剪辑 Expo 应用的发布视频。让 Claude Code、Antigravity 或 Cursor 为你制作视频；它会录制真实应用的操作（页面加载、滚动、点击、面板打开），挑选最佳镜头，撰写字幕，并剪辑出配有动态图形、弹出画面和音效的精致视频。随后，它会打开一个工作室，你可以拖动调整结果，也可以直接输入你的需求。导出的是经过浏览器渲染的真正 1080p MP4。无需 After Effects、ffmpeg 或屏幕录制应用。

“为这个应用制作一段 45 秒的发布视频，展示首页、登录、仪表盘、题库和一场考试。字幕要突出产品优势。”

目录

• 安装
• 快速开始
• 功能
• 视频制作流程
• 常见问题
• 工具
• 工作室
• CLI 和环境
• 项目结构
• 故障排除
• 要求
• 相关内容
• 参与贡献
• 许可证

安装

npx expo install expo-mcp-bridge react-native-view-shot
npm install --save-dev expo-launch-video
npx expo-launch-video init

init 会写入包含 launch-video 服务的 .mcp.json——该服务包含 expo-mcp-bridge 中的所有 app_* 工具，因此一个服务即可完成两者的工作；此外，还会为 Claude Code 添加导演技能（.claude/skills/launch-video），为 Antigravity、Cursor 等工具在 AGENTS.md 中写入相同的操作手册，并在 .gitignore 中添加项目文件夹条目。

快速开始

一步完成。 在 Expo 项目中将以下内容粘贴到你的 Agent 中：

Read https://raw.githubusercontent.com/Rudrasamadhiya/expo-launch-video/main/AI_SETUP.md and set up app control and launch videos in this project.

手动操作：

1. 安装软件包并运行 init（见上文）。

2. 在根布局中挂载一次桥接：

   import { Stack, router } from 'expo-router';
   import { AgentBridge } from 'expo-mcp-bridge';
   
   export default function RootLayout() {
     return (
       <>
         <Stack />
         <AgentBridge router={router} />
       </>
     );
   }
   

3. 运行 npx expo start，并在手机上打开应用（连接同一 Wi-Fi）。

4. 重启 Agent 并提出视频制作需求。

在 Windows 上，MCP 配置使用 "command": "cmd", "args": ["/c", "npx", "expo-launch-video"]。

功能

• 手机实拍画面。 在应用内以约 10–15 fps 录制屏幕：镜头中呈现页面加载和动画，全页录制带来流畅滚动，还可在录制过程中点按。
• 自动导演。 导演会规划时间安排，放大统计数据行和按钮，加快长距离滚动，并根据屏幕上的真实数据撰写字幕和弹出式标签。
• 动态图形。 动态排版、玻璃质感标注、光影扫过、强调色擦除，以及带有 Logo 爆发效果和脉动式行动号召的动画片头与片尾。
• 弹出效果。 点按的卡片会从手机中浮起，移至舞台中央；打开的面板会弹出，形成并排布局。
• 声音设计。 合成的弹出声、点击声、呼啸声和钟鸣声与每个动画同步，并混入 MP4 的 AAC 音轨。
• 向工作室发送提示词。 “将 analytics 加速 2 倍”、“文字放在右侧”、“放大 Start 按钮”。简单编辑会立即应用；其他请求会交给你的 Agent，由它实时编辑视频。
• 适用于各种格式。 16:9 用于应用商店和 YouTube，9:16 用于 Reels 和 Shorts，1:1 用于信息流。

视频制作流程

1. Shoot    video_record {route:"/dashboard", seconds:8, scroll:true}    live from the phone
            video_record {tap:"My Analytics", seconds:6}                  tap → hero / side pop-out
2. Plan     video_plan {targetSeconds:45, format:"landscape"}             timing, zooms, captions, chips
3. Direct   video_edit [{op:"update", scene:"dashboard", title:"…"}]      refine any scene
4. Studio   video_studio  →  you drag, trim and type prompts              video_wait_for_prompt / video_reply
5. Render   video_render  →  launch-video/out/launch-landscape.mp4

常见问题

如何使用 AI 制作 Expo 应用的 App Store 预览视频？

将此软件包安装在 expo-mcp-bridge 旁边，运行 npx expo-launch-video init，在手机上打开应用，然后向你的 Agent 提出要求：“制作一段 30 秒的竖屏 App Store 预览视频。” 它会录制真实应用、规划视频并打开工作室；导出后即可获得 1080p MP4。

Claude Code 或 Cursor 能为我的 React Native 应用制作宣传视频吗？

可以，任何 MCP Agent 都行。Agent 会实时录制手机上的页面加载、滚动和点按，根据屏幕上的真实内容撰写字幕，并添加缩放、弹出效果、动态图形和音效。

我需要屏幕录制器或视频编辑器吗？

不需要。通过 expo-mcp-bridge 在应用内完成录制，在浏览器工作室中通过拖动或提示词（“将 analytics 加速 2 倍”）完成编辑，并在 Chrome 或 Edge 中渲染 MP4。

可以导出哪些格式？

16:9 用于 YouTube 和网站，9:16 用于 App Store 和 Play Store 预览、Reels、Shorts 和 TikTok，1:1 用于社交信息流。

工具

此外，还包括 expo-mcp-bridge 的所有 app_* 工具。完整参数请参见工具参考。

工具	描述
video_record	录制手机屏幕：在镜头中打开页面，等待加载，滚动，或在录制过程中点按
video_capture	为一个或多个路由截取高分辨率静帧和全页滚动画面
video_capture_tap	截取交互前、点按时和点按后的静帧
video_plan	根据采集的画面自动规划完整时间线
video_edit	编辑场景：顺序、时长、速度、字幕、标签、缩放（包括定时缩放）、弹出效果、转场、格式、字幕位置、主题、声音
video_timeline	用几行内容呈现完整计划
video_studio	在浏览器中打开工作室
video_wait_for_prompt	等待用户在工作室中输入内容
video_reply	编辑后在工作室中回复用户
video_render	导出 MP4 并返回其路径

工作室

一款浏览器编辑器，支持实时预览、通过拖动调整顺序和大小的时间线、逐场景检查器（字幕、时长、速度、转场、绘制缩放区域、滚动量）、视频设置（格式、字幕位置、取自应用的颜色、声音）以及提示词输入框。它能自行理解常见的编辑请求：

make dashboard 4s · speed up analytics 2x · slow down the 3rd scene · remove pricing
move faq after help · zoom on Log In in login · no zoom on dashboard · scroll mistakes 60%
title dashboard: Your day at a glance · fade transition on analytics · portrait · square
text on the right · make it 30 seconds · cta: Get it on Google Play · color #7c3aed · mute · volume 60%

设置 ANTHROPIC_API_KEY（或使用 ant auth login 配置文件）后，自由格式请求会直接发送给 Claude（claude-opus-5-5）；否则会通过 video_wait_for_prompt 发送给你的 Agent。提示词会包含你当前选中的场景，因此 “修复这个” 指的就是该场景。

运行 npx expo-launch-video studio，无需 Agent 即可重新打开项目。

CLI 和环境

npx expo-launch-video init      # .mcp.json ("launch-video" server), skills, AGENTS.md, .gitignore
npx expo-launch-video studio    # reopen the studio for ./launch-video (edit, preview, export)
npx expo-launch-video           # run the MCP server (your agent starts this for you)
npx expo-launch-video --help

变量	默认值	描述
EXPO_MCP_PORT	8347	手机连接的端口（与 expo-mcp-bridge 共用）
LAUNCH_VIDEO_PORT	8790	Studio Web 服务器端口（若被占用，则使用下一个可用端口）
LAUNCH_VIDEO_DIR	./launch-video	截取内容、project.json 和渲染文件的存放位置
LAUNCH_VIDEO_AI	on	off 会将 Studio 提示词发送给你的 Agent，而不是 Claude API
LAUNCH_VIDEO_MODEL	claude-opus-5-5	直接编辑 Studio 时使用的模型（需要 Anthropic 凭据）

项目结构

server/       MCP server, director (auto-planning), capture and recording, studio server,
              prompt parser, optional Claude edits
studio/       the editor (vanilla JS): renderer, motion graphics, sound design,
              MP4 export (Mediabunny / WebCodecs)
skill/        the directing playbook installed by init
AI_SETUP.md   one-shot setup guide an AI agent can follow

项目位于应用内的 launch-video/ 目录中（截取内容、project.json 和 out/ 中的渲染文件）；init 会将该目录添加到 .gitignore。

故障排除

现象	解决方法
渲染对话框一直无法完成	保持 Studio 标签页处于可见状态；导出使用浏览器的硬件编码器（Chrome 或 Edge）。
页面截取显示的是旧画面	更新两个软件包——截取使用当前可见的屏幕画面。
录制内容中的列表为空	应用可能需要开发环境变量（例如，仅在 eas.json 中设置的 EXPO_PUBLIC_*）；启动 Metro 时请设置这些变量。
面板遮挡了后续录制内容	每次录制之间关闭模态框——若仍有模态框打开，video_record 会发出警告。
其他问题	请参阅 expo-mcp-bridge 故障排除表格。

要求

• Node.js 20 或更高版本
• 已挂载 expo-mcp-bridge 的 Expo 应用
• 用于导出的 Chrome 或 Edge（WebCodecs H.264 + AAC）

相关项目

• expo-mcp-bridge — 本软件包基于此应用控制层构建。
• Expo Agent Kit — 两个库的网站和完整文档。

贡献

npm install
npm test

详情请参阅 CONTRIBUTING.md。

许可证

MIT © Rudra Samadhiya

导出文件使用 Mediabunny（MPL-2.0）进行封装。