CN111488259A - 针对网页的录制方法及针对录制文件的回放方法 - Google Patents

Abstract

本说明书实施例提供一种针对网页的录制方法，所述方法包括：首先，调用网页捕捉器记录当前时刻下网页的第一页面信息；接着，基于第一页面信息生成具有预定格式的第一快照帧，预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据；然后，至少将第一快照帧存储为录制文件。

Description

针对网页的录制方法及针对录制文件的回放方法

技术领域

本说明书实施例涉及计算机技术领域，具体地，涉及一种针对网页和用户行为的录制和回放技术。

背景技术

为了分享针对网页的操作流程、使用体验等，通常会采用录屏技术，即，一种对电子设备的屏幕进行录像的技术，以实现对网页和与网页相关的操作行为的录制。目前，录屏技术通常包括按照固定的时间间隔(如，20ms)采集多张图像，相应地，在回放的时候按照对应的时间间隔播放采集的图像。

然而，以上录屏方式过于单一，无法满足用户的多种需求。因此，需要一种方案，可以满足用户的多种需求，如减少录制文件的占用空间等。

发明内容

本说明书描述一种针对网页的录制方法，通过信息分轨，实现信息结构化录制，由此在回放过程中，使用户在看到可视化页面以外，还可以直接对页面中的不同元素进行复制、滚动、缩放等多种操作。

根据第一方面，提供一种针对网页的录制方法，所述方法包括：调用网页捕捉器记录当前时刻下所述网页的第一页面信息，所述第一页面信息包括页面内容和页面结构；基于所述第一页面信息生成具有预定格式的第一快照帧，所述预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据；至少将所述第一快照帧存储为录制文件。

根据第二方面，提供一种针对录制文件的回放方法，所述录制文件基于第一方面描述的录制方法而得到，所述回放方法包括：响应于针对录制文件的播放开始指令，调用录像读取器获取具有预定格式的第一快照帧，所述预定格式中包括捕捉器类型；确定所述第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息；根据所述第一页面信息，展示第一网页。

根据第三方面，提供一种针对网页的录制装置，所述录制装置包括：记录单元，配置为调用网页捕捉器记录当前时刻下所述网页的第一页面信息，所述第一页面信息包括页面内容和页面结构；第一生成单元，配置为基于所述第一页面信息生成具有预定格式的第一快照帧，所述预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据；存储单元，配置为至少将所述第一快照帧存储为录制文件。

根据第四方面，提供一种针对录制文件的回放装置，所述回放装置包括：第一获取单元，配置为响应于针对录制文件的播放开始指令，调用录像读取器获取具有预定格式的第一快照帧，所述预定格式中包括捕捉器类型；第一确定单元，配置为确定所述第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息；展示单元，配置为根据所述第一页面信息，展示第一网页。

根据第五方面，提供了一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行第一方面、或第二方面的方法。

根据第六方面，提供了一种计算设备，包括存储器和处理器，其特征在于，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现第一方面、或第二方面的方法。

采用本说明书实施例披露的针对网页的录制方法，不但录制与可视化页面相关的数据，还可以实现对错误信息、控制台输出信息和网络请求信息的录制，同时，还可以减少录制文件的占用空间。另外，采用本说明书实施例披露的针对录制文件的回放方法，在对录制文件进行回放的过程中，可以使用户或工作人员获取影视图像以外的相关的更多信息。

附图说明

为了更清楚地说明本说明书披露的多个实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书披露的多个实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它的附图。

图1示出根据一个实施例的录制系统的架构示意图；

图2示出根据一个实施例的录制文件的回放界面示意图之一；

图3示出根据一个实施例的针对网页的录制方法流程图；

图4示出根据一个实施例的针对网页的录制方法流程图；

图5示出根据一个实施例的针对网页的录制流程框图；

图6示出根据一个实施例的针对录制文件的回放方法流程图；

图7示出根据一个实施例的针对录制文件的回放流程框图；

图8示出根据一个实施例的录制文件的回放界面示意图之二；

图9示出根据一个实施例的录制文件的回放界面示意图之三；

图10示出根据一个实施例的录制文件的回放界面示意图之四；

图11示出根据一个实施例的针对网页的录制装置结构图；

图12示出根据一个实施例的针对录制文件的回放装置结构图。

具体实施方式

下面结合附图，对本说明书披露的多个实施例进行描述。

本说明书实施例提供一种针对网页的录制方法以及针对录制文件的回放方法。下面，首先对录制方法和回放方法的发明构思以及应用场景进行介绍。

在采用现有的录屏技术对网页进行录制时，通常是按照预定的时间间隔，如20ms或30ms，对屏幕中的图像进行采集，再存储为包括多个图像的视频文件。相应地，对视频文件的播放包括按照录制时的时间间隔，对多个图像中的各个图像依次进行展示。发明人发现，在采用以上的录屏方式对网页进行录制时，录制的视频文件占用的空间大，且无论屏幕中显示的内容是否发生改变，都会通过图像进行记录，使得占用空间随着录制时长的增加而增加。此外，录制的信息单一，只能记录屏幕中展现出来的可视化图像。

基于此，发明人提出一种针对网页的录制方法，不同于上述录屏中对图像的采集，本说明书实施例所披露的录制方法中不是直接采集屏幕图像，而是对网页中的数据(至少对应于网页的显示内容和用户对网页进行的操作)进行分轨记录，包括调用图1中示出的网页捕捉器、光标捕捉器、错误信息捕捉器、控制台捕捉器和网络请求捕捉器对网页数据进行记录。对于采用所述录制方法得到的录制文件，在进行回放时，可以理解为实际上播放的是网页，或者可以理解为是对网页的还原。在一个例子中，图2中示出播放录制文件时的回放界面，包括搜索框200，用户可以直接对搜索框200中的订单号进行选择和复制。下面，描述所述录制方法的具体实施步骤。

具体地，图3示出根据一个实施例的针对网页的录制方法流程图，所述方法的执行主体可以为具有计算或处理能力的设备，如浏览器中的插件或者浏览器所在终端中的系统软件，又或者，例如，图1中示出的录制系统，等等。如图3所示，所述方法包括以下步骤：步骤S310，调用网页捕捉器记录当前时刻下所述网页的第一页面信息，所述第一页面信息包括页面内容和页面结构；步骤S320，基于所述第一页面信息生成具有预定格式的第一快照帧，所述预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据；步骤S330，将所述第一快照帧存储为录制文件。以上步骤具体如下：

首先，在步骤S310，调用网页捕捉器记录当前时刻下所述网页的第一页面信息，所述第一页面信息包括页面内容和页面结构。

