[发明专利]网页录屏方法、系统、设备及存储介质

说明书

本发明提供了一种网页录屏方法、系统、设备及存储介质，该方法包括：对网页的文档对象模型DOM树进行遍历，将所述DOM树中的节点映射成虚拟节点；采集影响所述网页的节点变化的动作数据；采集所述网页中的鼠标移动数据；将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，得到录屏文件。本发明适用于对浏览器中的网页进行录屏，无需下载录屏软件，使用成本低，即使长时间录制也不会影响处理器性能，录制的文件体积小，可以便捷地将录制的文件进行传输，可以精确锁定录屏区域，仅对需要录屏的区域进行录制，可以很好地应用于监控系统、行为分析、案例复盘、远程教育等领域。

技术领域

本发明涉及数据处理技术领域，尤其涉及一种网页录屏方法、系统、设备及存储介质。

背景技术

网页录屏是指对当前PC(个人电脑)端运行的浏览器中的操作流程进行录制，在监控系统、行为分析、案例复盘、远程教育等领域有大量应用场景。目前针对PC端的网页录屏主要的方式有：通过下载桌面端屏幕录像软件进行网页录屏或者苹果电脑用户使用系统自带的QuickTime Player软件进行网页录屏。

然而，现有的网页录屏方式主要存在如下一些问题：

(1)必须下载桌面端录屏软件，且这些软件安装成本高，在Windows平台和苹果平台不一致，对于用户来说，学习成本高；

(2)长时间录制会降低处理器性能；

(3)录制的文件为视频格式，体积较大，传送给他人会非常不便捷，如果使用聊天工具进行文件传送，则视频文件会被聊天工具压缩，造成播放的时候清晰度下降；

(4)录制的是整个屏幕的内容，很难指定区域，容易造成隐私泄漏，表述重点模糊不清。

发明内容

针对现有技术中的问题，本发明的目的在于提供一种网页录屏方法、系统、设备及存储介质，无需下载录屏软件，录制的文件体积小，可以精确锁定录屏区域。

本发明实施例提供一种网页录屏方法，包括如下步骤：

对网页的文档对象模型DOM树进行遍历，将所述DOM树中的节点映射成虚拟节点；

采集影响所述网页的节点变化的动作数据；

采集所述网页中的鼠标移动数据；

将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，得到录屏文件。

在一些实施例中，所述采集影响所述网页的节点变化的动作数据，包括基于变动观察器MutationObserver和addEventListener函数采集影响所述网页的节点变化的动作数据。

在一些实施例中，采集影响所述网页的节点变化的动作数据，包括将影响所述网页的节点变化的动作数据存储于栈中，所述栈中的每个对象对应于一帧动作数据。

在一些实施例中，采集所述网页中的鼠标移动数据，包括如下步骤：

采集所述网页中鼠标的点击数据和停留数据。

在一些实施例中，所述网页录屏方法还包括通过HTML提供的webRTC接口进行音频录制，得到音频数据；

将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，包括将所述虚拟节点、所述动作数据、所述鼠标移动数据和所述音频数据打包。

在一些实施例中，所述得到音频数据之后，所述网页录屏方法还包括将所述音频数据转为MP3格式的数据。

在一些实施例中，将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，包括将所述虚拟节点、所述动作数据和所述鼠标移动数据基于Gzip进行压缩，得到压缩后的录屏文件。

在一些实施例中，所述得到录屏文件之后，所述网页录屏方法还包括如下步骤：