Asciinema article Errata and end use Web presentation

Debt owed sooner or later have to repay, check documents, re-verification, the results are not misleading

Articles Errata

In the previous article Asciinema: All of your actions will be recorded in two places statements have errors or defect correction here

The first place for the time of recording parameters --stdincan see the difference, the mean parameters enable standard input recording, the original text says do not see results, not yet official support might actually have official support, and to review the recording file , two comparative examples will be described below

One case: under the command of record, execute ssh command to enter the password to connect to another host after recording begins

asciinema rec ops-coffee.cast

Execute asciinema catcommand to view the execution command

# 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

Print the contents of the recorded files are as follows:

# 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"]

Two cases: execute the same command, with --stdinparameters

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

Execute asciinema catcommand to view the execution command

# 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

Look at the contents of the recorded files:

# 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"]

Will find in the case of the actual implementation of exactly the same command on a video file with no increase --stdinis not the same when, among them more than a record of the passwordsmile

And not only have the second field asciinema file IO streams of information o, as well as ithe emergence of the article mentioned ois a fixed string does not know the role, after in-depth inquiries, the second field IO traffic is fixed string string, and it is only ior oone kind between each represents stdinthe standard input or stdoutstandard output

--stdinThe effect whether by asciinema playcommand or play asciinema catcommand to view all undetectable, for video files in-depth research to achieve WebSSH video playback time and eventually found the problem, here it may say, be corrected for errors before, deep sorry

Web end use

asciinema play recorded files in the web through the end asciinema-playerto achieve the assembly, it is also very simple to use

Were introduced css and js files, add a asciinema-playerlabel to play video tags within the file

<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 in the tag attributes may be added as follows:

cols: Play series terminals, the default is 80, if the header file header cast has set width, without setting here

rows: the number of rows player terminals, the default is 24, if the header file header cast has set height, without setting here

autoplay: whether to automatically start playing, by default does not automatically play

preload: preload, if you want to dub the video, where you can pre-loaded sound

loop: whether the loop, not the default cycle

start-at: start playback from which place, may be 123such a number of seconds or 1:06so of time

speed: playback speed, similar to when the play command to play -sparameters

idle-time-limit: maximum Idle seconds, similar to when the play command to play -iparameters

poster: preview before play, may be npt:1:06so given point in time to the picture, it may be data:text/plain,ops-coffee.cnsuch given language, which supports ANSI character encoding, for example, adding color to textdata:text/plain,\x1b[1;32mops-coffee.cn\x1b[1;0m

font-size: text size, may be small, medium, bigor directly to 14pxthis size css style

theme: terminal color theme, the default is asciinemaalso provided with tango, solarized-dark, solarized-lightor monokaito choose from, of course, you can also customize the theme

There are several parameters title , author , author-url , author-img-url represent the video title, the author, the author's home page, the author's head, these configurations will be displayed in the title bar while watching the video in full screen, like below this

Finally, use the following parameter settings asciinema-player, player to see results

<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>

Playback as follows

Meanwhile asciinema-player play Shihai supports the following shortcuts

space Spaces, play or pause
f Full screen, you can see the title and other settings
←/ →Fast-forward or rewind, every 5 seconds
0，1，6 ... 9 Jump to Record 0%, 10%, 60% ... 90%
</ >Increase or decrease the playback speed, play the -sparameters

Scan code number to see more public attention and practical articles