在一个实施例中，上述网页可以是浏览器中的网页。在另一个实施例中，上述网页也可以是APP中的网页。在一个具体的实施例中，APP中的网页可以指通过点击APP中的超链接、或图标等，所跳转到的对应的网页。在一个例子中，支付宝聊天窗口的会话消息中包括好友发送的网址，此时，可以在APP中点击该网址跳转到对应的网页。在一个具体实施例中，上述网页可以是浏览器或APP中打开的HTML5页面。

在一个实施例中，本步骤可以包括：响应于针对网页的录制开始指令，调用网页捕捉器记录当前时刻下所述网页的第一页面信息。其中录制开始指令可以对应多种操作或触发方式。在一个具体的实施例中，可以包括对浏览器或APP的打开操作，也就是说，当浏览器或APP启动时，自动触发针对网页的录制。在另一个具体的实施例中，可以包括对浏览器菜单栏中开始录制图标的点击操作。在又一个具体的实施例中，可以包括声控操作，例如输入声控指令“开始录制网页”，等等。在再一个实施例中，可以响应于预先设定的错误事件、或故障、或安全事件，自动触发针对网页的录制。在还一个实施例中，基于延时录制模式或预约录制模式，在对应的预设时刻下自动触发针对网页的录制。在再又一个实施例中，可以基于分时段录制模式，按照预定的时间间隔，在针对上一个时段录制结束后，自动开始针对当前时段的录制。

在一个实施例中，上述当前时刻对应于所述录制开始指令的发出时刻或生成时刻。在一个例子中，当前时刻为2019年1月1日上午10:01:58。

在一个实施例中，调用网页捕捉器记录当前时刻下所述网页的第一页面信息可以包括：调用网页捕捉器，从所述网页所对应的文档对象模型(Document Object Model，简称DOM)树中获取所述第一页面信息，所述第一页面信息对应于所述网页的可视化页面。需要说明的是，DOM是超文本标记语言(HyperText Markup Language，简称HTML)的应用编程接口(Application Programming Interface，简称API)，通过DOM模型将网页映射为一个由多个节点组成的树状结构，从而能够利用JavaScript编程语言来调用DOM API并访问和修改网页。

此外，上述第一页面信息包括页面内容和页面结构，是上述DOM树中的至少一部分信息，记录第一页面信息的目的在于后续回放时可根据第一页面信息还原出相应的可视化页面。发明人考虑到，DOM树中包含的信息十分繁杂，在渲染可视化页面时，DOM树中的很多信息都不会被用到，例如节点的内部宽度、内部高度、滚动视图高度、滚动视图宽度信息等等。因此，通过筛选DOM树中必要的节点信息，例如节点的资源地址、唯一标识、类名、属性、标签名、值等，可以在内存中构建出当前网页所对应的简化后的第一页面信息。

以上，可以调用网页捕捉器记录当前时刻下网页的第一页面信息。接着，在步骤S320，基于第一页面信息生成具有预定格式的第一快照帧，所述预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据。

在一个实施例中，将当前时刻、网页捕捉器、快照类事件分别确定为第一快照帧的记录时间、捕捉器类型和事件类型，以及，将第一页面信息记录为具有快照类事件所对应的数据格式的事件数据。

以上，可以生成第一快照帧。然后，在步骤S330，将所述第一快照帧存储为录制文件。

在一个实施例中，本步骤可以包括：响应于录制结束指令，将所述第一快照帧存储为录制文件。其中录制结束指令可以对应多种操作方式。在一个具体的实施例中，可以包括对浏览器的关闭操作，也就是说，当浏览器结束运行时，自动触发针对网页的停止录制。在另一个具体的实施例中，可以包括对浏览器菜单栏中结束录制图标的点击操作。在又一个具体的实施例中，可以包括声控操作，例如输入声控指令“结束录制网页”，等等。

此外，在一个实施例中，在步骤S310之后，所述录制方法还可以包括：接收输入的标注内容，再将标注内容和对应的接收时刻确定为标注信息。在一个具体的实施例中，标注内容可以由用户输入，也可以有程序生成。在一个具体的实施例中，标注内容可以包括文本、图片(如表情等)。如此，可以确定至少一条标注信息，且确定的标注信息可以用于播放导览，或者辅助用户进行跳转播放的决策等。进一步地，在步骤S330中可以包括：将第一快照帧和确定的至少一条标注信息存储为录制文件。

以上，可以得到包括第一快照帧，或，包括第一快照帧和标注信息的录制文件。

根据另一方面的实施例，图4示出根据另一个实施例的针对网页的录制方法流程图，所述方法的执行主体可以为具有计算或处理能力的设备，如浏览器中的插件或者浏览器所在终端中的系统软件，又或者，例如，图1中示出的录制系统，等等。如图4所示，所述方法包括以下步骤：步骤S410，调用网页捕捉器记录当前时刻下所述网页的第一页面信息，所述第一页面信息包括页面内容和页面结构；步骤S420，基于所述第一页面信息生成具有预定格式的第一快照帧，所述预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据；步骤S430，从网页浏览器获取所述网页发生变化而产生的变化信息；步骤S440，调用与所述变化信息对应的第一捕捉器，基于所述变化信息生成具有所述预定格式的关键帧，所述第一捕捉器为网页捕捉器、光标捕捉器、错误信息捕捉器、控制台捕捉器和网络请求捕捉器中的一种；步骤S450，将所述第一快照帧以及确定的至少一个关键帧存储为录制文件，所述录制文件中的各个帧基于记录时间顺序排列。以上步骤具体如下：

首先，在步骤S410，调用网页捕捉器记录当前时刻下所述网页的第一页面信息，所述第一页面信息包括页面内容和页面结构。以及，在步骤S420，基于所述第一页面信息生成具有预定格式的第一快照帧，所述预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据。

需要说明的是，对步骤S410和步骤S420的描述，可以参见上述对步骤S310和步骤S320的描述，在此不作赘述。

接着，在步骤S430，从网页浏览器获取所述网页发生变化而产生的变化信息。以及，在步骤S440，调用与所述变化信息对应的第一捕捉器，基于所述变化信息生成具有所述预定格式的关键帧。

在一个实施例中，从网页浏览器获取变化信息可以包括：接收网页浏览器发送的变化信息。在一个具体的实施例中，变化信息由网页浏览器响应于网页发生变化而产生。需要说明的是，可以采用发布和订阅的方式，从浏览器获取变化信息。

