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

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

文章勘误

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

第一个地方为录制时的参数--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参数