开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情
想要实现在前端录制网页中的内容以及对网页做的各种操作，并且录制的内容在回放的时候可以点页面击进行交互，效果如下：
TimeCat实现
它的本质上不是一个视频，因为视频上播放的内容是不可操作的，但是它可以像真正的视频一样播放内容。它支持多种类型的页面录制，比如 PDF、文档、Echarts、多页面等。
网上可参考的 timecat 的使用教程并不是很多，所以结合开发过程中的体验来介绍一下实现的过程。
安装和引用
安装全部：
npm i timecatjs
或者也可以只安装用到的模块
npm i @timecat/recorder
npm i @timecat/player
引用：
import { Recorder, Player } from 'timecatjs';
// 局部引用
// import { Recorder } from '@timecat/recorder'
// import { Player } from '@timecat/player'
使用
- Recorder 录制网站
- 把浏览器操作过程中网页内部的所有变化映射成数据，包括 Canvas、DOM、Font、CSS、Audio 等不同类型的数据会分别进行处理
- Player 播放录制内容
- 将 Recorder 产生的数据渲染成一个网页，并生成动画，可以进行跳转，快进，导出，全屏等功操作（类似于真正的视频播放器）
this.recorder = new Recorder(); //
this.recorder.destroy(); // 销毁Recorder，结束录制
this.player = new Player({
target: '.player', // 播放器的容器,类型：string | HTMLElement
records:event, // 播放的内容
autoplay: true, // 自动播放
})
this.player.destroy(); // 销毁
生成一个 Player 后，页面的DOM 结构：
其它操作案例可参考官方文档：TimeCat 文档
除了上述的方法，rrweb 也是一种类似的解决方案，它提供了 record 和 replay 两个方法，record 会记录页面上 DOM 的变化，replay 会根据时间戳去还原记录好的 DOM 变化。