在一个具体的实施例中，变化信息可以为上述网页对应的页面DOM树中节点的变化，所述节点对应于网页中的页面要素。需要说明的是，页面要素是指可视化页面的组成要素，包括文字、符号、图片，等等。在一个例子中，页面要素可以为网页标题。在另一个例子中，页面要素可以为搜索框。此外，在一个例子中，页面DOM树中节点的变化对应于页面中的可视化变化，具体包括以下中的一种：文档视图大小的调整，文档视图发生滚动，可输入元素的值发生变更，元素失去焦点，元素获取焦点，以及，网页浏览器标签页切换隐藏和显示状态。在一个具体的例子中，其中可输入元素可以为单行输入框<input>、多行文本框<textarea>、选择框<select>等。需要说明的是，对于元素失去焦点和元素获取焦点，在HTML规范(浏览器通用标准)中有定义，在此不作赘述。在另一个具体的实施例中，变化信息对应于光标的变化。在一个例子中，光标的变化包括移动(move)、按下(down)和抬起(up)中的一种。在又一个具体的实施例中，变化信息对应于错误信息的生成。在一个例子中，错误信息可以包括未处理的Promise错误(Unhandled rejections)，这种错误因一个JavaScript(一种直译式脚本语言)的状态转换为rejected，且未得到任何后续处理而导致。在另一个例子中，错误信息为JavaScript运行时错误。在又一个例子中，错误信息为资源加载失败错误，等等。

进一步地，调用与所述变化信息对应的第一捕捉器，基于所述变化信息生成具有所述预定格式的关键帧。需要说明的是，调用与所述变化信息对应的第一捕捉器可以包括，基于预先确定的变化信息对应的变化与捕捉器类型的映射关系，调用与所述变化信息对应的第一捕捉器。

在一个具体的实施例中，变化信息为页面DOM树中节点的变化。相应地，首先，调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容。然后，将所述获取DOM树变化内容对应的时刻、网页捕捉器、动作类事件分别确定为所述关键帧的记录时间、捕捉器类型和事件类型，再将所述DOM树变化内容记录为具有所述动作类事件所对应数据格式的事件数据。

需要说明的是，上述页面DOM树中节点的变化包括节点的增加、删除和修改。而当节点的变化为节点的增加和删除时，浏览器通常只会通知最上层节点的增加或删除，而当最上层节点包括后代节点时，实际增加或删除的还有后代节点，由此，还需要获取最上层节点所对应的后代节点。

更进一步地，对于节点增加的情况，可以根据增加的节点，从变化后的网页所对应的页面DOM树中确定增加的最上层节点的后代节点。具体地，在一个例子中，在上述调用网页捕捉器获取DOM树变化内容之前，还包括：确定所述变化信息中包括所述页面DOM树中第一节点的增加，所述第一节点对应于所述网页中的第一页面要素。相应地，调用网页捕捉器获取DOM树变化内容可以包括：基于变化后的网页所对应的页面DOM树，确定所述第一节点所对应的后代节点，再将所述第一节点和后代节点的增加确定为所述DOM树变化内容。在一个具体的例子中，第一节点对应的第一页面元素为网页中的父菜单栏，而第一节点的后代节点对应的页面元素为网页中的多个子菜单栏。

另外，对于节点删除的情况，可以在当前维护的、临时存储的变化前的网页所对应的页面信息中，确定删除的最上层节点的后代节点。具体的，在一个例子中，在上述调用网页捕捉器获取DOM树变化内容之前，还包括：确定变化信息中包括页面DOM树中第二节点的删除，所述第二节点对应于所述网页中的第二页面要素。相应地，调用网页捕捉器获取DOM树变化内容可以包括：基于所述第一页面信息，确定所述页面DOM树中第二节点所对应的后代节点；将所述第二节点和后代节点的删除确定为所述DOM树变化内容。

再者，对于节点修改的情况，可以直接将浏览器通知的变化信息确定为所述DOM树的变化内容。具体地，在一个例子中，在上述调用对应的网页捕捉器获取DOM树变化内容之前，还包括：确定变化信息中包括页面DOM树中第三节点的修改，所述第三节点对应于所述网页中的第三页面要素。相应地，调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容，包括：将所述变化信息确定为所述DOM树变化内容。

以上，当变化信息页面DOM树中节点的变化时，可以调用网页捕捉器基于所述变化信息获取DOM树变化内容。进一步地，一方面，在一个实施例中，可以所述DOM树变化内容，将第一页面信息修改为第二页面信息，第二页面信息对应于发生变化后网页的可视化页面。如此，当浏览器在后续通知的变化信息中包括对页面DOM树中节点的删除时，可以基于第二页面信息确定对应的后代节点。

另一方面，可以基于所述DOM树变化内容确定出对应的关键帧。此处，可以将调用网页捕捉器生成的关键帧称为动作帧。

在另一个具体的实施例中，上述变化信息对应于光标的变化。相应地，调用对应的第一捕捉器，基于变化信息生成具有预定格式的关键帧，可以包括：首先，调用对应的光标捕捉器记录变化信息；接着，将记录所述变化信息对应的时刻、光标捕捉器分别确定为关键帧的记录时间和捕捉器类型；然后，基于变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为移动、或按下、或抬起；再将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。此处，可以将调用光标捕捉器生成的关键帧称为光标帧。

在又一个具体的实施例中，上述变化信息对应于错误信息的生成。相应地，调用对应的第一捕捉器，基于所述变化信息生成具有所述预定格式的关键帧，包括：首先，调用对应的错误信息捕捉器记录所述变化信息；接着，将所述记录所述变化信息对应的时刻、错误信息捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；然后，基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为脚本错误(ERROR_SCRIPT)、运行时错误(ERROR_RUNTIME)、资源不存在错误(ERROR_NOTFOUND)和未处理的Promise错误中的一种；再将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。此处，可以将调用错误信息捕捉器生成的关键帧称为错误帧。

以上，对动作帧、光标帧和错误帧这三种关键帧的生成进行了说明。下面，对控制台帧和网络帧这两种关键帧的生成进行说明。

具体地，在一个实施例中，从网页浏览器获取变化信息可以包括：调用控制台捕捉器拦截浏览器控制台输出的变化信息。在一个具体的实施例中，调用控制台捕捉器接收目标投递地址为服务器的输出信息，对其进行记录，再将输出信息发送至所述服务器中，以使服务器将接收到的信息存储为运行日志的一部分。在这个过程中，控制台和服务器都是无感知的。

进一步地，基于所述变化信息生成具有所述预定格式的关键帧可以包括：首先，将所述拦截对应的时刻、控制台捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；以及，基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为assert、debug、dir、dirxml、error、info、log、table、trace和warn中的一种。然后，将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。此处，可以将调用控制台捕捉器生成的关键帧称为上述控制台帧。

在另一个实施例中，从网页浏览器获取变化信息可以包括：调用网络请求捕捉器拦截网页浏览器发送的网络请求信息。在一个具体的实施例中，调用网络请求捕捉器接收目标投递地址为服务器的网络请求信息，对其进行记录，再将网络请求信息发送至所述服务器中，以使服务器将接收到的信息存储为运行日志的一部分。在这个过程中，浏览器和服务器都是无感知的。

进一步地，基于所述变化信息生成具有所述预定格式的关键帧可以包括：首先，将所述拦截对应的时刻、网络请求捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；以及，基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为发送网络请求(NETWORK_SEND)、网络请求完成(NETWORK_DONE)、网络请求中断或中止(NETWORK_ABORT)、网络请求发生错误(NETWORK_ERROR)、网络请求超时(NETWORK_TIMEOUT)中的一种。然后，将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。此处，可以将调用网络请求捕捉器生成的关键帧称为上述网络帧。

以上，可以生成至少一个关键帧。接着，在步骤S450，将所述第一快照帧以及确定的至少一个关键帧存储为录制文件，所述录制文件中的各个帧基于记录时间顺序排列。

在一个实施例中，按照各个帧的记录时间对各个帧顺序排列，并确定任意两个相邻帧之间记录时间的时间差。进一步地，将确定的多个时间差也存储在录制文件中。在另一个实施例中，根据录制开始指令和录制结束指令所对应的时刻，确定录制文件的总时长。进一步地，将录制结束指令的发出时刻和录制开始指令所对应的上述当前时刻之间的时间差值，确定为录制文件的总时长。此外，需要说明的是，对步骤S450的描述还可以参见上述对步骤S330的描述，在此不作赘述。

以上，可以实现针对网页和用户基于网页的操作行为所对应数据的分轨化录制。下面，结合一个具体的例子，对所述录制方法进行进一步介绍。具体地，图5示出根据一个实施例的针对网页的录制方法的流程框图。如图5所示，所述方法包括以下步骤：

步骤S50，接收开始录像的指令。

步骤S51，创建录像。具体地，创建一个空录像，用来存储录制的数据。

步骤S52，初始化录像写入器。其中，录像写入器用于将记录的信息，如各个帧或者标注信息，写入录像。

步骤S53，初始化捕捉器。

在一个实施例中，初始化的捕捉器至少包括网页捕捉器和光标捕捉器。进一步地，还可以包括错误信息捕捉器、控制台捕捉器和网络请求捕捉器。

一方面，在步骤S54，捕获网页及用户行为。以及，在步骤S55，转换为快照帧和关键帧。

在一个实施例中，调用网页捕捉器主动将当前页面的完整结构记录为快照帧。

在一个实施例中，从浏览器接收变化信息，调用对应的捕捉器生成对应的关键帧。在一个具体的实施例中，调用网页捕捉器生成动作帧。在另一个具体的实施例中，调用光标捕捉器生成光标帧。在又一个具体的实施例中，调用错误信息捕捉器生成错误帧。

在另一个实施例中，调用控制台捕捉器拦截浏览器控制台输出的信息，生成对应的控制台帧。

在又一个实施例中，调用网络请求捕捉器拦截浏览器发送的网络请求信息，生成对应的网络帧。

另一方面，在步骤S56，接收用户或程序添加的标注。

在执行步骤S55或步骤S56之后，执行步骤S57，写入录像中。

在一个实施例中，将步骤S55中生成的关键帧和快照帧写入录像中。

在另一个实施例中，将步骤S56中接收的标注写入录像中。

步骤S58，判断是否停止录制。进一步地，一方面，在未停止录制的情况下，继续执行步骤S54。另一方面，在停止录制的情况下，执行步骤S59，结束当前录制流程，并对录像进行存储。

以上，对录制方法进行了介绍，采用所述录制方法可以得到录制文件。下面，对播放所述录制文件方法进行介绍。

具体地，图6示出根据一个实施例的针对录制文件的回放方法流程图，所述方法的执行主体可以为具有计算或处理能力的设备，如浏览器中的插件或者浏览器所在终端中的系统软件，等等。如图6所示，所述方法包括以下步骤：步骤S610，调用录像读取器获取具有预定格式的第一快照帧，所述预定格式中包括捕捉器类型；步骤S620，确定所述第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息；步骤S630，根据所述第一页面信息，展示第一网页。以上步骤具体如下：

首先，在步骤S610，响应于针对录制文件的播放开始指令，调用录像读取器获取具有预定格式的第一快照帧，所述预定格式中包括捕捉器类型。

在一个实施例中，还可以包括：响应于上述播放开始指令，调用各个执行器创建对应的播放容器。在一个例子中，网页执行器和光标执行器可以创建一个<iframe>元素，即一个内联框架元素，作为它们的播放容器，这个容器将会用来渲染之前所录制的网页和光标行为。在另一个例子中，错误执行器、控制台执行器和网络请求执行器各自创建对应的播放容器，可以是<ul>、<div>等HTML元素。

以上，可以获取第一快照帧。接着，在步骤S620，确定第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息。

上述预定格式中包括捕捉器类型。由此，在一个实施例中，可以根据第一快照帧中捕捉器类型字段，确定出第一快照帧的捕捉器类型为网页捕捉器，进而调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息。

以上，可以确定第一快照帧所对应网页的第一页面信息。接着，在步骤S630，根据所述第一页面信息，展示第一网页。

在一个实施例中，通过网页执行器对应的播放容器对第一页面信息进行渲染，得到所述第一网页。

根据另一方面的实施例，进一步地，上述录制文件中包括关键帧，以记录时间邻接在第一快照帧之后的第一关键帧为例，在步骤S630之后，还可以包括：，首先，调用录像读取器获取具有所述预定格式的第一关键帧。接着，确定所述第一关键帧的捕捉器类型，调用与所述第一关键帧的捕捉器类型对应的执行器确定第一关键帧所对应的变化信息。然后，在第一网页的基础上，根据所述变化信息，展示第二网页。

在一个实施例中，确定所述第一关键帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一关键帧所对应的变化信息。在另一个实施例中，确定所述第一关键帧的捕捉器类型为光标捕捉器，调用对应的光标执行器确定第一关键帧所对应的变化信息。在又一个实施例中，确定所述第一关键帧的捕捉器类型为错误信息捕捉器，调用对应的错误执行器确定第一关键帧所对应的变化信息。在再一个实施例中，确定所述第一关键帧的捕捉器类型为控制台捕捉器，调用对应的控制台执行器确定第一关键帧所对应的变化信息。在还一个实施例中，确定所述第一关键帧的捕捉器类型为网络请求捕捉器，调用对应的网络请求执行器确定第一关键帧所对应的变化信息。

