CN113792233A - 网页录屏方法、系统、设备及存储介质 - Google Patents

Abstract

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

Description

网页录屏方法、系统、设备及存储介质

技术领域

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

背景技术

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

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

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

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

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

基于浏览器数据库indexedDB存储所述录屏文件；

通过WebSocket协议或HTTP协议将所述录屏文件持续上传到录屏服务器中。

在一些实施例中，所述网页录屏方法还包括采集canvas插件中的绘图数据和/或采集ifame网页嵌套数据；

将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，所述网页录屏方法还包括将所述绘图数据和/或所述网页嵌套数据与所述虚拟节点、所述动作数据、所述鼠标移动数据一起打包。

本发明实施例还提供一种网页录屏系统，用于实现所述的网页录屏方法，所述系统包括：

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

动作采集模块，用于采集影响所述网页的节点变化的动作数据；

鼠标采集模块，用于采集所述网页中的鼠标移动数据；

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

在一些实施例中，所述系统的代码通过RollUp打包器处理后，加载于浏览器中。

本发明实施例还提供一种网页录屏设备，包括：

处理器；

存储器，其中存储有所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行所述的网页录屏方法的步骤。

本发明实施例还提供一种计算机可读存储介质，用于存储程序，所述程序被处理器执行时实现所述的网页录屏方法的步骤。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

本发明的网页录屏方法、系统、设备及存储介质具有如下有益效果：

本发明适用于对浏览器中的网页进行录屏，解决了现有技术中录屏软件使用成本高、录制结果体积大、不易分享传输和占用过多CPU性能的问题，无需下载录屏软件，使用成本低，即使长时间录制也不会影响处理器性能，录制的文件体积小，可以便捷地将录制的文件进行传输，可以精确锁定录屏区域，仅对需要录屏的区域进行录制，可以很好地应用于监控系统、行为分析、案例复盘、远程教育等领域。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显。

图1是本发明一实施例的网页录屏方法的流程图；

图2是本发明一实施例的网页录屏系统的结构示意图；

图3是本发明一实施例的网页录屏设备的结构示意图；

图4是本发明一实施例的计算机可读存储介质的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

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

S100：对网页的文档对象模型DOM树进行遍历，将所述DOM树中的节点映射成虚拟节点VNODE，此处虚拟节点即为虚拟的DOM节点，在录屏时将虚拟节点进行序列化，在后续播放器播放录屏文件时，将虚拟节点进行反序列化，从而实现过程还原；

文档对象模型DOM(Document Object Model)把XML文档视为一种树结构。这种树结构被称为节点树，即DOM树。可通过这棵树访问所有节点。可以修改或删除它们的内容，也可以创建新的元素；

这颗节点树展示了节点的集合，以及它们之间的联系。

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

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

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

该实施例的网页录屏方法中，每个步骤的序号仅为区分各个步骤，而不作为各个步骤的具体执行顺序的限定，上述各个步骤之间的执行顺序可以根据需要调整改变。例如，步骤S200和步骤S300在实际执行中一般是并行执行的，即同时采集影响网页的节点变化的动作数据和采集网页中的鼠标移动数据。

本发明的网页录屏方法可以作为一种浏览器插件来实现，提供超高性能、超高压缩比的网页无损录制的方案，具有插件易下载、录制体积小、无损显示、无级缩放和窗口自适应的优点。本发明通过记录DOM节点相关的动作数据，来记录浏览器事件数据可以实现网页录屏。在播放器播放录屏文件时，基于虚拟节点和栈中存储的动作数据，利用浏览器引擎重新渲染，还原之前的操作流程，从而实现了录屏器的效果。播放器在进行播放时，可以根据需要控制播放、暂停、快进等。

