webrecord前端页面录制(react+typescript+parcel)项目地址:https://github.com/bgwd666/we...demo:屏幕录制page:回放页面:实现原理:屏幕录制:1.记录页面的第一张快照(将初始dom序列化解析成虚拟dom,对象结构)。2.通过Map数据结构建立关联。录屏时,map.set(element,id);//元素为key,id为value,可用于关联元素增量动作,或记录id(可用于播放时删除节点)。3.通过MutationObserverapi监听dom变化,通过事件监听记录鼠标和输入框,等待事件发生,然后处理成增量动作(添加时间戳,队列结构,先进先出)。4.最后停止监听,解绑一些监听事件。回放:1、沙盒模式回放,创建一个iframe。2、反序列化页面快照创建开始录屏时的页面,(过滤一些元素,比如script),反序列化的时候使用map,这次是map.set(id,element),action记录包含id,可以用来执行动作找到对应的元素。3、requestAnimationFrame告诉浏览器你要执行一个动画,要求浏览器在下次重绘前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,回调函数会在浏览器下次重绘前执行。4、用一个时间变量保存第一个动作的时间戳,累计屏幕刷新率大约为1000/60,当时间大于当前动作时,排在队列前面的动作就会出队,并且将根据类型执行操作。随着时间的增加,动作队列会逐渐减少,当没有剩余动作时播放结束。代码部分:结构:录屏实现:序列化、反向Serialization:record:playback实现:
