How It Works

如果你爱打游戏，一定打过魔兽争霸3（暴露年纪🤣），你也许会对游戏导出的录像文件感到好奇，明明打了一个小时游戏，为什么录像才几百KB？不过很快你又会发现另一个问题，在每次导入录像的时候都需要重新加载一次地图，否则就不能播放？

录像记录的数据不是一个视频文件，而是带着时间戳的一系列动作，导入地图的时候，实际相当于初始了一个状态，在这个状态的基础上，只需要对之前的动作进行还原，也就还原了之前的游戏过程，这就是录像的基本原理了

相关问题：《魔兽争霸》的录像，为什么长达半小时的录像大小只有几百 KB？

录制 Web 其实也借鉴这样的一种思路，利用这样的方式录制的视频，本质上不是一个视频，但是却可以像真正的视频一样播放。通过记录一系列的浏览器事件数据，利用浏览器引擎重新渲染，还原了之前的操作过程，也就还原了网页的操作动画

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

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

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