在一个实施例中，在第一网页的基础上，根据所述变化信息，展示第二网页，可以包括：在第一网页的基础上，通过所述对应的执行器对应的播放容器对所述变化信息进行渲染，得到所述第二网页。

根据又一方面的实施例，上述录制文件中包括至少一个关键帧，在步骤S630之后，还可以包括：首先，响应于针对录制文件的播放跳转指令，确定播放跳转指令所对应的播放时间点。进一步地，在一个具体的实施例中，然后，调用录像读取器读取所述播放时间点之前的第一快照帧和至少一个第一关键帧。接着，确定所述第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息，以及基于至少一个第一关键帧的排列顺序，依次确定各个第一关键帧的捕捉器类型，以及调用对应的执行器确定各个第一关键帧所对应的变化信息；然后，根据第一页面信息和至少一个第一关键帧对应的变化信息，展示所述播放时间点下的网页。在另一个具体的实施例中，先调用录像读取器读取所述播放时间点之前的第一快照帧(也就是说，在播放时间点之前不存在快照帧)，再确定所述第一快照帧的捕捉器类型为网页捕捉器，并调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息，然后基于第一页面信息展示播放时间点下的网页(因页面未发生变化，此处展示的网页与上述第一页面相同)。

根据再一方面的实施例，录制文件中包括至少一条标注信息，其中各条标注信息包括对应的标注时刻和标注内容。进一步地，在步骤S610之前，还可以包括：响应于针对所述录制文件的打开指令，生成对应的播放进度条，所述播放进度条对应于所述录制文件的总录制时长；基于各条标注信息的标注时刻，在所述进度条中添加对应于所述各条标注信息的标记。更进一步地，在一个具体的实施例中，响应于针对所述标记的触发，显示该标记对应的标注信息中的标注内容。

以上，可以实现针对上述录制文件的回放。下面，结合一个具体的例子，对所述回放方法进行进一步介绍。具体地，图7示出根据一个实施例的针对网页的录制方法的流程框图。如图7所示，所述方法包括以下步骤：

步骤S701，接收开始回放的指令。

步骤S702，加载录像，也就是录制文件。

步骤S703，初始化录像读取器。

步骤S704，初始化执行器。在一个实施例中，执行器至少包括网页执行器和光标执行器。进一步地，还可以包括错误信息执行器、控制台执行器和网络请求执行器。

步骤S705，初始化播放容器。

在一个实施例中，调用网页执行器和光标执行器创建一个<iframe>元素，即一个内联框架元素，作为它们的播放容器，这个容器将会用来渲染之前所录制的网页和鼠标行为。在另一个实施例中，调用错误执行器、控制台执行器和网络请求执行器，各自创建对应的容器，可以是<ul>、<div>等HTML元素。

步骤S706，读取标注。具体地，调用录像读取器读取录像中的标注。

步骤S707，绘制标注至播放器进度条。

步骤S708，启动播放器帧循环。

步骤S709，读取快照帧和关键帧。以及在步骤S710，绘制快照帧和关键帧至播放容器。

在一个实施例中，利用RAF实现帧循环，随时间流逝不断通过录像读取器寻址和读取录像中的快照帧和关键帧，并通过对应的执行器来实现播放。

步骤S711，判断是否已播至结束。一方面，在判断出播放未结束时，执行步骤S709。另一方面，在判断出播放结束时，执行步骤S712。

步骤S712，停止播放器帧循环。

进一步地，在一种可能的实施方式中，在步骤S712之后，执行步骤S713，接收重新开始播放指令。接着，执行步骤S708。

一方面，在步骤S721，接收暂停播放指令。接着，执行步骤S712。再执行步骤S722，接收恢复播放指令。然后，执行步骤S709。

另一方面，在步骤S731，接收跳转播放指令。

接着，执行步骤S709和710，以跳转到目标时间对应的画面。

在一个实施例中，录制文件中包括多个快照帧，相应地，先读取最邻近目标时间的在先快照帧，再通过录像读取器寻址并读取在先快照帧，以及在先快照帧对应的播放时间与目标时间内的所有关键帧，并在同一个事件循环中批量调用每一帧对应的执行器，一次性执行读取到的快照帧和所有关键帧，从而计算出跳转目标时间所对应的画面，跳转之后将会恢复为正常播放。

在另一个实施例中，录制文件中包括一个快照帧，相应地，读取录制文件的起始播放时间与目标时间之间的所有关键帧，并在同一个事件循环中批量调用每一帧对应的执行器，一次性执行读取到的所有关键帧，从而计算出跳转目标时间所对应的画面，跳转之后将会恢复为正常播放。

再接着，执行步骤S711。

以上，可以实现对录制文件的播放。接下来，再结合几个图示，对播放录制文件的过程中，用户可以进行的便捷操作进行说明。具体如下：

图8中示出在播放过程中暂停时所对应的播放界面。如图1所示，将鼠标停留在录屏中的工作台上方订单选择器中，可复制录屏的订单号码。如图9所示，将鼠标停留在录屏中的工作台左侧聊天窗口，可立即查看当时对话的时间。如图10所示，将鼠标停留在录屏中的工作台左侧工单记录模块，可上下滚动该模块。如此，在播放录制文件的过程中，用户可以获取可视页面以及其他更加丰富的信息。

根据另一方面的实施例，还提供一种录制装置。图11示出根据一个实施例的针对网页的录制装置结构图，如图11所示，该装置1100包括：

记录单元1110，配置为调用网页捕捉器记录当前时刻下所述网页的第一页面信息，所述第一页面信息包括页面内容和页面结构。第一生成单元1120，配置为基于所述第一页面信息生成具有预定格式的第一快照帧，所述预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据。存储单元1130，至少将所述第一快照帧存储为录制文件。

在一个实施例中，记录单元1110，具体配置为响应于针对网页的录制开始指令，调用网页捕捉器记录当前时刻下所述网页的第一页面信息。

在一个实施例中，存储单元1130，具体配置为响应于录制结束指令，至少将所述第一快照帧存储为录制文件。

在一个实施例中，所述装置还包括获取单元1140，配置为从网页浏览器获取所述网页发生变化而产生的变化信息。第二生成单元1150，配置为调用与所述变化信息对应的第一捕捉器，基于所述变化信息生成具有所述预定格式的关键帧，所述第一捕捉器为网页捕捉器、光标捕捉器、错误信息捕捉器、控制台捕捉器和网络请求捕捉器中的一种。存储单元1130，具体配置为响应于录制结束指令，将所述第一快照帧以及确定的至少一个关键帧存储为录制文件，所述录制文件中的各个帧基于记录时间顺序排列。

