web record 前端页面录屏 (react + typescript + parcel)
我的项目地址: https://github.com/bgwd666/we…
演示:
录屏页面:
回放页面:
实现原理:
录屏:
1, 记录页面首次快照 (把初始 dom 序列化解析成虚构 dom, 对象构造).
2, 通过 Map 数据结构 建设关联, 录屏时候, map.set(element, id); // 元素为键，ID 为值, 可用于关联元素增量动作, 或者记录 id (可用于回放时候删除节点).
3, 通过 MutationObserver api 监听 dom 变动, 通过事件监听 记录鼠标, 输入框, 等事件, 而后把解决成增量 action 动作 (加上工夫戳, 队列构造, 先进先出).
4, 完结时候, 进行监听, 解绑一些监听事件.
回放:
1, 在沙箱模式回放, 创立一个 iframe.
2, 把页面快照反序列化 创立刚开始录屏时候的页面, (过滤一些元素，如 script), 反序列化时也应用 map, 这个时候是 map.set(id, element), 动作记录里蕴含 id, 可用于执行动作找到对应元素.
3, requestAnimationFrame 通知浏览器——你心愿执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该办法须要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行.
4, 用一个 time 变量保留第一个动作工夫戳, 累加屏幕刷新率 约 1000/60, 当工夫大于以后动作时候, 队列后面的动作出队, 依据类型执行该动作, 随着 time 工夫减少, 动作队列也逐步缩小, 没有残余动作时候完结回放.
代码局部:
构造 :
录屏实现:
序列化, 反序列化:
录制:
回放实现: