Demo Video Creator
透過自動化瀏覽器互動來建立專業的產品展示影片。
概覽
- 規劃 展示順序（頁面、互動、時間）
- 錄製 使用 Playwright CDP screencast 擷取影格
- 編碼 使用 FFmpeg 轉換為影片
快速開始
前提條件
- OpenClaw 瀏覽器正在執行（
browser action=start profile=clawd） - 應用程式可透過瀏覽器存取（localhost 或遠端）
- 已安裝 FFmpeg 以進行編碼
錄製工作流程
- 如果尚未執行，請啟動 OpenClaw 瀏覽器
- 手動導航到應用程式，或使用
browser action=open - 根據目標應用程式自訂
scripts/record-demo.js - 執行：
node scripts/record-demo.js - 編碼：
bash scripts/frames-to-video.sh
規劃展示
請參閱 references/demo-planning.md 以獲取以下指引：
- 建構展示序列
- 時間與節奏
- 互動模式
- 使展示具吸引力的要素
腳本
scripts/record-demo.js
Playwright 範本腳本，具備以下功能：
- 透過 CDP 連接到 OpenClaw 瀏覽器
- 啟動 screencast 擷取（JPEG 影格）
- 執行展示序列（導航、點擊、懸停、輸入）
- 將影格儲存到輸出目錄
為每個展示進行自訂：
DEMO_SEQUENCES陣列 - 定義頁面和互動OUTPUT_DIR- 儲存影格的位置FRAME_SKIP- 跳過每第 N 個影格（數值越低，影格越多）
scripts/frames-to-video.sh
具有預設設定的 FFmpeg 編碼腳本：
mp4- H.264，品質/大小平衡好（預設）gif- 適用於內嵌的動畫 GIFwebm- VP9，較小的檔案
用法：./frames-to-video.sh [input_dir] [output_name] [format]
互動模式
// 導航
await page.goto('http://localhost/dashboard');
await page.waitForTimeout(2000);
// 點擊元素
await page.locator('button:has-text("Create")').click();
await page.waitForTimeout(500);
// 懸停（顯示工具提示、懸停狀態）
await page.locator('.card').first().hover();
await page.waitForTimeout(1000);
// 輸入文字
await page.locator('input[placeholder="Search"]').fill('query');
await page.waitForTimeout(500);
// 按下按鍵
await page.keyboard.press('Enter');
await page.keyboard.press('Escape');
// 滾動
await page.evaluate(() => window.scrollBy(0, 300));
提示
- 時間設定：頁面載入後停留 2 秒，互動之間停留 0.5-1 秒，顯示結果停留 1.5 秒
- 影格跳過：使用 3-5 可獲得流暢影片，8-10 可獲得較小檔案
- 品質：JPEG 品質設定為 85-90 可在大小與清晰度之間取得平衡
- 解析度：瀏覽器視窗大小決定輸出解析度
- 循環：GIF 應無縫循環 - 在起始處結束
注意事項
- 螢幕截圖 vs 影片： 如果使用者只需要查看某個功能，請直接內嵌螢幕截圖，而不是錄製完整影片。先檢查
browser action=tabs profile=clawd— 如果應用程式分頁已開啟，可直接擷取螢幕截圖，無需使用子代理。 - 內容限制： 大量螢幕截圖的錄製循環會快速消耗內容（200k token 限制）。保持範圍狹窄：先錄製所有影格，再進行分析 — 切勿將影格擷取與分析交錯進行。如果內容空間不足，請將影格寫入磁碟，然後在單獨的階段中進行分析。
- 平行代理風險： 不要針對同一個瀏覽器分頁同時產生多個展示代理 — 它們會互相干擾彼此的導航狀態。