【免費下載鏈接】webreelRecord scripted browser demos as video項目地址https://gitcode.com/gh_mirrors/we/webreel點擊查看免費下載webreel是一個開源的瀏覽器演示視頻錄制工具它的 webreel CLI 只需一個 JSON 配置文件就能驅(qū)動無頭 Chrome 自動點擊、輸入、拖拽、滾動頁面并以約 60fps 截圖合成自動生成帶鼠標動畫、按鍵 HUD 和音效的 MP4 / GIF / WebM 演示視頻。本文一次講透init、record、preview、composite四大核心命令外加validate與install兩個輔助命令幫你從配置到成片完整跑通 webreel 錄制流程?？焖侔惭b與前置條件只需 Node.js v18webreel 會在首次運行時自動下載 Chrome 與 ffmpeg 到~/.webreel目錄npm install webreel如果你希望提前預(yù)裝依賴或修復(fù)損壞的二進制可手動執(zhí)行webreel install后文詳述。 整個 webreel 的工作流可以概括為一句話寫配置 → 預(yù)覽調(diào)試 → 錄制 → 合成。四個核心命令各占一環(huán)。webreel init一鍵生成配置文件init是起點。它會腳手架式地生成一份帶注釋的webreel.config.json模板中已包含輸出目錄、默認延遲和示例步驟改幾個字段就能直接錄制webreel init webreel init --name login-flow --url https://myapp.com webreel init --name hero -o hero.config.json選項默認值說明--name namemy-video視頻名稱--url urlhttps://example.com起始 URL-o, --output filewebreel.config.json輸出配置文件路徑生成的配置大致如下steps數(shù)組就是腳本化演示的核心——按順序執(zhí)行的點擊、按鍵、暫停等動作{ videos: { VIDEO_NAME: { url: VIDEO_URL, viewport: { width: 1920, height: 1080 }, steps: [ { action: pause, ms: 500 }, { action: click, text: Get Started }, { action: key, key: moda, delay: 1000 } ] } } }完整模板見 init.ts一份最小可用的真實配置可參考 webreel.config.json。webreel record核心命令產(chǎn)出演示視頻record是整條鏈路的發(fā)動機它讀取配置、啟動無頭 Chrome、逐步執(zhí)行動作并錄制最終用 ffmpeg 編碼輸出視頻文件默認寫入videos/name.mp4webreel record # 錄制配置中的全部視頻 webreel record hero login # 只錄制指定名稱的視頻 webreel record -c custom.config.json選項說明-c, --config path指定配置文件路徑默認自動發(fā)現(xiàn)webreel.config.json并向上查找父目錄--verbose每一步執(zhí)行時打印日志--watch監(jiān)控配置文件變化改動后自動重新錄制--dry-run只打印解析后的完整配置與步驟列表不真正錄制--frames將原始幀保存為 JPEG 到.webreel/frames/幾個實用技巧先--dry-run再錄不啟動瀏覽器就能看到最終解析出的配置和逐步腳本快速排查我到底會執(zhí)行哪些步驟。--watch迭代調(diào)參開發(fā)階段邊改配置邊自動重錄適合反復(fù)微調(diào)delay與viewport。一份配置多個視頻在videos下定義多個條目即可record會逐個輸出參考 multi-demo/webreel.config.json 中一個頁面生成 homepage / features / pricing 三條視頻的做法。錄制時原始錄屏還會被保留在.webreel/raw/動作時間軸數(shù)據(jù)保存在.webreel/timelines/——這正是后面composite命令的基礎(chǔ)。webreel preview不錄制的實時預(yù)覽調(diào)試調(diào)好步驟之前沒人想反復(fù)跑完整錄制。preview會在可見的瀏覽器窗口里按腳本執(zhí)行動作你可以肉眼檢查點擊有沒有落在正確元素上、等待時機對不對、滾動位置是否合適——全程不產(chǎn)生視頻文件webreel preview # 預(yù)覽配置中的第一個視頻 webreel preview hero # 預(yù)覽指定視頻 webreel preview -c custom.config.json hero選項說明-c, --config path指定配置文件默認webreel.config.json--verbose打印每一步執(zhí)行日志如果視頻名不存在會提示Video xxx not found. Available: ...列出所有可用名稱方便快速定位拼寫問題。實現(xiàn)見 preview.ts。webreel composite不重新錄制的重新合成這是 webreel CLI 中最省時間的命令。由于record階段已把原始錄屏.webreel/raw/name.mp4和時間軸數(shù)據(jù).webreel/timelines/name.timeline.json分開保存當(dāng)你只想調(diào)整以下效果時無需再開瀏覽器重錄光標覆蓋層樣式圖片、大小、熱區(qū)按鍵 HUD 外觀顏色、字號、位置音效配置直接重新合成即可webreel composite # 重新合成全部視頻 webreel composite hero login # 只合成指定視頻 webreel composite -c custom.config.json典型場景你錄完一條 3 分鐘的演示發(fā)現(xiàn)默認光標太刺眼在配置里加上theme.cursor自定義光標圖片后跑一次composite就能得到新成片——瀏覽器操作完全不用重跑。若找不到原始數(shù)據(jù)命令會明確報錯Run webreel record first提示先錄制。實現(xiàn)見 composite.ts。輔助命令validate 與 installvalidate不運行配置先查錯webreel validate webreel validate -c custom.config.json對 JSON 配置做語法 Schema 校驗錯誤信息會帶行號定位把問題攔在錄制之前。適合提交代碼前檢查或配合 CI 使用。install預(yù)裝 / 修復(fù)依賴webreel install webreel install --force下載三個組件到~/.webreelheadless Chrome錄制用、完整版 Chromepreview 用、ffmpeg。--force會刪除緩存并重新下載專治二進制損壞。如果你通過環(huán)境變量CHROME_PATH、CHROME_HEADLESS_PATH、FFMPEG_PATH指定了外部二進制對應(yīng)組件會自動跳過。實現(xiàn)見 install.ts。推薦工作流四步產(chǎn)出專業(yè)演示視頻webreel init— 生成帶注釋的配置文件填入 URL 與步驟webreel preview— 肉眼調(diào)試步驟落點與節(jié)奏webreel record— 正式錄制輸出 MP4/GIF/WebM 與縮略圖webreel composite— 調(diào)整主題、HUD、音效后秒級重新合成。中途隨時用validate體檢配置依賴異常時用install --force一鍵修復(fù)。相關(guān)源碼與資料資源路徑命令注冊入口index.ts命令實現(xiàn)目錄packages/webreel/src/commands/配置類型定義步驟、視口預(yù)設(shè)、主題types.ts官方命令參考頁apps/docs/src/app/commands/page.mdx全部可運行示例examples/項目說明與命令速查README.md掌握以上六個命令你就掌握了 webreel CLI 的全部能力用init起稿、preview調(diào)試、record錄制、composite精修再配上validate和install兜底一套瀏覽器演示視頻生產(chǎn)線就此成型。贊分享【免費下載鏈接】webreelRecord scripted browser demos as video項目地址https://gitcode.com/gh_mirrors/we/webreel點擊查看免費下載相關(guān)推薦LongHorizon-Harness CLI 命令速查清單run、init、doctor、plugin 一次講透LongHorizon Harness CLI 命令速查清單run、init、doctor、plugin 一次講透 LongHorizon Harness 是人工智能AI AgentAgent 工作流Agent 評測GUI 自動化VitePress 命令行接口CLI完整參考dev / build / preview / init 命令實戰(zhàn)指南VitePress 命令行接口CLI完整參考dev / build / preview / init 命令實戰(zhàn)指南 本篇指南基于 VitePress 官方前端文檔開發(fā)工具前端構(gòu)建Harvey CLI命令完整參考run、discover、outbox、export等12個命令一次講清Harvey CLI命令完整參考run、discover、outbox、export等12個命令一次講清 Harvey 是一款本地運行的自主 AI 銷售代理上一篇微信聊天數(shù)據(jù)自主管理從數(shù)據(jù)提取到智能分析的全鏈路技術(shù)實現(xiàn)下一篇Blockly國際化完全指南從零構(gòu)建多語言可視化編程環(huán)境創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考