Asciinema文章勘誤及Web端使用介紹

時間 2019-11-20

原文原文鏈接

欠下的債早晚是要還的，查文檔，重驗證，出結果，不誤導css

文章勘誤

在上一篇文章Asciinema：你的全部操做都將被錄製中有兩個地方表述有錯誤或瑕疵，這裏更正一下html

第一個地方爲錄製時的參數--stdin，參數的意思是啓用標準輸入錄製，原文中說看不到效果，可能官方還未支持，實際上官方已經支持了，且查看錄製文件內容時能夠看到區別，如下兩個對比的例子來講明linux

例一：執行下方的命令進行錄製，錄製開始以後執行ssh命令輸入密碼鏈接另外一臺主機web

asciinema rec ops-coffee.cast

執行asciinema cat命令查看執行命令bash

# asciinema cat ops-coffee.cast 
root@onlinegame:~# ssh root@192.168.106.192 ls ops-coffee.cn
root@192.168.106.192's password: 
ops-coffee.cn
root@onlinegame:~# exit
exit

打印錄製的文件內容以下：ssh

# cat ops-coffee.cast 
{"version": 2, "width": 237, "height": 55, "timestamp": 1574060513, "env": {"SHELL": "/bin/bash", "TERM": "linux"}}
[0.012221, "o", "root@onlinegame:~# "]
[0.607184, "o", "exit"]
[1.07092, "o", "\b\b\b\bssh root@192.168.106.192 ls ops-coffee.cn"]
[1.703405, "o", "\r\n"]
[1.762974, "o", "root@192.168.106.192's password: "]
[4.550759, "o", "\r\n"]
[4.558138, "o", "ops-coffee.cn\r\n"]
[4.559187, "o", "root@onlinegame:~# "]
[5.182817, "o", "e"]
[5.582643, "o", "x"]
[5.838648, "o", "i"]
[6.03067, "o", "t"]
[6.759346, "o", "\r\nexit\r\n"]

例二：執行一樣的命令，加上--stdin參數oop

asciinema rec --stdin ops-coffee.1.cast

執行asciinema cat命令查看執行命令post

# asciinema cat ops-coffee.1.cast 
root@onlinegame:~# ssh root@192.168.106.192 ls ops-coffee.cn
root@192.168.106.192's password: 
ops-coffee.cn
root@onlinegame:~# exit
exit

此次再看錄製文件的內容：編碼

# cat ops-coffee.1.cast
{"version": 2, "width": 237, "height": 55, "timestamp": 1574060808, "env": {"SHELL": "/bin/bash", "TERM": "linux"}}
[0.01012, "o", "root@onlinegame:~# "]
[1.654752, "i", "\u001b[A"]
[1.654971, "o", "exit"]
[2.014568, "i", "\u001b[A"]
[2.014727, "o", "\b\b\b\bssh root@192.168.106.192 ls ops-coffee.cn"]
[3.7185, "i", "\r"]
[3.719167, "o", "\r\n"]
[3.781231, "o", "root@192.168.106.192's password: "]
[5.198467, "i", "s"]
[5.542343, "i", "m"]
[5.774451, "i", "i"]
[5.85435, "i", "l"]
[5.990628, "i", "e"]
[6.342587, "i", "\r"]
[6.342817, "o", "\r\n"]
[6.351245, "o", "ops-coffee.cn\r\n"]
[6.351475, "o", "root@onlinegame:~# "]
[7.182384, "i", "e"]
[7.182585, "o", "e"]
[7.461976, "i", "x"]
[7.462183, "o", "x"]
[7.543019, "i", "i"]
[7.543306, "o", "i"]
[7.686868, "i", "t"]
[7.68703, "o", "t"]
[7.87045, "i", "\r"]
[7.871348, "o", "\r\nexit\r\n"]

會發如今實際執行命令徹底一致的狀況下，錄像文件與上一個沒有加--stdin時的不同，其中就多了輸入密碼的記錄smileurl

且在asciinema文件IO流信息的第二個字段不只有了o，還有i的出現，上一篇文章講到o是一個固定字符串不知道做用，通過深刻查詢確認，IO信息流的第二個字段就是固定string字符串，且只會是i或o之間的一種，分別表示stdin標準輸入或stdout標準輸出

--stdin的效果不管是經過asciinema play命令播放或是asciinema cat命令查看都是沒法察覺的，在實現WebSSH錄像回放時又對錄像文件進行了深刻研究，最終發現問題，這裏查漏補缺，予以更正，對於以前的錯誤，深表歉意

Web端使用

asciinema錄製文件在web端播放是經過asciinema-player組件來實現的，使用也是很是的簡單

分別引入css和js文件，添加一個asciinema-player的標籤便可播放標籤內文件的錄像

<html>
<head>
  ...
  <link rel="stylesheet" type="text/css" href="/asciinema-player.css" />
  ...
</head>
<body>
  ...
  <asciinema-player src="/ops-coffee.cast"></asciinema-player>
  ...
  <script src="/asciinema-player.js"></script>
</body>
</html>

asciinema-player標籤內能夠添加以下一些屬性：

cols： 播放終端的列數，默認爲80，若是cast文件的header頭有設置width，這裏無需設置

rows： 播放終端的行數，默認爲24，若是cast文件的header頭有設置height，這裏無需設置

autoplay： 是否自動開始播放，默認不會自動播放

preload： 預加載，若是你想爲錄像配音，這裏能夠預加載聲音

loop： 是否循環播放，默認不循環

start-at： 從哪一個地方開始播放，能夠是123這樣的秒數或者是1:06這樣的時間點

speed： 播放的速度，相似於play命令播放時的-s參數

idle-time-limit： 最大空閒秒數，相似於play命令播放時的-i參數

poster： 播放以前的預覽，能夠是npt:1:06這樣給定時間點的畫面，也能夠是data:text/plain,ops-coffee.cn這樣給定的文字，其中文字支持ANSI編碼，例如能夠給文字加上顏色data:text/plain,\x1b[1;32mops-coffee.cn\x1b[1;0m

font-size： 文字大小，能夠是small、medium、big或者直接是14px這樣的css樣式大小

theme： 終端顏色主題，默認是asciinema，也提供有tango、solarized-dark、solarized-light或者monokai可選擇，固然你也能夠自定義主題

還有幾個參數title、author、author-url、author-img-url分別表示了錄像的標題、做者、做者的主頁、做者的頭像，這些配置會在全屏觀看錄像時顯示在標題欄中，像下邊這樣

最後使用如下參數設置asciinema-player，看看播放的效果

<asciinema-player id="play" 
    title="WebSSH Record" 
    author="ops-coffee.cn" 
    author-url="https://ops-coffee.cn" 
    author-img-url="/static/img/logo.png" 
    src="/static/record/ops-coffee.cast" 
    speed="3" idle-time-limit="2" 
    poster="data:text/plain,\x1b[1;32m2019-11-18 16:26:18\x1b[1;0m用戶\x1b[1;32madmin\x1b[1;0m鏈接主機\x1b[1;32m192.168.106.101:22\x1b[1;0m的錄像記錄">
</asciinema-player>

播放效果以下

同時asciinema-player播放時還支持如下快捷鍵的使用