具体地，本发明首先通过通过步骤S100遍历网页中的DOM树，将DOM树中节点映射成虚拟节点，得到网页结构数据。然后通过步骤S200和S300采集网页中动作数据和鼠标移动数据，实现录屏过程中的相关数据采集，通过步骤S400将采集到的数据打包即可以得到录屏文件。通过采用本发明的网页录屏方法，无需下载录屏软件，使用成本低，即使长时间录制也不会影响处理器性能，录制的文件体积小，可以便捷地将录制的文件进行传输，可以精确锁定录屏区域，仅对需要录屏的区域进行录制。

在该实施例中，所述采集影响所述网页的节点变化的动作数据，包括基于变动观察器MutationObserver和addEventListener函数采集影响所述网页的节点变化的动作数据。变动观察器MutationObserver为观察DOM树结构发生变化时，做出相应处理的应用程序编程接口API。addEventListener函数将指定的监听器注册到EventTarget上,当该对象触发指定的事件时，指定的回调函数就会被执行。本发明基于变动观察器MutationObserver和addEventListener函数可以实时采集影响网页中节点变化的动作数据。在录屏结束后，通过播放器进行播放时而还原整个过程时，播放器可以基于虚拟节点和动作数据还原出真实的DOM树。

在该实施例中，所述步骤S200中，采集影响所述网页的节点变化的动作数据，包括将影响所述网页的节点变化的动作数据存储于栈中，所述栈中的每个对象对应于一帧动作数据。具体地，H5播放器中会内置一个精确的计时器。本发明通过栈的对象对应于每帧的动作数据的存储，在录屏结束后，通过播放器进行播放时而还原整个过程时，播放器可以通过RAF(RequestAnimationFrame)对录屏文件中栈存储的数据帧的时间戳进行扫描，从而得知下一帧在什么时间发生。RequestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。

在网页中移动鼠标会产生很多mouseMove(鼠标移动)事件，对于录屏业务场景来说，无需100％还原精确的鼠标轨迹，通常只会关心鼠标是在哪里点击和鼠标在哪里停留的，通过这两个策略可以对鼠标轨迹进行精简。在该实施例中，所述步骤S300中，采集所述网页中的鼠标移动数据，包括采集所述网页中鼠标的点击数据和停留数据。在录屏结束后，通过播放器进行播放时而还原整个过程时，播放器可以通过根据点击数据和停留数据，使用样条曲线对鼠标移动轨迹进行模拟，即可以得到一个带弧度的轨迹。其中，可以设置为鼠标在一个位置停留时间超过预设停留时间阈值时认为鼠标在此地进行停留，则将对应的鼠标位置数据和停留时间记录为停留数据。点击数据可以包括鼠标的点击位置和鼠标的停留时间等。

在该实施例中，所述网页录屏方法还包括对音频的录制，即所述方法还包括通过HTML(Hyper Text Markup Language，超文本标记语言)提供的webRTC(Web Real-TimeCommunication，网页即时通信)接口进行音频录制，得到音频数据。

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

在该实施例中，所述得到音频数据之后，所述网页录屏方法还包括将所述音频数据转为MP3格式的数据。由于录制的对象主要是人声，对音质要求不是特别高，通过将所述音频数据转为MP3格式的数据可以大大节省文件占用空间。进一步地，还可以通过现有的第三方分析软件自动识别音频数据中的语言，转换为文字后生成字幕。

在该实施例中，所述步骤S400中，将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，包括将所述虚拟节点、所述动作数据和所述鼠标移动数据基于Gzip进行压缩，得到压缩后的录屏文件。Gzip是个使用广泛的压缩程序，文件经它压缩过后，可以缩小文件所占用的体积，以节省存储空间，方便后续录屏文件的传输。

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

在录屏的客户端，基于浏览器数据库indexedDB存储所述录屏文件，IndexedDB是一个用于在浏览器中储存较大数据结构的Web API,并提供索引功能以实现高性能查找；