在一个实施例中，所述记录单元1110具体配置为：调用网页捕捉器，从所述网页所对应的文档对象模型DOM树中获取所述第一页面信息，所述第一页面信息对应于所述网页的可视化页面。

在一个实施例中，所述第一生成单元1120具体配置为：将所述当前时刻、网页捕捉器、快照类事件分别确定为所述第一快照帧的记录时间、捕捉器类型和事件类型；以及，将所述第一页面信息记录为具有所述快照类事件所对应的数据格式的事件数据。

在一个实施例中，所述获取单元1140具体配置为：接收所述网页浏览器发送的变化信息。

进一步地，在一个具体的实施例中，所述变化信息为所述网页对应的页面DOM树中节点的变化，所述节点对应于所述网页中的页面要素；所述第二生成单元1150具体包括：获取子单元1151，配置为调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容。确定子单元1152，配置为将所述获取DOM树变化内容对应的时刻、网页捕捉器、动作类事件分别确定为所述关键帧的记录时间、捕捉器类型和事件类型。记录子单元1153，配置为将所述DOM树变化内容记录为具有所述动作类事件所对应数据格式的事件数据。

更进一步地，在一个例子中，所述装置还包括修改单元1160，配置为基于所述DOM树变化内容，将所述第一页面信息修改为第二页面信息，所述第二页面信息对应于发生变化后网页的可视化页面。

另一方面，在一个例子中，所述页面DOM树中节点的变化对应于页面中的可视化变化，所述可视化变化包括以下中的一种：文档视图大小的调整，文档视图发生滚动，可输入元素的值发生变更，元素失去焦点，元素获取焦点，以及，网页浏览器标签页切换隐藏和显示状态。

在另一个例子中，所述装置1100还包括：第一确定单元1170，配置为确定所述变化信息中包括所述页面DOM树中第一节点的增加，所述第一节点对应于所述网页中的第一页面要素。所述获取子单元1151具体配置为基于变化后的网页所对应的页面DOM树，确定所述页面DOM树中第一节点所对应的后代节点；将所述第一节点和后代节点的增加确定为所述DOM树变化内容。

在又一个例子中，所述装置还包括：第一确定单元1170，配置为确定所述变化信息中包括所述页面DOM树中第二节点的删除，所述第二节点对应于所述网页中的第二页面要素。所述获取子单元1151具体配置为：基于所述第一页面信息，确定所述页面DOM树中第二节点所对应的后代节点；将所述第二节点和后代节点的删除确定为所述DOM树变化内容。

在还一个例子中，在所述装置1100还包括：第一确定单元1170，配置为确定所述变化信息中包括所述页面DOM树中第三节点的修改，所述第三节点对应于所述网页中的第三页面要素。所述获取子单元1151具体配置为：将所述变化信息确定为所述DOM树变化内容。

在另一个具体的实施例中，所述变化信息对应于光标的变化，所述第二生成单元1150具体配置为：调用对应的光标捕捉器记录所述变化信息；将所述记录所述变化信息对应的时刻、光标捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为移动、或按下、或抬起；将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。

在又一个具体的实施例中，所述变化信息对应于错误信息的生成，所述第二生成单元1150具体配置为：调用对应的错误信息捕捉器记录所述变化信息；将所述记录所述变化信息对应的时刻、错误信息捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为脚本错误、运行时错误、资源不存在错误和未处理的Promise错误中的一种；将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。

在一个实施例中，所述获取单元1140具体配置为：调用控制台捕捉器拦截浏览器控制台输出的变化信息。

所述第二生成单元1150具体配置为：将所述拦截对应的时刻、控制台捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为assert、debug、dir、dir10ml、error、info、log、table、trace和warn中的一种；将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。

在一个实施例中，所述获取单元1140具体配置为：所述调用网络请求捕捉器拦截网页浏览器发送的网络请求信息。所述第二生成单元1150具体配置为：将所述拦截对应的时刻、网络请求捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为发送网络请求、网络请求完成、网络请求中断或中止、网络请求发生错误、网络请求超时中的一种；将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。

在一个实施例中，所述装置1100还包括：接收单元1180，配置为接收输入的标注内容。第二确定单元1190，配置为将所述标注内容和对应的接收时刻确定为标注信息。所述存储单元1150具体配置为：将所述第一快照帧和确定的至少一条标注信息存储为录制文件。

根据又一方面的实施例，还提供一种回放装置。图12示出根据一个实施例的针对录制文件的回放装置结构图，如图12所示，该装置1200包括：第一获取单元1210，配置为调用录像读取器获取具有预定格式的第一快照帧，所述预定格式中包括捕捉器类型。第一确定单元1220，配置为确定所述第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息。展示单元1230，配置为根据所述第一页面信息，展示第一网页。

在一个实施例中，所述录制文件中包括第一关键帧，所述装置1200还包括第二获取单元1240，配置为调用录像读取器获取具有所述预定格式的第一关键帧；第二确定单元1250，配置为确定所述第一关键帧的捕捉器类型，调用与所述第一关键帧的捕捉器类型对应的执行器确定第一关键帧所对应的变化信息；所述展示单元1230还配置为在所述第一网页的基础上，根据所述变化信息，展示第二网页。

进一步地，在一个具体的实施例中，所述第二确定单元1250具体配置为确定所述第一关键帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一关键帧所对应的变化信息；或，确定所述第一关键帧的捕捉器类型为光标捕捉器，调用对应的光标执行器确定第一关键帧所对应的变化信息；或，确定所述第一关键帧的捕捉器类型为错误信息捕捉器，调用对应的错误执行器确定第一关键帧所对应的变化信息；或，确定所述第一关键帧的捕捉器类型为控制台捕捉器，调用对应的控制台执行器确定第一关键帧所对应的变化信息；或，确定所述第一关键帧的捕捉器类型为网络请求捕捉器，调用对应的网络请求执行器确定第一关键帧所对应的变化信息。

在另一个具体的实施例中，所述装置1200还包括创建单元1260，配置为响应于所述播放开始指令，调用各个执行器创建对应的播放容器；所述展示单元1230具体配置为：通过所述网页执行器对应的播放容器对所述第一页面信息进行渲染，得到所述第一网页。进一步地，所述展示单元1230还具体配置为：在所述第一网页的基础上，通过所述对应的执行器对应的播放容器对所述变化信息进行渲染，得到所述第二网页。

在一个实施例中，所述录制文件中包括至少一个关键帧，所述装置1200还包括跳播单元1270，配置为：

响应于针对录制文件的播放跳转指令，确定所述播放跳转指令所对应的播放时间点；

调用录像读取器读取所述播放时间点之前的所述第一快照帧和的至少一个第一关键帧；

