❖ 終端錄屏程式`asciinema`

weixin_33924312發表於2019-02-17

對於經常要寫開發教程和攻略來說,GIF動圖能增強不少說明力。問題是,錄製視訊再轉GIF太麻煩,直接用一些GIF錄屏也躲不過圖片體積太大:動輒好幾MB這一關。
所以這時候我們就要讓流行的asciinema命令上場了。它能輕鬆錄製你在終端裡的所有操作,把所有動作儲存為JSON文件,而不是真的錄製視訊,所以檔案都極其小。要播放的話可以直接用它的命令播放。要轉換GIF的話有相關的轉換器,轉換後體積都不會比直接錄製螢幕大。

841144-307a3cb16eccae02.gif
rec

Mac安裝:

$ brew install asciinema

Pip安裝:

$ pip install asciinema

錄屏:

$ asciinema rec <output-file-name>

其中可以指定輸出檔案的名字,副檔名可以是*.json,*.cast都行,隨意。
本質上檔案是一個JSON格式的資料集,記錄了每個步驟細節。如果不指定檔名也可以,程式會自動生成一個檔案,並顯示輸出的檔案路徑。
所以,程式製成的格式是不能用視訊播放器或GIF播放器播放的,只能用asciinema程式播放。

播放:

$ asciinema play </path/to/file>

Ctrl-c退出播放。

附加/覆蓋:

# 在已經錄製的檔案後附加錄製內容:
$ asciinema rec <output-file-name> --append

# 覆蓋已經錄製的檔案
$ asciinema rec <output-file-name> --overwrite

對Tmux錄屏

對一個Tmux錄屏,需要先退出tmux,然後通過asciinema進入tmux的指定session進行錄製。
如下:

$ asciinema rec --command "tmux attach -t session-name"

錄製結束後,不要直接Ctrl-D退出,而是先prefix-d退出Tmux,再Ctrl-c結束錄製。

asciinema轉換為GIF圖片

有時候我們需要把錄屏結果顯示到網頁上,那麼就需要轉換為GIF圖片了。
asciinema程式自身沒有轉換功能,但是官方開發了一個NodeJS版本的程式用來轉換:
參考:asciinema/asciicast2gif

前提是本機已經安裝:NodeJSImageMagickgiflossy (或gifsicle)。

Mac安裝過程:

brew install ImageMagick gifsicle node
npm install --global asciicast2gif

轉換:

$ asciicast2gif </path/to/INPUT.json> </path/to/OUTPUT.gif>

如:

841144-3be8cbc082c15a72.png
image

轉換過程很慢,但是檔案非常小,遠比自己直接錄屏要小很多。
比如下面的GIF,直接視訊錄屏轉GIF的檔案是7M左右,通過減少幀率和顯示效果檔案在1M左右,而用asciinema轉換為GIF超清晰原畫,只有237Kb。可見一斑。

841144-b0943be6d9b4ef9a.gif
rec
841144-b414f4ec6a4e14b2.gif
rec

有時候如果檔案比較大,可以選擇在轉換前選擇降低顯示效果。
asciicast2gif降低效果的方法是設定Environment Variable環境變數GIFSICLE_OPTS。比如:

$ export GIFSICLE_OPTS="-k 16 -O3"
$ asciicast2gif </path/to/INPUT.json> </path/to/OUTPUT.gif>

# or
GIFSICLE_OPTS="-k 16 -O3" asciicast2gif </path/to/INPUT.json> </path/to/OUTPUT.gif>

相關文章