timecat.js一款web屏幕录制与播放插件-BFW插件库

timecat.js一款web屏幕录制与播放插件

timecat.js一款web屏幕录制与播放插件，可以录制网页的所有操作过程及音频，然后可以播放录制的录像，录制的文件大小很小，支持快进、播放、暂停，他与传统的视频录制不一样，传统的视频录制是将画面像素变成mp4压缩视频，而timecat只是记录用户在网页上的操作数据，例如点击了什么元素、输入了什么数据，然后利用网络劫持技术，将用户的访问的网页及操作数据记录下来，所有理论上timecat录制的不是视频，而是用户的操作记录数据。

使用方式：

npm

$ npm i timecatjs
或者
$ yarn add timecatjs

cdn

第二步使用

<script type="module">
        
const { Recorder, Player } =TimeCat

const recorder = new Recorder()
//录制

const player = new Player()
//播放
</script>

TimeCat 项目主要分为 Recorder 和 Player 两个主要的模块，分别负责记录动作数据，与对动作数据进行还原。

Recorder

Recorder 是一个用户操作记录器，通过利用浏览器的原生事件 API 与数据劫持等方式，把浏览器操作过程中网页内部的所有变化映射成相应的数据，包括 Canvas、DOM、Font、CSS、Audio 等不同类型的数据分别进行处理，并持久化的存储到浏览器存储空间中

Player

Player 是一个特殊的播放器，针对 Recorder 产生的特殊数据进行还原，把数据重新渲染成一个网页，按照时间次序依次的执行每一帧动作数据产生动画，同时 Player 还实现了跳转，快进，导出，全屏等功能，使之接近真正的视频播放器操作模式

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

</head>
<body>
   <img src='//repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png' />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/timecat.js"></script>
<button  onclick="record()">录制</button>

<button onclick="play()">播放</button>
<script >
        
const { Recorder, Player } =TimeCat
 var recorder=null;
function record(){
    recorder = new Recorder()
}

//录制
function play(){
    recorder.destroy()
    new Player()
}

//播放
</script>
</body>
</html>

更多的参数手册请参考官网：https://timecatjs.com/docs/