确定所述第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息；基于至少一个第一关键帧的排列顺序，依次确定各个第一关键帧的捕捉器类型，以及调用对应的执行器确定各个第一关键帧所对应的变化信息；

根据所述第一页面信息和变化信息，展示所述播放时间点下的网页。

在一个实施例中，所述录制文件中包括至少一条标注信息，其中各条标注信息包括对应的标注时刻和标注内容；所述装置1200还包括：生成单元1280，配置为响应于针对所述录制文件的打开指令，生成对应的播放进度条，所述播放进度条对应于所述录制文件的总录制时长；添加单元1290，配置为基于各条标注信息的标注时刻，在所述进度条中添加对应于所述各条标注信息的标记。

进一步地，在一个具体的实施例中，所述装置1200还包括：显示单元1295响应于针对所述标记的触发，显示该标记对应的标注信息中的标注内容。

如上，根据再一方面的实施例，还提供一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行结合图3、或图4、或图5、或图6、或图7所描述的方法。

根据再一方面的实施例，还提供一种计算设备，包括存储器和处理器，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现结合图3、或图4、或图5、或图6、或图7所描述的方法。

本领域技术人员应该可以意识到，在上述一个或多个示例中，本说明书披露的多个实施例所描述的功能可以用硬件、软件、固件或它们的任意组合来实现。当使用软件实现时，可以将这些功能存储在计算机可读介质中或者作为计算机可读介质上的一个或多个指令或代码进行传输。

以上所述的具体实施方式，对本说明书披露的多个实施例的目的、技术方案和有益效果进行了进一步详细说明，所应理解的是，以上所述仅为本说明书披露的多个实施例的具体实施方式而已，并不用于限定本说明书披露的多个实施例的保护范围，凡在本说明书披露的多个实施例的技术方案的基础之上，所做的任何修改、等同替换、改进等，均应包括在本说明书披露的多个实施例的保护范围之内。

Claims (29)

1.一种针对网页的录制方法，包括：

调用网页捕捉器记录当前时刻下所述网页的第一页面信息，所述第一页面信息包括页面内容和页面结构；

基于所述第一页面信息生成具有预定格式的第一快照帧，所述预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据；

至少将所述第一快照帧存储为录制文件。

2.根据权利要求1所述的方法，其中，在所述基于所述第一页面信息生成具有预定格式的第一快照帧之后，还包括：

从网页浏览器获取所述网页发生变化而产生的变化信息；

调用与所述变化信息对应的第一捕捉器，基于所述变化信息生成具有所述预定格式的关键帧，所述第一捕捉器为网页捕捉器、光标捕捉器、错误信息捕捉器、控制台捕捉器和网络请求捕捉器中的一种；

所述至少将所述第一快照帧存储为录制文件，包括：

将所述第一快照帧以及确定的至少一个关键帧存储为录制文件，所述录制文件中的各个帧基于记录时间顺序排列。

3.根据权利要求1所述的方法，其中，所述调用网页捕捉器记录当前时刻下所述网页的第一页面信息，包括：

调用网页捕捉器，从所述网页所对应的文档对象模型DOM树中获取所述第一页面信息，所述第一页面信息对应于所述网页的可视化页面。

4.根据权利要求1所述的方法，其中，所述基于所述第一页面信息生成具有预定格式的第一快照帧，包括：

将所述当前时刻、网页捕捉器、快照类事件分别确定为所述第一快照帧的记录时间、捕捉器类型和事件类型；以及，

将所述第一页面信息记录为具有所述快照类事件所对应的数据格式的事件数据。

5.根据权利要求2所述的方法，其中，所述从网页浏览器获取所述网页发生变化而产生的变化信息，包括：

接收所述网页浏览器发送的变化信息。

6.根据权利要求5所述的方法，其中，所述变化信息为所述网页对应的页面DOM树中节点的变化，所述节点对应于所述网页中的页面要素；所述调用与所述变化信息对应的第一捕捉器，基于所述变化信息生成具有所述预定格式的关键帧，包括：

调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容；

将所述获取DOM树变化内容对应的时刻、网页捕捉器、动作类事件分别确定为所述关键帧的记录时间、捕捉器类型和事件类型；

将所述DOM树变化内容记录为具有所述动作类事件所对应数据格式的事件数据。

7.根据权利要求6所述的方法，其中，所述页面DOM树中节点的变化对应于页面中的可视化变化，所述可视化变化包括以下中的一种：文档视图大小的调整，文档视图发生滚动，可输入元素的值发生变更，元素失去焦点，元素获取焦点，以及，网页浏览器标签页切换隐藏和显示状态。

8.根据权利要求6所述的方法，其中，在调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容之前，还包括：

确定所述变化信息中包括所述页面DOM树中第一节点的增加，所述第一节点对应于所述网页中的第一页面要素；

所述调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容，包括：

基于变化后的网页所对应的页面DOM树，确定所述第一节点所对应的后代节点；

将所述第一节点和后代节点的增加确定为所述DOM树变化内容。

9.根据权利要求6所述的方法，其中，在调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容之前，所述方法还包括：

确定所述变化信息中包括所述页面DOM树中第二节点的删除，所述第二节点对应于所述网页中的第二页面要素；

所述调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容，包括：

基于所述第一页面信息，确定所述页面DOM树中第二节点所对应的后代节点；

将所述第二节点和后代节点的删除确定为所述DOM树变化内容。

10.根据权利要求6所述的方法，其中，在调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容之前，所述方法还包括：

确定所述变化信息中包括所述页面DOM树中第三节点的修改，所述第三节点对应于所述网页中的第三页面要素；

所述调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容，包括：

将所述变化信息确定为所述DOM树变化内容。

11.根据权利要求6-10中任一项所述的方法，其中，在所述调用对应的网页捕捉器基于所述变化信息获取DOM树变化内容之后，所述方法还包括：

基于所述DOM树变化内容，将所述第一页面信息修改为第二页面信息，所述第二页面信息对应于发生变化后网页的可视化页面。

12.根据权利要求5所述的方法，其中，所述变化信息对应于光标的变化，所述调用对应的第一捕捉器，基于所述变化信息生成具有所述预定格式的关键帧，包括：

调用对应的光标捕捉器记录所述变化信息；

将所述记录所述变化信息对应的时刻、光标捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；

基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为移动、或按下、或抬起；

将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。

13.根据权利要求5所述的方法，其中，所述变化信息对应于错误信息的生成，所述调用对应的第一捕捉器，基于所述变化信息生成具有所述预定格式的关键帧，包括：

调用对应的错误信息捕捉器记录所述变化信息；

将所述记录所述变化信息对应的时刻、错误信息捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；

基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为脚本错误、运行时错误、资源不存在错误和未处理的Promise错误中的一种；

