How It Works

技术简介#

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

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

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

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

技术实现#

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

Recorder#

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

Player#

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