欠下的債遲早是要還的,查文檔,重驗證,出結果,不誤導
文章勘誤
在上一篇文章中有兩個地方表述有錯誤或瑕疵,這裏更正一下
第一個地方為錄製時的參數--stdin
,參數的意思是啟用標準輸入錄製,原文中說看不到效果,可能官方還未支持,實際上官方已經支持了,且查看錄製文件內容時可以看到區別,以下兩個對比的例子來說明
例一:執行下方的命令進行錄製,錄製開始之後執行ssh命令輸入密碼連接另一台主機
asciinema rec ops-coffee.cast
執行asciinema cat
命令查看執行命令
# 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
打印錄製的文件內容如下:
# 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
參數
asciinema rec --stdin ops-coffee.1.cast
執行asciinema cat
命令查看執行命令
# 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
時的不一樣,其中就多了輸入密碼的記錄smile
且在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播放時還支持以下快捷鍵的使用
space
空格,播放或暫停
f
全屏播放,可以看到title等設置
←
/ →
快進或快退,每次5秒
0,1,6 ... 9
跳轉到錄像的0%,10%,60% … 90%
<
/ >
增加或降低播放速度,play的-s
參數
相關文章推薦閱讀:
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能
※評比前十大台北網頁設計、台北網站設計公司知名案例作品心得分享
※智慧手機時代的來臨,RWD網頁設計已成為網頁設計推薦首選
※台灣海運大陸貨務運送流程
※兩岸物流進出口一站式服務