跳至主要內容

VHS 實測:把終端機錄影寫成可以重播的程式碼

Charmbracelet VHS 能用 .tape 腳本控制終端機輸入、等待、主題、尺寸與輸出格式。我實際用 662 bytes 的 Tape 產生 16.92 秒中英 Demo,並從 MP4 擷取 PNG 截圖。

5 min read/ Easy

前言

寫 CLI 工具或教學文章時,我常常需要錄一段終端機操作。手動錄影沒有很難,麻煩的是改一行指令後,游標位置、輸入速度、視窗尺寸和停頓時間都要重新控制一次。

VHS 的做法很直接:把整段終端機 Demo 寫進 .tape 檔案,再由程式按照腳本輸入指令、按 Enter、等待結果並輸出影片。錄影內容因此能放進 Git,指令改了就重新執行,不用每次靠手速重錄。

我這次寫了一份 662 bytes 的 Tape,實際產生 16.92 秒、1280×720 的 MP4,檔案約 126 KB。內容混用中文和英文,下面就是 VHS 自己錄出來的結果。

安裝 VHS

macOS 或有 Homebrew 的 Linux,可以直接執行:

bash
brew install vhs

VHS 執行時需要 ttydffmpeg。我這次在 macOS 用 Homebrew 安裝 v0.11.0,套件管理器也一起處理了缺少的 ttyd,不用再分開找依賴。

Windows 可以用 winget install charmbracelet.vhs 或 Scoop;Linux 也有 Debian、RPM、Arch 與 Nix 套件。完全不想碰本機依賴的話,官方另有包含依賴的 Docker 映像檔。各系統最新檔案可以直接到 VHS Releases 下載。

安裝後先確認版本:

bash
vhs --version

常用指令速查

先記下面幾個就夠用了:

指令用途
vhs demo.tape執行 Tape,產生腳本裡指定的影片
vhs new demo.tape建立一份包含範例與註解的 Tape
vhs record > demo.tape錄下實際操作,再存成可修改的 Tape
vhs validate demo.tape只檢查語法,不執行錄影
vhs themes列出可以使用的終端機主題
vhs publish demo.gif把 GIF 上傳到 vhs.charm.sh 並取得分享網址
vhs <command> --help查看某個指令的完整參數

Tape 裡最常出現的是 OutputSetTypeEnterSleepWait。這篇下面的腳本已經涵蓋基本錄影流程;其餘按鍵、隱藏指令、等待文字和進階設定,可以直接看 VHS 原始 Repo

Tape 就是一份終端機分鏡

這次實測的完整腳本如下:

text
Output vhs-demo.mp4

Set Shell "bash"
Set FontSize 24
Set Width 1280
Set Height 720
Set TypingSpeed 35ms
Set Theme "Catppuccin Mocha"
Set Padding 28
Set Margin 24
Set MarginFill "#181825"
Set BorderRadius 12
Set WindowBar Colorful
Set CursorBlink false

Type "clear"
Enter
Sleep 500ms

Type "echo '你好,VHS!Hello from the terminal.'"
Enter
Sleep 1s

Type "echo '環境檢查 / Checking environment'"
Enter
Sleep 700ms

Type "echo '狀態正常 / Status: OK'"
Enter
Sleep 700ms

Type "echo '產生影片 / Rendering video'"
Enter
Sleep 700ms

Type "echo '輸出完成 / Export: DONE'"
Enter
Sleep 700ms

Type "echo '完成!Demo is ready.'"
Enter
Sleep 3s

Set 負責固定畫面尺寸、字體、主題、輸入速度與外框;Type 模擬輸入;Enter 送出指令;Sleep 留時間讓觀眾看清楚結果。這段 Demo 刻意混用中文和英文,也能直接照腳本輸入及顯示。

我安裝的 v0.11.0 範例語法只列出 GIF、MP4 與 WebM 輸出,所以這篇的靜態圖是直接從完成的 MP4 擷取。VHS 本來就需要 ffmpeg,不必再多裝一套截圖工具:

bash
ffmpeg -ss 16.4 -i vhs-demo.mp4 -frames:v 1 vhs-demo.png
VHS 依照 Tape 腳本產生的中英夾雜終端機 Demo,顯示環境檢查與影片產生結果

這張 PNG 擷取自上方的中英夾雜 VHS Demo

一個指令重新產生整段 Demo

把終端機切到 .tape 所在目錄後執行:

bash
vhs vhs-demo.tape

VHS 會開啟虛擬終端機,照順序執行所有動作,再把結果寫到 Output 指定的位置。同一份 Tape 可以同時放多個 Output,官方支援 GIF、MP4、WebM,也能把每一幀輸出成 PNG 序列。

如果不想從空白檔開始,可以先跑 vhs new demo.tape 產生範例。也可以用 vhs record > demo.tape 錄下真人在終端機裡的操作,再回頭整理自動產生的 Tape。

它比螢幕錄影好在哪裡?

VHS 最適合會反覆變動的 CLI Demo。README 換了指令、輸出文字改了、視窗尺寸要重做,只要修改 Tape 再執行一次。錄影設定跟著專案一起版本控制,其他人也能在相同環境重新產生結果。

它也很適合放進自動化流程。例如 CLI 發佈新版後重跑 Tape,讓文件裡的 Demo 跟著更新。Wait 還能等特定文字出現在畫面上,比固定睡幾秒更適合處理完成時間不穩定的指令。

不過 VHS 不會讓所有錄影自動變得完全一致。Tape 呼叫的程式版本、網路回應、字型和作業系統不同,畫面仍可能有差異;需要帳號、密碼或 API key 的操作也不該直接寫進腳本。我的做法是讓 Demo 只依賴可公開、可重現的指令,敏感設定全部留在錄影之外。

我之後會直接拿它錄 CLI 教學

這次最有感的不是它能替終端機加漂亮主題,而是錄影本身變成一個可以修改的文字檔。662 bytes 的 Tape 產生完整影片,再用一行 ffmpeg 指令抓出靜態圖;文章要重錄時只需要重新跑這兩個指令。

一般 App 操作我還是會用螢幕錄影;但只要內容發生在終端機裡,我之後會先寫 Tape。至少不必再因為最後一行打錯字,把前面十幾秒全部重錄一次。