将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。

14.根据权利要求2所述的方法，其中，所述从网页浏览器获取所述网页发生变化而产生的变化信息包括：

调用控制台捕捉器拦截浏览器控制台输出的变化信息；

所述基于所述变化信息生成具有所述预定格式的关键帧，包括：

将所述拦截对应的时刻、控制台捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；

基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为assert、debug、dir、dirxml、error、info、log、table、trace和warn中的一种；

将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。

15.根据权利要求2所述的方法，其中，所述从网页浏览器获取所述网页发生变化而产生的变化信息包括：

所述调用网络请求捕捉器拦截网页浏览器发送的网络请求信息；

所述基于所述变化信息生成具有所述预定格式的关键帧，包括：

将所述拦截对应的时刻、网络请求捕捉器分别确定为所述关键帧的记录时间和捕捉器类型；

基于所述变化信息确定所述关键帧的事件类型，所述关键帧的事件类型为发送网络请求、网络请求完成、网络请求中断或中止、网络请求发生错误、网络请求超时中的一种；

将所述变化信息记录为具有所述关键帧的事件类型所对应数据格式的事件数据。

16.根据权利要求1所述的方法，其中，在调用网页捕捉器记录当前时刻下所述网页的第一页面信息之后，所述方法还包括：

接收输入的标注内容；

将所述标注内容和对应的接收时刻确定为标注信息；

所述至少将所述第一快照帧存储为录制文件，包括：

将所述第一快照帧和确定的至少一条标注信息存储为录制文件。

17.根据权利要求1所述的方法，其中，所述调用网页捕捉器记录当前时刻下所述网页的第一页面信息，包括：

响应于针对网页的录制开始指令，调用网页捕捉器记录当前时刻下所述网页的第一页面信息。

18.根据权利要求1所述的方法，其中，所述至少将所述第一快照帧存储为录制文件，包括：

响应于录制结束指令，至少将所述第一快照帧存储为录制文件。

19.一种针对录制文件的回放方法，所述录制文件基于权利要求1所述的录制方法而得到，所述回放方法包括：

响应于针对录制文件的播放开始指令，调用录像读取器获取具有预定格式的第一快照帧，所述预定格式中包括捕捉器类型；

确定所述第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息；

根据所述第一页面信息，展示第一网页。

20.根据权利要求19所述的回放方法，其中，所述录制文件中包括第一关键帧，在所述展示第一网页之后，还包括：

调用录像读取器获取具有所述预定格式的第一关键帧；

确定所述第一关键帧的捕捉器类型，调用与所述第一关键帧的捕捉器类型对应的执行器确定第一关键帧所对应的变化信息；

在所述第一网页的基础上，根据所述变化信息，展示第二网页。

21.根据权利要求20所述的回放方法，其中，所述确定所述第一关键帧的捕捉器类型，调用与所述第一关键帧的捕捉器类型对应的执行器确定第一关键帧所对应的变化信息，包括：

确定所述第一关键帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一关键帧所对应的变化信息；或，

确定所述第一关键帧的捕捉器类型为光标捕捉器，调用对应的光标执行器确定第一关键帧所对应的变化信息；或，

确定所述第一关键帧的捕捉器类型为错误信息捕捉器，调用对应的错误执行器确定第一关键帧所对应的变化信息；或，

确定所述第一关键帧的捕捉器类型为控制台捕捉器，调用对应的控制台执行器确定第一关键帧所对应的变化信息；或，

确定所述第一关键帧的捕捉器类型为网络请求捕捉器，调用对应的网络请求执行器确定第一关键帧所对应的变化信息。

22.根据权利要求20所述的回放方法，还包括：

响应于所述播放开始指令，调用各个执行器创建对应的播放容器；

所述根据所述第一页面信息，展示第一网页，包括：

通过所述网页执行器对应的播放容器对所述第一页面信息进行渲染，得到所述第一网页；

所述在所述第一网页的基础上，根据所述变化信息，展示所述第二网页，包括：

在所述第一网页的基础上，通过所述对应的执行器对应的播放容器对所述变化信息进行渲染，得到所述第二网页。

23.根据权利要求19所述的回放方法，其中，所述录制文件中包括至少一个关键帧，在所述展示第一网页之后，还包括：

响应于针对录制文件的播放跳转指令，确定所述播放跳转指令所对应的播放时间点；

调用录像读取器读取所述播放时间点之前的所述第一快照帧和的至少一个第一关键帧；

确定所述第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息；

基于至少一个第一关键帧的排列顺序，依次确定各个第一关键帧的捕捉器类型，以及调用对应的执行器确定各个第一关键帧所对应的变化信息；

根据所述第一页面信息和变化信息，展示所述播放时间点下的网页。

24.根据权利要求19所述的回放方法，其中，所述录制文件中包括至少一条标注信息，其中各条标注信息包括对应的标注时刻和标注内容；

在所述调用录像读取器获取具有预定格式的第一快照帧之前，还包括：

响应于针对所述录制文件的打开指令，生成对应的播放进度条，所述播放进度条对应于所述录制文件的总录制时长；

基于各条标注信息的标注时刻，在所述进度条中添加对应于所述各条标注信息的标记。

25.根据权利要求24所述的回放方法，其中，还包括：

响应于针对所述标记的触发，显示该标记对应的标注信息中的标注内容。

26.一种针对网页的录制装置，包括：

记录单元，配置为调用网页捕捉器记录当前时刻下所述网页的第一页面信息，所述第一页面信息包括页面内容和页面结构；

第一生成单元，配置为基于所述第一页面信息生成具有预定格式的第一快照帧，所述预定格式包括记录时间、捕捉器类型、事件类型以及具有事件类型所对应数据格式的事件数据；

存储单元，配置为至少将所述第一快照帧存储为录制文件。

27.一种针对录制文件的回放装置，所述录制文件基于权利要求24所述的录制装置而得到，所述回放装置包括：

第一获取单元，配置为响应于针对录制文件的播放开始指令，调用录像读取器获取具有预定格式的第一快照帧，所述预定格式中包括捕捉器类型；

第一确定单元，配置为确定所述第一快照帧的捕捉器类型为网页捕捉器，调用对应的网页执行器确定第一快照帧所对应网页的第一页面信息；

展示单元，配置为根据所述第一页面信息，展示第一网页。

28.一种计算机可读存储介质，其上存储有计算机程序，当所述计算机程序在计算机中执行时，令计算机执行权利要求1-25中任一项的所述的方法。

29.一种计算设备，包括存储器和处理器，其特征在于，所述存储器中存储有可执行代码，所述处理器执行所述可执行代码时，实现权利要求1-25中任一项所述的方法。

Images