Communitygithub.com

Chrome 影片渲染 (CVR)

Android Chrome 影片渲染適配器,適用於 Remotion 與 HyperFrames。使用 `cvr` 可快速輕量啟動渲染,使用 `rvc` 則可進行詳細的環境、硬體、分段與同步檢查。首次執行時會度量短/長渲染計畫。支援無頭 Chrome、可攜式瀏覽器探索、前景平行渲染、自適應分段、PCM 音訊組合與影音同步驗證。

Chrome 影片渲染 (CVR) 是什麼?

Chrome 影片渲染 (CVR) 是一個專業技能,旨在讓 Android (proot) 裝置上的 AI 代理程式開發者能夠使用 Remotion 與 HyperFrames 等框架進行高效的影片渲染。該技能解決了在資源受限的環境中選擇最佳渲染策略的核心挑戰,透過基於實際度量的渲染計畫,自動決定每個裝置的最佳 worker 數量,而不是依賴硬編碼的預設值。CVR 提供兩種操作模式:`cvr` 用於日常的快速渲染,會快取度量結果以實現近乎即時的啟動;`rvc` 則用於深入診斷,每次執行時都會重新度量環境、硬體與分段驗證。此功能適用於 Claude Code、Cursor 及任何在 Android 環境中利用 proot 的 AI 終端機。其工作流程涉及執行 Python 腳本,這些腳本會調用目標專案的 Remotion API 或 HyperFrames 的原生系統,管理瀏覽器啟動 (包括無頭 Chrome)、將渲染工作分割成自適應大小的片段,並最終組合 PCM 音訊片段以產生 AAC 編碼的影片。首次執行時的度量過程會渲染測試合成,以確定短影片 (<=300 影格) 與長影片的最佳並行度。此技能也包含可選的同步驗證與 WebGL 政策檢查,以確保輸出在不同設定下都能保持穩健性。

相容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Jacky-xw/chrome-video-render/tree/main

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

Chrome Video Render (CVR)

適用於 Remotion 與 HyperFrames 的 Android/proot 瀏覽器與渲染適配器。合成內容與音訊時間軸仍歸影片專案所有。

啟動模式

模式用途啟動行為
cvr預設、日常渲染首次執行時度量短/長渲染計畫 (持續時間隨候選數量增加而增加,事先會宣告);後續執行時讀取計畫檔並立即啟動;無額外的 npm/瀏覽器版本探測;輸出簡潔的一行結果
rvc診斷、發布檢查每次執行時重新度量兩個計畫並覆寫共享的計畫檔 (保留歷史紀錄);完整的環境報告、硬體預算細節、每個區段的驗證以及可選的同步檢查;每個階段的時間摘要

兩種模式均在前景執行。獨立作業會序列化;單一作業內的平行處理程度受度量計畫約束。

# 輕量模式
python3 /skills/chrome-video-render/scripts/remotion-segmented.py --project . --composition Hello --output out.mp4 --mode quick

# 詳細模式
python3 /skills/chrome-video-render/scripts/remotion-segmented.py --project . --composition Hello --output out.mp4 --mode full --sync-check

渲染計畫

Worker 數量是度量得出的,而非推斷的。首次使用時,系統會針對每個候選 worker 數量,使用兩個固定的測試合成進行多次渲染,並以中位數決定每個候選的分數;優勝者會分別記錄在 <project>/node_modules/.cache/cvr-render-plan.json 檔案中,用於短影片 (<=300 影格) 與長影片。後續的 cvr 執行會讀取對應的計畫並立即開始渲染。rvc 則會每次重新度量,覆寫計畫檔,並使用新數字渲染該作業;每次寫入都會附加到 history 清單中。

沒有預設的 worker 數量,因為最佳數量取決於裝置本身。首次執行時會事先列印正在執行的動作,因為這需要為每個長度類別、每個候選、每個回合渲染一個測試合成。傳遞 --workers N 參數可以完全繞過探測程序。

瀏覽器環境

source /skills/chrome-video-render/scripts/video-browser-env.sh

cvr 使用此安裝中的啟動器。rvc 額外執行 render-env.sh --json 以取得瀏覽器、引擎與硬體報告。若簽出目錄不在 /skills 下,請使用該簽出目錄的 scripts/ 目錄。

Remotion

python3 /skills/chrome-video-render/scripts/remotion-segmented.py \
  --project /path/to/project --entry src/index.ts \
  --composition Hello --output /path/to/output.mp4 \
  --input-props '{"title":"Example"}'

使用目標專案的 Remotion 套件與官方的 selectComposition()、renderMedia() 與 combineChunks() API。支援分數 FPS 與 JSON props。會產生 PCM 區段並進行一次最終的 AAC 編碼交付。

當省略 --segment-frames 參數時,區段大小會根據合成長度自適應:90 影格 (長度 <= 300 影格),150 影格 (長度 <= 900),300 影格 (長度 <= 3000),450 影格 (長度 > 3000)。因此,長影片可以避免被分割成數十個區段,每個區段都需要重新啟動瀏覽器。傳遞 --segment-frames 參數可以指定固定的區段大小。

HyperFrames

在專案審閱與核准後:

python3 /skills/chrome-video-render/scripts/hyperframes-render.py \
  --project /path/to/project --output /path/to/output.mp4 \
  --quality looks --workers 2   # 範例值;請依專案選擇

保留 HyperFrames 原生的時間軸、混音器與 worker 系統。後端適配器是透過函數簽名選擇的,而非根據產生的建置檔名。

--mode quick 使用安裝的 Headless Shell 啟動器;--mode full 則會執行 render-env.sh 並根據硬體預算調整 worker 數量。兩種模式底層的 hyperframes render 調用方式相同,且明確指定的 --workers 參數在任何模式下都會被採用。HyperFrames 不使用度量後的渲染計畫。

驗證

  • cvr:基本的解碼影格、FPS、尺寸與音訊屬性檢查;除非請求校準檢查,否則同步狀態保持為 not-measured。
  • rvc:單程完整解碼、每個區段的細節、硬體預算、基於標記的同步檢查以及每個階段的時間摘要。
  • check-av-sync.py 需要一個包含已知 PCM 脈衝與視覺閃爍的校準合成。
  • selftest-av-sync.py 會驗證對齊的訊號與故意延遲的訊號。
  • webgl-policy-check.py 是可選的後端稽核,非例行渲染步驟。

請參閱 實作與相容性、瀏覽器後端 與 後端注意事項。

驗證範圍

已在 Android/proot aarch64 上搭配 Remotion 4.0.538 與 HyperFrames 0.8.198 進行測試:分數 FPS、音訊與無聲合成、參數轉發與同步檢查。列出版本是為了讓讀者了解測試環境,並非作為支援版本的聲明。

首次執行會為每個長度類別、每個候選、每個回合渲染一個測試合成,因此其持續時間會隨候選數量與影片長度增加而增加;這是每台裝置的一次性成本,後續執行會直接讀取記錄的計畫。rvc 則會每次重新度量。自適應分段可以在相同的總解碼影格數下,減少長影片的區段數量。任何執行所產生的數據皆僅描述執行該任務的機器,不保證其他裝置的表現。

相關技能