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

2024-06-07 18:50:14

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), 反序列化时也使用map, 这个时候是map.set(id, element), 动作记录里包含id, 可用于执行动作找到对应元素.

3, requestAnimationFrame 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行.

4, 用一个time变量保存第一个动作时间戳, 累加屏幕刷新率约1000/60, 当时间大于当前动作时候, 队列前面的动作出队, 根据类型执行该动作, 随着time时间增加, 动作队列也逐渐减少, 没有剩余动作时候结束回放.

代码部分:

结构:

录屏实现:

序列化, 反序列化:

录制:

回放实现:

web record 前端页面录屏 (react + typescript)相关推荐

如何实现Web页面录屏？
摘要: 很有意思的操作- 原文:web页面录屏实现译者:frontdog Fundebug经授权转载,版权归原作者所有. 写在前面的话在看到评论后,突然意识到自己没有提前说明,本文可以说是一篇调研 ...
Web 页面录屏实现
(给前端大全加星标,提升前端技能) 作者:frontdog https://juejin.im/post/5c601e2f51882562d029d583 写在前面的话在看到评论后,突然意识到自己没 ...
调整了canvas的高度页面变化后还原_Web 页面录屏实现
(给前端树加星标,提升前端技能) 作者:frontdoghttps://juejin.im/post/5c601e2f51882562d029d583 写在前面的话在看到评论后,突然意识到自己没有提 ...
airtest web 录制滑块_Airtest 录屏总结，这不是一个简单的 recording！
此文章来源于项目官方公众号:"AirtestProject" 版权声明:允许转载,但转载必须保留原链接:请勿用作商业或者非法用途前言经常有同学过来问如何在脚本运行的过程中进行录 ...
RTMP推流协议视频直播点播平台EasyDSS请求时间接口返回的数据打印在前端页面全屏飘红问题解决
TSINGSEE青犀视频团队接到过很多比较大的项目,这类项目的特点是接入数据量多,处理数据量也大,在对服务器造成负荷的同时,也对程序造成了堵塞. 拿EasyDSS视频直播点播平台举例,一旦EasyDS ...
web前端录屏技术方案与实现详解
前言随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们开发人员研发过程中,对于部分偶发事件,异常监控系统仅仅只能告知程序出错 ...
【Web技术】1159- 浅析 Web 录屏技术方案与实现
前言随着互联网技术飞速发展,网页录屏技术已趋于成熟.例如可将录屏技术运用到在线考试中,实现远程监考.屏幕共享以及录屏等:而在我们开发人员研发过程中,对于部分偶发事件,异常监控系统仅仅只能告知程序出错 ...
Python基于Flask框架实现视频直播，电脑桌面录屏web端展示，远程控制电脑
流媒体原理基本介绍流媒体是一种技术,其中,服务器以数据块的形式响应请求. 非常大的响应 .对于非常大的响应而言,内存中收集的响应只返回给客户端,这是很低效的.另一种方法是将响应写入磁盘,然后使用fl ...
实现web前端录屏并下载到本地(利用RecorderRTC.js)
直接上源码,我的代码借鉴了这个老哥用Vue.js写的https://blog.csdn.net/blueXh/article/details/88955821 html: <!DOCTYPE h ...

最新文章

热门文章