通过WebSocket协议或HTTP协议将所述录屏文件持续上传到录屏服务器中。WebSocket WebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单。HTTP协议(HyperTextTransfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议。此处录屏服务器可以是设置在云端的服务器，提供录屏文件存储、传输和共享的服务。存储在云端服务器的录屏文件可以是经过加密处理的，从而保证文件的安全性。

在该实施例中，所述网页录屏方法还包括采集canvas插件中的绘图数据和/或采集ifame网页嵌套数据。Canvas可以实现在网页中的绘图，需要通过canvas采集其中的绘图数据。Iframe是HTML标签，作用是文档中的文档，或者浮动的框架。iframe元素会创建包含另外一个文档的内联框架(即行内框架)，可以实现网页嵌套。通过采集canvas插件中的绘图数据和/或采集ifame网页嵌套数据，可以实现对网页中更全面的数据的采集。

所述步骤S400中，将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，所述网页录屏方法还包括将所述绘图数据和/或所述网页嵌套数据与所述虚拟节点、所述动作数据、所述鼠标移动数据一起打包。

在该实施例中，将所述虚拟节点、所述动作数据、所述鼠标移动数据、所述绘图数据、所述网页嵌套数据和所述音频数据打包之后，得到的录屏文件较小，可以便捷地进行数据传输。并且为了加强数据可靠性传输，可以进一步进行录屏文件的加密，以进一步提高录屏文件的安全性。

经过测试，录制一份1080P24f的视频时，在视频未压缩的情况下，使用现有的录屏软件录制出来的文件体积高达500GB，通过本发明的网页录屏方法录制出的文件大小只有100Kb，体积至少节省200倍以上。并且通过专业CPU软件分析，录制过程中CPU的内存占用比率也下降了70％。因此，本发明的网页录屏方法即使长时间录制也不会影响处理器性能，录制的文件体积小，可以便捷地将录制的文件进行传输。

如图2所示，本发明实施例还提供一种网页录屏系统，用于实现所述的网页录屏方法，所述系统包括：

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

动作采集模块M200，用于采集影响所述网页的节点变化的动作数据；

鼠标采集模块M300，用于采集所述网页中的鼠标移动数据；

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

本发明首先通过通过节点映射模块M100遍历网页中的DOM树，将DOM树中节点映射成虚拟节点，得到网页结构数据。然后通过动作采集模块M200和鼠标采集模块M300采集网页中动作数据和鼠标移动数据，实现录屏过程中的相关数据采集，通过数据打包模块M400将采集到的数据打包即可以得到录屏文件。通过采用本发明的网页录屏方法，无需下载录屏软件，使用成本低，即使长时间录制也不会影响处理器性能，录制的文件体积小，可以便捷地将录制的文件进行传输，可以精确锁定录屏区域，仅对需要录屏的区域进行录制。

在一些实施例中，所述系统的代码通过RollUp打包器处理后，生成多种格式版本，例如UMD(Universal Module Definition，通用模块定义规范)和ESM(ECMA ScriptModules，用于将前端模块化)等，得到Chrome插件或Safari插件，然后将打包得到的插件加载于浏览器中，在后续需要使用该插件进行录屏时，可以直接调用，无需额外安装录屏软件。其中，RollUp打包器是一种JavaScript模块打包器，其具有兼容性高、统一处理、对代码进行压缩处理的优势。所述加载于浏览器中，可以通过在项目中加载SDK(软件开发工具包)或者利用Chrome(Chrome是一款由Google公司开发的网页浏览器)的插件注入UMD模块，可以很方便地加载代码，在浏览器中即可控制数据录制的过程。

在该实施例中，所述网页录屏系统还包括音频录制模块，用于对音频的录制，具体地，所述音频录制模块用于通过HTML提供的webRTC接口进行音频录制，得到音频数据。进一步地，为了减小音频数据的体积，所述音频录制模块在得到音频数据之后，还用于将所述音频数据转为MP3格式的数据。

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

在该实施例中，所述网页录屏系统还包括用于采集canvas插件中的绘图数据的绘图数据采集模块和/或用于采集ifame网页嵌套数据的网页嵌套数据采集模块。

所述数据打包模块M400将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，包括将所述绘图数据和/或所述网页嵌套数据与所述虚拟节点、所述动作数据、所述鼠标移动数据一起打包。

本发明实施例还提供一种网页录屏设备，包括处理器；存储器，其中存储有所述处理器的可执行指令；其中，所述处理器配置为经由执行所述可执行指令来执行所述的网页录屏方法的步骤。

所属技术领域的技术人员能够理解，本发明的各个方面可以实现为系统、方法或程序产品。因此，本发明的各个方面可以具体实现为以下形式，即：完全的硬件实施方式、完全的软件实施方式(包括固件、微代码等)，或硬件和软件方面结合的实施方式，这里可以统称为“电路”、“模块”或“平台”。

下面参照图3来描述根据本发明的这种实施方式的电子设备600。图3显示的电子设备600仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图3所示，电子设备600以通用计算设备的形式表现。电子设备600的组件可以包括但不限于：至少一个处理单元610、至少一个存储单元620、连接不同系统组件(包括存储单元620和处理单元610)的总线630、显示单元640等。

其中，所述存储单元存储有程序代码，所述程序代码可以被所述处理单元610执行，使得所述处理单元610执行本说明书上述网页录屏方法部分中描述的根据本发明各种示例性实施方式的步骤。例如，所述处理单元610可以执行如图1中所示的步骤。

所述存储单元620可以包括易失性存储单元形式的可读介质，例如随机存取存储单元(RAM)6201和/或高速缓存存储单元6202，还可以进一步包括只读存储单元(ROM)6203。

所述存储单元620还可以包括具有一组(至少一个)程序模块6205的程序/实用工具6204，这样的程序模块6205包括但不限于：操作系统、一个或者多个应用程序、其它程序模块以及程序数据，这些示例中的每一个或某种组合中可能包括网络环境的实现。

总线630可以为表示几类总线结构中的一种或多种，包括存储单元总线或者存储单元控制器、外围总线、图形加速端口、处理单元或者使用多种总线结构中的任意总线结构的局域总线。

电子设备600也可以与一个或多个外部设备700(例如键盘、指向设备、蓝牙设备等)通信，还可与一个或者多个使得用户能与该电子设备600交互的设备通信，和/或与使得该电子设备600能与一个或多个其它计算设备进行通信的任何设备(例如路由器、调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口650进行。并且，电子设备600还可以通过网络适配器660与一个或者多个网络(例如局域网(LAN)，广域网(WAN)和/或公共网络，例如因特网)通信。网络适配器660可以通过总线630与电子设备600的其它模块通信。应当明白，尽管图中未示出，可以结合电子设备600使用其它硬件和/或软件模块，包括但不限于：微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。

本发明实施例还提供一种计算机可读存储介质，用于存储程序，所述程序被处理器执行时实现所述的网页录屏方法的步骤。在一些可能的实施方式中，本发明的各个方面还可以实现为一种程序产品的形式，其包括程序代码，当所述程序产品在终端设备上执行时，所述程序代码用于使所述终端设备执行本说明书上述网页录屏方法部分中描述的根据本发明各种示例性实施方式的步骤。

参考图4所示，描述了根据本发明的实施方式的用于实现上述方法的程序产品800，其可以采用便携式紧凑盘只读存储器(CD-ROM)并包括程序代码，并可以在终端设备，例如个人电脑上执行。然而，本发明的程序产品不限于此，在本文件中，可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

所述程序产品可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以为但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

所述计算机可读存储介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了可读程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。可读存储介质还可以是可读存储介质以外的任何可读介质，该可读介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。可读存储介质上包含的程序代码可以用任何适当的介质传输，包括但不限于无线、有线、光缆、RF等等，或者上述的任意合适的组合。

可以以一种或多种程序设计语言的任意组合来编写用于执行本发明操作的程序代码，所述程序设计语言包括面向对象的程序设计语言—诸如Java、C++等，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。在涉及远程计算设备的情形中，远程计算设备可以通过任意种类的网络，包括局域网(LAN)或广域网(WAN)，连接到用户计算设备，或者，可以连接到外部计算设备(例如利用因特网服务提供商来通过因特网连接)。

综上所述，通过采用本发明的网页录屏方法、系统、设备及存储介质，适用于对浏览器中的网页进行录屏，解决了现有技术中录屏软件使用成本高、录制结果体积大、不易分享传输和占用过多CPU性能的问题，无需下载录屏软件，使用成本低，即使长时间录制也不会影响处理器性能，录制的文件体积小，可以便捷地将录制的文件进行传输，可以精确锁定录屏区域，仅对需要录屏的区域进行录制，可以很好地应用于监控系统、行为分析、案例复盘、远程教育等领域。

以上内容是结合具体的优选实施方式对本发明所作的进一步详细说明，不能认定本发明的具体实施只局限于这些说明。对于本发明所属技术领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干简单推演或替换，都应当视为属于本发明的保护范围。

Claims (13)

1.一种网页录屏方法，其特征在于，包括如下步骤：

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

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

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

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

2.根据权利要求1所述的网页录屏方法，其特征在于，所述采集影响所述网页的节点变化的动作数据，包括基于变动观察器MutationObserver和addEventListener函数采集影响所述网页的节点变化的动作数据。

3.根据权利要求1所述的网页录屏方法，其特征在于，采集影响所述网页的节点变化的动作数据，包括将影响所述网页的节点变化的动作数据存储于栈中，所述栈中的每个对象对应于一帧动作数据。

4.根据权利要求1所述的网页录屏方法，其特征在于，采集所述网页中的鼠标移动数据，包括如下步骤：

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

5.根据权利要求1所述的网页录屏方法，其特征在于，还包括通过HTML提供的webRTC接口进行音频录制，得到音频数据；

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

6.根据权利要求5所述的网页录屏方法，其特征在于，所述得到音频数据之后，还包括将所述音频数据转为MP3格式的数据。

7.根据权利要求1所述的网页录屏方法，其特征在于，将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，包括将所述虚拟节点、所述动作数据和所述鼠标移动数据基于Gzip进行压缩，得到压缩后的录屏文件。

8.根据权利要求1所述的网页录屏方法，其特征在于，所述得到录屏文件之后，还包括如下步骤：

基于浏览器数据库indexedDB存储所述录屏文件；

通过WebSocket协议或HTTP协议将所述录屏文件持续上传到录屏服务器中。

9.根据权利要求1所述的网页录屏方法，其特征在于，还包括采集canvas插件中的绘图数据和/或采集ifame网页嵌套数据；

将所述虚拟节点、所述动作数据和所述鼠标移动数据打包，还包括将所述绘图数据和/或所述网页嵌套数据与所述虚拟节点、所述动作数据、所述鼠标移动数据一起打包。

10.一种网页录屏系统，用于实现权利要求1至9中任一项所述的网页录屏方法，其特征在于，所述系统包括：

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

动作采集模块，用于采集影响所述网页的节点变化的动作数据；

鼠标采集模块，用于采集所述网页中的鼠标移动数据；

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

11.根据权利要求10所述的网页录屏系统，其特征在于，所述系统的代码通过RollUp打包器处理后，加载于浏览器中。

12.一种网页录屏设备，其特征在于，包括：

处理器；

存储器，其中存储有所述处理器的可执行指令；

其中，所述处理器配置为经由执行所述可执行指令来执行权利要求1至9中任一项所述的网页录屏方法的步骤。

13.一种计算机可读存储介质，用于存储程序，其特征在于，所述程序被处理器执行时实现权利要求1至9中任一项所述的网页录屏方法的步骤。

Images