3

Asciinema文章勘误及Web端使用介绍

 2 years ago
source link: https://blog.ops-coffee.cn/s/pcstabodjds8d15arwafza
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Asciinema文章勘误及Web端使用介绍

欠下的债迟早是要还的，查文档，重验证，出结果，不误导

在上一篇文章Asciinema：你的所有操作都将被录制中有两个地方表述有错误或瑕疵，这里更正一下

第一个地方为录制时的参数--stdin，参数的意思是启用标准输入录制，原文中说看不到效果，可能官方还未支持，实际上官方已经支持了，且查看录制文件内容时可以看到区别，以下两个对比的例子来说明

例一：执行下方的命令进行录制，录制开始之后执行ssh命令输入密码连接另一台主机

asciinema rec ops-coffee.cast

执行asciinema cat命令查看执行命令

# asciinema cat ops-coffee.cast 
root@onlinegame:~# ssh [email protected] ls ops-coffee.cn
[email protected]'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 [email protected] ls ops-coffee.cn"]
[1.703405, "o", "\r\n"]
[1.762974, "o", "[email protected]'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 [email protected] ls ops-coffee.cn
[email protected]'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 [email protected] ls ops-coffee.cn"]
[3.7185, "i", "\r"]
[3.719167, "o", "\r\n"]
[3.781231, "o", "[email protected]'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分别表示了录像的标题、作者、作者的主页、作者的头像，这些配置会在全屏观看录像时显示在标题栏中，像下边这样

20191118.png

最后使用以下参数设置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>

播放效果如下

20191118.gif

同时asciinema-player播放时还支持以下快捷键的使用

  • space 空格，播放或暂停
  • f 全屏播放，可以看到title等设置
  • ← / → 快进或快退，每次5秒
  • 0，1，6 ... 9 跳转到录像的0%，10%，60% ... 90%
  • < / > 增加或降低播放速度，play的-s参数

能看到这里一定是真爱，关注一下吧

wx.sou1.png

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK