demo-video

用途\n该技能用于为项目的线上站点或应用生成演示视频、宣传片、客户演示或功能走查视频，也可用于制作优惠活动、发布说明或落地页的展示视频。如果用户打算自己录制，则应改为在 docs/demo/script.md 中编写拍摄脚本（场景、动作、旁白文字），而不是使用本流程。\n\n主要能力\n输出全高清 MP4，包含真实屏幕录制、用户语言旁白、烧录字幕、背景音乐和建议分享链接。音乐床由 compose.mjs 合成以避免版权风险，并会压低在旁白之下；也可在 scenes.mjs 中通过 music: 'path/to/track.mp3' 指定用户自己的音轨。最终音频归一化到 −16 LUFS。流程支持断点续跑，重跑时会跳过已完成输出。\n\n流水线步骤\n0. 初始化：bash .claude/skills/demo-video/setup.sh，安装 ffmpeg、字幕字体并创建 video/ 目录。\n1. 脚本：编写 video/vo/narrator.json 和 video/scenes.mjs，可从 examples/ 起步。\n2. 旁白：node .claude/skills/demo-video/tts.mjs video/vo/narrator.json video/build/vo，生成 s01.wav… 及对应 s01.txt。\n3. 录屏：source .claude/skills/demo-video/rec-lib.sh 后使用 take_start、mark、take_stop，输出 video/build/rec/<take>.mp4 和 .marks。\n4. 卡片：card_take <name> "file://$PWD/video/cards/<name>.html?…" <seconds>，输出卡片视频。\n5. 音效：node .claude/skills/demo-video/sfx.mjs，生成 chime.wav、click.wav。\n6. 剪辑：node .claude/skills/demo-video/compose.mjs video/scenes.mjs，输出 video/out/<name>.mp4。\n7. 质检：node .claude/skills/demo-video/listen.mjs video/out/<name>.mp4 "<question>" 并抓帧检查，修正后重跑第 6 步。\n8. 发布：node .claude/skills/demo-video/publish.mjs video/out/<name>.mp4 --cover 16，上传到项目存储并生成封面 JPG。\n若通过 npx skills add 安装，路径为 .agents/skills/demo-video/。\n\n使用要点\n脚本先行：10–15 句旁白，每句一个想法、8–15 词，使用用户语言；只陈述可在项目自身数据中核实的事实，不得声称无法验证的数字、客户或奖项；品牌名和缩略词放入 pronounce 以保证发音正确；每句对应一个场景。语音使用 Live 模型 gemini-3.8-live 逐句朗读，每句尝试 3 次，通过比较模型转写与脚本（80% 词匹配）保留最佳结果并输出 WAV。可用声音包括 Kore、Charon、Puck、Fenrir、Aoede；旁白使用一个声音，“客户”角色可使用另一个声音。运行后应阅读 s*.txt，对不一致的句子删除其 wav 后重跑。\n\n录屏要求：从干净状态开始，使用全新浏览器上下文、空购物车、无表单草稿，并在录制前登录以免在镜头前输入密码；使用 typeslow 输入，在每次会被剪辑的点击前调用 mark <label>，用 wait_gone 等待 AI 回答，不滚动正在展示的元素至屏幕外；按元素引用（@e12）而不是标签文字点击。take_start 会把视口设为 1600×900（默认 1280×720 对 1080p 太小），每个场景一条 take。若产品有语音智能体，应通过其自身 API 录制真实交互并叠加到卡片上。\n\n卡片：examples/cards/ 提供开场（动画数字、logo、胶囊标签）、语音通话卡和结尾卡；复制到 video/cards/ 后修改颜色、logo 和文字以匹配品牌；在 URL 中传 ?t1=<s> 等时间参数使动画与旁白对齐。\n\n剪辑：scenes.mjs 中每个场景由 take 片段 [take, in, out, speed, zoom?] 与音频 ['vo:s01', at] 组成；等待段可加速 2–5×，小字面板可推近放大，每进入新章节加章节标签，底部字幕会遮挡界面时使用 cap: 'left'，成功时刻（加入购物车、下单）加 chime 音效。剪辑按场景缓存，仅变更场景重新渲染。\n\n交付前质检：listen.mjs 将混音发送给 Gemini，询问发音、误读词、音乐与旁白平衡、故障和长静音；再按场景抓取全分辨率帧检查字幕重叠、文字截断和错误界面状态，修正后重跑第 6 步。\n\n交付与发布：删除录屏产生的测试订单/数据，运行 agent-browser close --all，提交 video/ 工具与脚本（不提交 build/、out/）；提供链接、本地路径、视频内容简述以及拍摄中发现并修复的产品问题。publish.mjs 上传到项目存储并打印公共 URL；在 openkbs.json 中配置 "storage": { "cloudfront": "media" } 且 openkbs deploy 设置该路径后，文件位于 <site>/media/<key>。没有 CDN 存储时，可将文件放入 site/ 后部署，或分享 openkbs 存储下载链接。--cover <seconds> 会额外上传一帧 JPG 作为缩略图。\n\n环境要求\n需在 Studio 容器内运行，具备 ffmpeg（由 setup 安装）、agent-browser 和位于 ~/.openkbs/projectJWT 的代理 JWT；在 Studio 外运行需设置 OPENKBS_API_KEY。字幕字体会由 setup.sh 下载到 video/build/fonts（Golos Text、Fira Sans Extra Condensed，支持拉丁与西里尔字母，OFL 许可）。\n\n限制\n资料未说明价格、具体可用平台范围或其他收费信息；不适用于用户自行录制的场景，此类情况应改为编写拍摄脚本。