终端操作的录制与回放以及为技术博客添加动态终端演示

引言

写博客过程中发现每次到展示终端操作的时候，要么截图，要么直接在代码块输入，个人认为，前者不够美观，后者不够清晰。想到了之前在某些Github项目的主页见过的终端操作录制后回放。于是打算学习一下。

初探终端录制：老牌神器 `script`

script是经典的记录终端会话的所有操作的命令，用来记录用户的所有操作和命令的输出信息。

在Mac系统下的script命令和Linux下的script命令的用法是不一样的。

Linux： `script` 与 `scriptreplay` 的基本用法

script负责录制，scriptreplay负责播放。

script

基本使用：默认情况下，直接在终端输入 script 并回车，它会开始记录并将内容保存到当前目录下名为 typescript 的文件中，使用 exit 命令或 Ctrl-D 即可结束录制。通常可以指定输出文件，如script my_session.log，将会话保存到my_session.log中。
为回放做准备：为了能够被scriptreplay播放，同时需要生成时间戳文件，使用-t参数：script --timing=time.txt session.log。此时，会生成两个文件time.txt和session.log。这两个文件作为scriptreplay的参数启动。
运行单条命令：使用 -c 选项可以直接录制并退出，例如 script -c 'ls -l' output.log
强制无缓冲输出：当你需要让其他人（或另一个进程）实时地、同步地看到你的终端操作时，可使用-f参数。你script -f live，另一个人执行tail -f live。可以实时在另一个人那里显示你的操作内容。

强制无缓冲输出实践效果

查看更多用法执行man script

⚠️ 安全提示：script 命令会记录下你输入的所有内容，包括密码等敏感信息

scriptreplay

基本用法：回放需要两个文件：时间戳文件（由 script 的 -t 选项生成）和会话数据文件。例如 scriptreplay time.txt session.log
调整播放速度：使用 -d 参数可以调整回放速度。例如 -d 2 表示以两倍速播放，而 -d 0.5 则表示以半速播放
设置最大延迟：如果原始会话中两次操作之间的间隔时间过长（比如等待了5分钟），可以使用 -m 参数设置一个最大延迟时间。例如 -m 2 会强制将任何超过2秒的等待时间缩短为2秒，让回放更流畅

操作流程

bash

# 1.开始录制
script --timing=my_time.txt my_session.log
# 2.一系列操作
pwd
ls
...
# 3.结束录制
exit
# 4.回放
scriptreplay my_time.txt my_session.log

Mac：`script`的基本用法

在 macOS 上，script 命令的用法和 Linux（GNU 版本）有很大不同：

不需要单独的 scriptreplay 工具：macOS 的 script 直接内置了播放功能。
不需要分成两个文件（时间+内容）：macOS 只需要一个文件，它会将时间戳和终端输出打包记录在一起。

操作流程

zsh

# 1.开始录制 -r(record)
script -r session.log
# 2.操作命令
ls
pwd
...
# 3.退出录制
exit
# 4.回放录制 -p(playback)
script -p session.log

不过script不适合在网页预览，在网页中还需要用更现代的方案。

拥抱 `asciinema`

asciinema是一个更加现代化的跨平台工具。

以下内容来自官方文档：Getting started - asciinema docs

安装

zsh

# download a pre-built, static binary of the latest version from the releases page.
# https://github.com/asciinema/asciinema/releases

# Debian,Ubuntu
sudo apt install asciinema

# Arch,Manjaro
sudo pacman -S asciinema

# macOS
brew install asciinema

# pipx (asciinema 2.4 only)
pipx install asciinema

本地录播快速上手

zsh

# 录制到demo.cast
asciinema rec demo.cast

# 播放demo.cast
asciinema play demo.cast

# 上传你的录制到asciinema.org，下载后会有七天的有效期，
asciinema upload demo.cast

除了上传到官方，还可以用docker自己部署。参考以下链接：Self-hosting the server

agg命令从录像转为gif

Installation - asciinema docs

这个需要先去下载可执行文件，放到相关bin目录，或者直接执行。

直接到GitHubRelease下载

zsh

cd ~/Downloads
# 前提~/.local/bin/agg在环境变量里
mv agg-aarch64-apple-darwin ~/.local/bin/agg
chmod +x ~/.local/bin/agg

# 把hello.cast转为hello.gif
➜  ~ agg hello.cast hello.gif
16 / 16 [===========================================] 100.00 % 33.55/s

hello

在 Web 页面播放

嵌入已经上传的录制

默认upload是没有链接到任何账户的，在七天后会被删除，需要注册账户来保持。

或者自己部署一个上传站点。

当上传到网站之后，点击Share，

直接嵌入播放器到网站中。或用上面的Markdown和HTML的link跳转到播放站点。

直接在网页中播放文件

引入asciinema-player.css和asciinema-player.min.js，然后载入cast文件，挂载到<div id="demo">。

html

<!DOCTYPE html>
<html>
<head>
  ...
  <link rel="stylesheet" type="text/css" href="/asciinema-player.css" />
  ...
</head>
<body>
  ...
  <div id="demo"></div>
  ...
  <script src="/asciinema-player.min.js"></script>
  <script>
    AsciinemaPlayer.create('/demo.cast', document.getElementById('demo'));
  </script>
</body>
</html>

其他

我这个博客框架需要在目录引入npm包，然后写个小组件嵌入，直接渲染js不安全。

终端操作的录制与回放以及为技术博客添加动态终端演示

终端操作的录制与回放以及为技术博客添加动态终端演示

评论区