web record 前端页面录屏 (react + typescript)

web record 前端页面录屏 (react + typescript + parcel)

项目地址: https://github.com/bgwd666/web-record

演示:

录屏页面:

回放页面:

实现原理:

录屏:

1, 记录页面初次快照(把初始dom 序列化解析成虚拟dom, 对象结构).

2, 通过 Map 数据结构 建立关联, 录屏时候, map.set(element, id); //元素为键，ID为值, 可用于关联元素增量动作, 或者记录id (可用于回放时候删除节点).

3, 通过 MutationObserver api 监听 dom 变化, 通过事件监听 记录鼠标, 输入框, 等事件, 然后把处理成增量action动作(加上时间戳, 队列结构, 先进先出).

4, 结束时候, 停止监听, 解绑一些监听事件.

回放:

1, 在沙箱模式回放, 创建一个 iframe.

2, 把页面快照反序列化 创建刚开始录屏时候的页面, (过滤一些元素，如 script), 反序列化时