CN113946256B - 一种页面操作录制方法、装置、介质和设备 - Google Patents
一种页面操作录制方法、装置、介质和设备 Download PDFInfo
- Publication number
- CN113946256B CN113946256B CN202111265847.9A CN202111265847A CN113946256B CN 113946256 B CN113946256 B CN 113946256B CN 202111265847 A CN202111265847 A CN 202111265847A CN 113946256 B CN113946256 B CN 113946256B
- Authority
- CN
- China
- Prior art keywords
- page
- replay data
- request
- snapshot
- replay
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 50
- 230000008859 change Effects 0.000 claims abstract description 17
- 238000012544 monitoring process Methods 0.000 claims description 30
- 238000004891 communication Methods 0.000 claims description 27
- 238000006243 chemical reaction Methods 0.000 claims description 13
- 238000004590 computer program Methods 0.000 claims description 10
- 238000013507 mapping Methods 0.000 claims description 5
- 230000008569 process Effects 0.000 abstract description 12
- 230000002035 prolonged effect Effects 0.000 abstract description 2
- 238000005516 engineering process Methods 0.000 description 13
- 238000010586 diagram Methods 0.000 description 10
- 230000001960 triggered effect Effects 0.000 description 8
- 230000006870 function Effects 0.000 description 7
- 238000012545 processing Methods 0.000 description 7
- 238000012986 modification Methods 0.000 description 5
- 230000004048 modification Effects 0.000 description 5
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 230000004075 alteration Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 230000006399 behavior Effects 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/0483—Interaction with page-structured environments, e.g. book metaphor
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/30—Monitoring
- G06F11/34—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment
- G06F11/3438—Recording or statistical evaluation of computer activity, e.g. of down time, of input/output operation ; Recording or statistical evaluation of user activity, e.g. usability assessment monitoring of user actions
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/04—Context-preserving transformations, e.g. by using an importance map
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本公开涉及一种页面操作录制方法、装置、介质和设备。根据本公开提供的方案，在使用开源框架rrweb录制浏览器标签页面操作的基础上，重写了rrweb中的snapshot方法，改进获取序列化快照的操作，在获取序列化快照的同时，还获取页面标识，以标识获取的序列化快照对应的标签页面。从而在一次页面操作录制过程中，可以监听处于浏览器焦点的标签页面变化，针对变化的处于浏览器焦点的标签页面不断获取序列化快照，延长页面操作录制的生命周期，保证页面操作录制的完整性。
Description
技术领域
本公开涉及通信技术领域，特别涉及一种页面操作录制方法、装置、介质和设备。
背景技术
本部分旨在为权利要求书中陈述的本公开的实施方式提供背景或上下文。此处的描述不因为包括在本部分中就承认是现有技术。
现有的浏览器标签(tab)页面操作录制技术，包括以下三种：命令行工具(FFmpeg)技术，网页即时通信(webRTC)技术和第三方浏览器扩展技术。
FFmpeg技术的基本原理是依据设定的帧率，调用系统应用程序接口(API)得到当前的画面并截图为视频帧，再用FFmpeg编码成视频。
webRTC技术即web即时通信技术，其底层也是通过FFmpeg进行音视频的编码。其通过浏览器调用系统API获取媒体流，再将获取到的媒体流使用FFmpeg编码成音视频。
第三方浏览器扩展技术实现的页面操作录制与FFmpeg技术、webRTC技术大同小异，其通过调用系统API进行浏览器扩展，完成页面操作屏幕录制及存储操作。
使用上述技术录制页面操作，存在存储高分辨率且时长较长的页面操作视频需要占用大量的存储空间，会造成存储空间不足的问题。
为了减少存储空间的占用，可以使用重播回放组件(rrweb)，通过记录当前访问tab页面的文档对象模型(DOM)变化，实现页面操作录制。
使用rrweb录制页面操作的基本流程为：先记录当前访问页面的初始DOM状态或者某个特定时刻的DOM状态，获得初始全量快照。后续收集该页面不同时间点的DOM变化作为一个增量快照。在初始全量快照的基础上，通过操作行为解析不断获得DOM变化数据，构建后续的增量快照，从而有效减少大量数据的存储。
但使用rrweb框架进行浏览器tab页面操作的录制，目前只能针对单个tab页面进行页面操作录制，无法保证录制的完整性。
发明内容
本公开实施例提供一种页面操作录制方法、装置、介质和设备，用于解决页面操作录制不完整的问题。
第一方面，本公开提供了一种页面操作录制方法，所述方法包括：
接收页面操作录制启动请求；
若接收到页面操作录制启动请求，监听标签页面切换请求；
若未监听到标签页面切换请求，获取第一页面文档对象模型的初始全量快照，所述第一页面文档对象模型每次发生变化对应的增量快照，以及所述第一页面的标识；
其中，所述第一页面为所述页面操作录制启动请求对应的处于浏览器焦点的标签页面。
可选的，所述方法还包括：
若监听到标签页面切换请求，将获取的第二页面文档对象模型的初始全量快照、增量快照以及所述第二页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据；并，
获取第三页面文档对象模型的初始全量快照，所述第三页面文档对象模型每次发生变化对应的增量快照，以及所述第三页面的标识；
其中，所述第二页面为切换前处于浏览器焦点的标签页面，所述第三页面为切换后处于浏览器焦点的标签页面。
可选的，所述方法还包括：
监听页面操作录制结束请求；
若监听到页面操作录制结束请求，将获取的第四页面文档对象模型的初始全量快照、增量快照以及所述第四页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据，并将本次从接收到页面操作录制启动请求，到监听到页面操作录制结束请求之间按顺序保存的重播数据合并为一个重播文档；
其中，所述第四页面为所述操作录制结束请求对应的处于浏览器焦点的标签页面。
可选的，所述方法还包括：
若接收到录制重播请求，按照所述重播文档中重播数据的保存先后顺序，依次根据每个重播数据，针对该重播数据中页面标识对应的页面，利用该重播数据中的初始全量快照和增量快照，实现页面操作回放。
第二方面，本公开还提供了一种页面操作录制装置，所述装置包括：
控制模块，用于接收页面操作录制启动请求；
监听模块，用于若所述控制模块接收到页面操作录制启动请求，监听标签页面切换请求；
录制模块，用于若所述监听模块未监听到标签页面切换请求，获取第一页面文档对象模型的初始全量快照，所述第一页面文档对象模型每次发生变化对应的增量快照，以及所述第一页面的标识；其中，所述第一页面为所述页面操作录制启动请求对应的处于浏览器焦点的标签页面。
可选的，所述装置还包括通信模块和存储模块：
所述通信模块，用于若所述监听模块监听到标签页面切换请求，指示所述存储模块将所述录制模块获取的第二页面文档对象模型的初始全量快照、增量快照以及所述第二页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据；并，指示所述录制模块获取第三页面文档对象模型的初始全量快照，所述第三页面文档对象模型每次发生变化对应的增量快照，以及所述第三页面的标识；其中，所述第二页面为切换前处于浏览器焦点的标签页面，所述第三页面为切换后处于浏览器焦点的标签页面。
所述存储模块，用于将所述录制模块获取的第二页面文档对象模型的初始全量快照、增量快照以及所述第二页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据。
可选的，所述监听模块，还用于监听页面操作录制结束请求；
所述通信模块，还用于若所述监听模块监听到页面操作录制结束请求，指示所述存储模块将所述录制模块获取的第四页面文档对象模型的初始全量快照、增量快照以及所述第四页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据，并将本次从接收到页面操作录制启动请求，到监听到页面操作录制结束请求之间按顺序保存的重播数据合并为一个重播文档；其中，所述第四页面为所述操作录制结束请求对应的处于浏览器焦点的标签页面。
可选的，所述装置还包括重播模块：
所述重播模块，用于若接收到录制重播请求，按照所述重播文档中重播数据的保存先后顺序，依次根据每个重播数据，针对该重播数据中页面标识对应的页面，利用该重播数据中的初始全量快照和增量快照，实现页面操作回放。
第三方面，本公开还提供了一种非易失性计算机存储介质，所述计算机存储介质存储有可执行程序，该可执行程序被处理器执行实现如上所述的方法。
第四方面，本公开还提供了一种页面操作录制设备，包括处理器、通信接口、存储器和通信总线，其中，所述处理器，所述通信接口，所述存储器通过所述通信总线完成相互间的通信；
所述存储器，用于存放计算机程序；
所述处理器，用于执行所述存储器上所存储的程序时，实现如上所述的方法步骤。
根据本公开提供的方案，在使用开源框架rrweb录制浏览器标签页面操作的基础上，重写了rrweb中的快照(snapshot)方法，改进获取序列化快照的操作，在获取序列化快照的同时，还获取页面标识，以标识获取的序列化快照对应的标签页面。从而在一次页面操作录制过程中，可以监听处于浏览器焦点的标签页面变化，针对变化的处于浏览器焦点的标签页面不断获取序列化快照，延长页面操作录制的生命周期，保证页面操作录制的完整性。
本公开的其它特征和优点将在随后的说明书中阐述，并且，部分地从说明书中变得显而易见，或者通过实施本公开而了解。本公开的目的和其他优点可通过在所写的说明书、权利要求书、以及附图中所特别指出的结构来实现和获得。
附图说明
为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本公开实施例提供的页面操作录制方法的流程示意图；
图2为本公开实施例提供的页面操作录制装置的结构示意图；
图3为本公开实施例提供的页面操作录制设备的结构示意图。
具体实施方式
为了使本公开的目的、技术方案和优点更加清楚，下面将结合附图对本公开作进一步地详细描述，显然，所描述的实施例仅仅是本公开的一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
需要说明的是，在本文中提及的“多个或者若干个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。
本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。
此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
针对使用rrweb框架录制浏览器tab页面操作时，只能录制单个页面操作，无法保证录制的完整性，无法记录从浏览器开启到关闭的整个流程中的多个页面操作的问题，本公开提出可以自主编写浏览器扩展程序，将扩展程序封装在浏览器中，利用扩展程序在针对一个标签页面获取序列化快照的同时，获取页面标识，通过利用页面标识区分标签页面以及监听处于浏览器焦点的标签页面变化，实现针对多个页面的序列化快照的不断获取，从而可以实现多个页面操作的录制，解决目前的rrweb框架一次页面操作录制，只能支持针对单个tab页面的操作录制的问题，可以实现从浏览器开启到关闭全程的多个页面操作录制。
基于以上说明，本公开实施例提供一种页面操作录制方法，该方法的步骤流程可以如图1所示，包括：
步骤101、接收页面操作录制启动请求。
在本实施例中，可以由页面操作录制启动请求启动一次页面操作录制。因此浏览器开启之后，若通过浏览器访问网站，在本步骤中，可以接收页面操作录制启动请求。
页面操作录制启动请求可以通过任意方式触发。例如，在一种可能的实现方式中，页面操作录制启动请求可以通过点击浏览器上设置的录制按钮触发，或者，在另一种可能的实现方式中，页面操作录制启动请求可以通过浏览器访问特定网站的特定页面触发。
若接收到页面操作录制启动请求，可以继续执行步骤102。
步骤102、监听标签页面切换请求。
若接收到页面操作录制启动请求，由于本公开可以针对多个标签页面进行页面操作录制，在本步骤中，可以监听标签页面切换请求，判断是否需要进行处于浏览器焦点的标签页面的切换，以针对处于浏览器焦点的每个标签页面进行页面操作录制。处于浏览器焦点的标签页面也可以理解为当前正在被访问的标签页面。
在一种可能的实现方式中，标签页面切换请求可以但不限于通过以下三种方式中的至少一种触发：
方式一、由从当前处于浏览器焦点的标签页面，直接切换到新开启的一个标签页面作为处于浏览器焦点的标签页面；
方式二、由从当前处于浏览器焦点的标签页面，直接切换到之前已经开启的一个标签页面作为处于浏览器焦点的标签页面；
方式三、关闭当前处于浏览器焦点的标签页面，切换到之前已经开启的一个标签页面作为处于浏览器焦点的标签页面。
若未监听到标签页面切换请求，可以继续执行步骤103，否则，可以跳转执行步骤104。
步骤103、获取第一页面文档对象模型的初始全量快照，第一页面文档对象模型每次发生变化对应的增量快照，以及第一页面的标识。
若未监听到标签页面切换请求，在本步骤中，可以获取第一页面文档对象模型的初始全量快照，第一页面文档对象模型每次发生变化对应的增量快照，以及第一页面的标识，第一页面为页面操作录制启动请求对应的处于浏览器焦点的标签页面，第一页面也可以理解为接收到页面操作录制启动请求时正在被用户访问的标签页面。
可以理解为，在本步骤中，可以针对处于浏览器焦点的标签页面，获取序列化快照及页面标识。
也就是说，在本实施例中，为了实现针对多个标签页面的页面操作录制，可以在获取序列化快照的同时，获取页面标识来区分序列化快照对应的标签页面。页面标识可以理解为可以用于唯一标识页面的标识，在一种可能的实现方式中，页面标识可以为标签页面身份识别号(ID)。
获取序列化快照时，可以通过rrweb框架中的takeFullSnapShotg构建页面DOM树，同时生成标识(id)->节点(Node)的映射，即在构建DOM树时为每个节点生成一个唯一的id，同时根据id生成映射关系，利用映射关系来方便后续的增量快照添加操作。
在本实施例中，页面标识在获取序列化快照的过程中获取即可，在一种可能的实现方式中，可以通过重写rrweb框架的snapshot方法，在为每个节点生成一个唯一的id时，获取标签页面的页面标识。
需要指出的是，在本实施例中，由于通过页面标识区分不同的标签页面，因此，针对不同标签页面，即使生成了相同的节点id，也不会造成每个标签页面对应的序列化快照的紊乱。
页面DOM的初始全量快照可以包括服务器反馈的各种页面DOM信息，例如，可以但不限于包括超文本标记语言(HTML)元素信息，层叠样式表(CSS)样式信息，一些特定操作(例如，登录操作)的替代操作信息(JavaScript信息)等。
步骤104、保存已获取的序列化快照及页面标识，并重新获取序列化快照及页面标识。
若监听到标签页面切换请求，在本步骤中，可以针对切换前处于浏览器焦点的标签页面，保存已获取的序列化快照及页面标识，并针对切换后处于浏览器焦点的标签页面，重新获取序列化快照及页面标识，从而可以针对切换前后处于浏览器焦点的标签页面，分别进行页面操作录制。
在本步骤中，可以将获取的第二页面文档对象模型的初始全量快照、增量快照以及第二页面的标识转换为指定格式，例如，json格式的重播数据，按照转换得到重播数据的顺序保存该重播数据；并，获取第三页面文档对象模型的初始全量快照，第三页面文档对象模型每次发生变化对应的增量快照，以及第三页面的标识。其中，第二页面为切换前处于浏览器焦点的标签页面，第三页面为切换后处于浏览器焦点的标签页面。
需要说明的是，在本实施例中，通过不断地按顺序保存处于浏览器焦点的标签页面对应的重播数据，可以方便准确地持续记录不同标签页面的DOM变化，实现针对多个页面操作的完整记录。
进一步的，本实施例还可以包括以下步骤：
步骤105、监听页面操作录制结束请求。
接收到页面操作录制启动请求之后，还可以监听页面操作录制结束请求，以根据监听到的页面操作录制结束请求，结束一次页面操作录制。
页面操作录制结束请求可以通过任意方式触发。例如，在一种可能的实现方式中，页面操作录制结束请求可以通过关闭浏览器触发，或者，在另一种可能的实现方式中，页面操作录制结束请求可以通过浏览器中全部标签页面关闭触发。
若监听到页面操作录制结束请求，则可以继续执行步骤106，否则，可以继续监听页面操作录制结束请求。
步骤106、获取全部标签页面对应的重播文档。
若监听到页面操作录制结束请求，在本步骤中，可以将获取的第四页面文档对象模型的初始全量快照、增量快照以及第四页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据，并将本次从接收到页面操作录制启动请求，到监听到页面操作录制结束请求之间按顺序保存的重播数据合并为一个重播文档。其中，第四页面为操作录制结束请求对应的处于浏览器焦点的标签页面。
可以理解为，在本步骤中，监听到页面操作录制结束请求时，可以保存正在被用户访问的标签页面对应的序列化快照及页面标识，并根据本次从接收到页面操作录制启动请求，到监听到页面操作录制结束请求之间按顺序保存的各个重播数据，合并得到本次页面操作录制对应的一个完整文档。
步骤105可以在步骤101之后执行。可以理解为，若在步骤103或步骤104执行之后监听到页面操作录制结束请求，则在步骤106中可以将多个标签页面对应的重播数据合并为一个重播文档。在图2中，仅针对步骤106在步骤105之后执行进行了示意。
需要说明的是，在一种可能的实现方式中，本实施例中监听标签页面切换请求、监听页面操作录制结束请求均可以通过向标签页面注入代码，例如，js代码，来实现浏览器监听功能扩展。
监听到标签页面切换请求或者监听到页面操作录制结束请求时，均可以通过标签页面调用指定应用程序接口，例如，chrome.runtime API，向浏览器后台发送消息，触发浏览器后台根据监听到的请求类型，实现页面操作录制，获得并保存录制得到的重播数据。
本实施例中，在一种可能的实现方式中，浏览器后台可以在本地存储重播数据、重播文档，也可以将重播数据、重播文档发送至其它设备，例如，服务器或移动设备进行保存，以进一步减少对浏览器后台存储空间的占用。
在本实施例中，重播文档可以理解为将多个重播数据合并得到的数据对应的文档。文档可以但不限于理解为以特定的格式存储的含有用户数据的文件。
获得页面操作录制对应的一个完整文档之后，还可以根据完整文档，实现对页面操作录制的重播回放。进一步的，本实施例还可以包括步骤107：
步骤107、实现页面操作录制的重播回放。
在本步骤中，若接收到录制重播请求，可以按照重播文档中重播数据的保存先后顺序，依次根据每个重播数据，针对该重播数据中页面标识对应的页面，利用该重播数据中的初始全量快照和增量快照，实现页面操作回放。
需要说明的是，在本实施例中，由于重播文档中包括多个标签页面对应的重播数据，需要根据重播数据的保存顺序，依次重播回放每个重播数据对应页面的页面操作，以实现多个页面对应的页面操作的准确重播回放。
而针对每个重播数据，由于通过页面标识进行对应页面的区分，因此，可以针对每个页面标识对应的页面，根据获取的序列化快照，实现该页面对应的页面操作的准确重播回放。
根据本公开实施例提供的方案，可以在浏览器中打开多个标签页面，依次录制处于浏览器焦点的标签页面上的页面操作，录制的周期可以从单个标签页面的打开到关闭，转换为浏览器第一个标签页面打开到浏览器进程关闭(或者浏览器中没有标签页面)，切换标签页面录制不间断，可以完整地复现用户从打开浏览器到关闭浏览器(或者浏览器中没有标签页面)的整个页面操作过程。本公开实施例提供的方案，可以通过浏览器扩展控制录制的开启与结束，同时实现录制过程中标签页面与浏览器后台之间的消息通信。
与提供的方法对应的，进一步提供以下的装置。
本公开实施例提供一种页面操作录制装置，该装置可以集成在浏览器中，该装置的结构可以如图2所示，包括：
控制模块11用于接收页面操作录制启动请求；
监听模块12用于若所述控制模块11接收到页面操作录制启动请求，监听标签页面切换请求；
录制模块13用于若所述监听模块12未监听到标签页面切换请求，获取第一页面文档对象模型的初始全量快照，所述第一页面文档对象模型每次发生变化对应的增量快照，以及所述第一页面的标识；其中，所述第一页面为所述页面操作录制启动请求对应的处于浏览器焦点的标签页面。
在一种可能的实现方式中，所述装置还包括通信模块14和存储模块15：
所述通信模块14用于若所述监听模块12监听到标签页面切换请求，指示所述存储模块15将所述录制模块13获取的第二页面文档对象模型的初始全量快照、增量快照以及所述第二页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据；并，指示所述录制模块13获取第三页面文档对象模型的初始全量快照，所述第三页面文档对象模型每次发生变化对应的增量快照，以及所述第三页面的标识；其中，所述第二页面为切换前处于浏览器焦点的标签页面，所述第三页面为切换后处于浏览器焦点的标签页面。
所述存储模块15用于将所述录制模块获取的第二页面文档对象模型的初始全量快照、增量快照以及所述第二页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据。
在一种可能的实现方式中，所述监听模块12还用于监听页面操作录制结束请求；
所述通信模块14还用于若所述监听模块12监听到页面操作录制结束请求，指示所述存储模块15将所述录制模块13获取的第四页面文档对象模型的初始全量快照、增量快照以及所述第四页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据，并将本次从接收到页面操作录制启动请求，到监听到页面操作录制结束请求之间按顺序保存的重播数据合并为一个重播文档；其中，所述第四页面为所述操作录制结束请求对应的处于浏览器焦点的标签页面。
在一种可能的实现方式中，所述装置还包括重播模块16：
所述重播模块16用于若接收到录制重播请求，按照所述重播文档中重播数据的保存先后顺序，依次根据每个重播数据，针对该重播数据中页面标识对应的页面，利用该重播数据中的初始全量快照和增量快照，实现页面操作回放。
本公开上述实施例提供的各装置的各功能单元的功能，可以通过上述对应的各方法的步骤来实现，因此，本公开实施例提供的各装置中的各个功能单元的可能的工作过程和有益效果，在此不复赘述。
基于同一发明构思，本公开实施例提供以下的设备和介质。
本公开实施例提供一种页面操作录制设备，该设备的结构可以如图3所示，包括处理器21、通信接口22、存储器23和通信总线24，其中，所述处理器21，所述通信接口22，所述存储器23通过所述通信总线24完成相互间的通信；
所述存储器23，用于存放计算机程序；
所述处理器21，用于执行所述存储器上所存储的程序时，实现本公开上述方法实施例所述的步骤。
可选的，所述处理器21可以包括中央处理器(CPU)、特定应用集成电路(ASIC，Application Specific Integrated Circuit)，可以是一个或多个用于控制程序执行的集成电路，可以是使用现场可编程门阵列(FPGA，Field Programmable Gate Array)开发的硬件电路，可以是基带处理器。
可选的，所述处理器21可以包括至少一个处理核心。
可选的，所述存储器23可以包括只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)和磁盘存储器。存储器23用于存储至少一个处理器21运行时所需的数据。存储器23的数量可以为一个或多个。
本公开实施例还提供一种非易失性计算机存储介质，所述计算机存储介质存储有可执行程序，当可执行程序被处理器执行时，实现本公开上述方法实施例提供的方法。
在可能的实施过程中，计算机存储介质可以包括：通用串行总线闪存盘(USB，Universal Serial Bus Flash Drive)、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的存储介质。
在本公开实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，所述单元或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，设备或单元的间接耦合或通信连接，可以是电性或其它的形式。
在本公开实施例中的各功能单元可以集成在一个处理单元中，或者各个单元也可以均是独立的物理模块。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本公开实施例的技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备，例如可以是个人计算机，服务器，或者网络设备等，或处理器(processor)执行本公开各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：通用串行总线闪存盘(Universal Serial Bus Flash Drive)、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
本领域内的技术人员应明白，本公开的实施例可提供为方法、系统、或计算机程序产品。因此，本公开可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本公开可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本公开是参照根据本公开实施例的方法、装置(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
尽管已描述了本公开的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本公开范围的所有变更和修改。
显然，本领域的技术人员可以对本公开进行各种改动和变型而不脱离本公开的精神和范围。这样，倘若本公开的这些修改和变型属于本公开权利要求及其等同技术的范围之内，则本公开也意图包含这些改动和变型在内。
Claims (6)
1.一种页面操作录制方法，其特征在于，所述方法包括：
接收页面操作录制启动请求；
若接收到页面操作录制启动请求，监听标签页面切换请求；
若未监听到标签页面切换请求，获取第一页面文档对象模型的初始全量快照，所述第一页面文档对象模型每次发生变化对应的增量快照，以及所述第一页面的标识；
其中，获取所述初始全量快照和增量快照时，通过rrweb框架中的takeFullSnapShotg构建页面DOM树，在构建DOM树时为每个节点生成一个唯一的id，得到标识id-> 节点Node的映射关系，在为每个节点生成一个唯一的id时，获取标签页面的页面标识；
其中，所述第一页面为所述页面操作录制启动请求对应的处于浏览器焦点的标签页面；
若监听到标签页面切换请求，将获取的第二页面文档对象模型的初始全量快照、增量快照以及所述第二页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据；并，
获取第三页面文档对象模型的初始全量快照，所述第三页面文档对象模型每次发生变化对应的增量快照，以及所述第三页面的标识；
其中，所述第二页面为切换前处于浏览器焦点的标签页面，所述第三页面为切换后处于浏览器焦点的标签页面；
所述方法还包括：
监听页面操作录制结束请求；
若监听到页面操作录制结束请求，将获取的第四页面文档对象模型的初始全量快照、增量快照以及所述第四页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据，并将本次从接收到页面操作录制启动请求，到监听到页面操作录制结束请求之间按顺序保存的重播数据合并为一个重播文档；
其中，所述第四页面为所述操作录制结束请求对应的处于浏览器焦点的标签页面。
2.如权利要求1所述的方法，其特征在于，所述方法还包括：
若接收到录制重播请求，按照所述重播文档中重播数据的保存先后顺序，依次根据每个重播数据，针对该重播数据中页面标识对应的页面，利用该重播数据中的初始全量快照和增量快照，实现页面操作回放。
3.一种页面操作录制装置，其特征在于，所述装置包括：
控制模块，用于接收页面操作录制启动请求；
监听模块，用于若所述控制模块接收到页面操作录制启动请求，监听标签页面切换请求；
录制模块，用于若所述监听模块未监听到标签页面切换请求，获取第一页面文档对象模型的初始全量快照，所述第一页面文档对象模型每次发生变化对应的增量快照，以及所述第一页面的标识；
其中，获取所述初始全量快照和增量快照时，通过rrweb框架中的takeFullSnapShotg构建页面DOM树，在构建DOM树时为每个节点生成一个唯一的id，得到标识id-> 节点Node的映射关系，在为每个节点生成一个唯一的id时，获取标签页面的页面标识；
其中，所述第一页面为所述页面操作录制启动请求对应的处于浏览器焦点的标签页面；
所述装置还包括通信模块和存储模块：
所述通信模块，用于若所述监听模块监听到标签页面切换请求，指示所述存储模块将所述录制模块获取的第二页面文档对象模型的初始全量快照、增量快照以及所述第二页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据；并，指示所述录制模块获取第三页面文档对象模型的初始全量快照，所述第三页面文档对象模型每次发生变化对应的增量快照，以及所述第三页面的标识；其中，所述第二页面为切换前处于浏览器焦点的标签页面，所述第三页面为切换后处于浏览器焦点的标签页面；
所述存储模块，用于将所述录制模块获取的第二页面文档对象模型的初始全量快照、增量快照以及所述第二页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据；
所述监听模块，还用于监听页面操作录制结束请求；
所述通信模块，还用于若所述监听模块监听到页面操作录制结束请求，指示所述存储模块将所述录制模块获取的第四页面文档对象模型的初始全量快照、增量快照以及所述第四页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据，并将本次从接收到页面操作录制启动请求，到监听到页面操作录制结束请求之间按顺序保存的重播数据合并为一个重播文档；其中，所述第四页面为所述操作录制结束请求对应的处于浏览器焦点的标签页面；
所述存储模块，用于将所述录制模块获取的第四页面文档对象模型的初始全量快照、增量快照以及所述第四页面的标识转换为指定格式的重播数据，按照转换得到重播数据的顺序保存该重播数据。
4.如权利要求3所述的装置，其特征在于，所述装置还包括重播模块：
所述重播模块，用于若接收到录制重播请求，按照所述重播文档中重播数据的保存先后顺序，依次根据每个重播数据，针对该重播数据中页面标识对应的页面，利用该重播数据中的初始全量快照和增量快照，实现页面操作回放。
5.一种非易失性计算机存储介质，其特征在于，所述计算机存储介质存储有可执行程序，该可执行程序被处理器执行实现权利要求1~2任一所述的方法。
6.一种页面操作录制设备，其特征在于，所述设备包括处理器、通信接口、存储器和通信总线，其中，所述处理器，所述通信接口，所述存储器通过所述通信总线完成相互间的通信；
所述存储器，用于存放计算机程序；
所述处理器，用于执行所述存储器上所存储的程序时，实现权利要求1~2任一所述的方法步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111265847.9A CN113946256B (zh) | 2021-10-28 | 2021-10-28 | 一种页面操作录制方法、装置、介质和设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111265847.9A CN113946256B (zh) | 2021-10-28 | 2021-10-28 | 一种页面操作录制方法、装置、介质和设备 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113946256A CN113946256A (zh) | 2022-01-18 |
| CN113946256B true CN113946256B (zh) | 2022-11-18 |
Family
ID=79337310
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111265847.9A Active CN113946256B (zh) | 2021-10-28 | 2021-10-28 | 一种页面操作录制方法、装置、介质和设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113946256B (zh) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117851196A (zh) * | 2023-12-11 | 2024-04-09 | 北京海泰方圆科技股份有限公司 | 一种页面数据的传输方法、装置、设备及介质 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105786894A (zh) * | 2014-12-22 | 2016-07-20 | 广州市动景计算机科技有限公司 | 页面展示方法和页面展示设备 |
| CN113553529A (zh) * | 2021-07-26 | 2021-10-26 | 平安养老保险股份有限公司 | 记录网页行为方法、装置、计算机设备及存储介质 |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7133857B1 (en) * | 2002-10-15 | 2006-11-07 | Ximpleware, Inc. | Processing structured data |
| CN108519847A (zh) * | 2018-04-13 | 2018-09-11 | 维沃移动通信有限公司 | 一种录屏方法及终端 |
| CN108920226B (zh) * | 2018-05-04 | 2022-04-29 | 维沃移动通信有限公司 | 屏幕录制方法及装置 |
| CN111309547A (zh) * | 2020-01-21 | 2020-06-19 | 北京百度网讯科技有限公司 | 网页信息获取方法、装置和电子设备 |
| CN111443969A (zh) * | 2020-03-24 | 2020-07-24 | 深圳前海微众银行股份有限公司 | 一种录制网页页面的方法及装置 |
-
2021
- 2021-10-28 CN CN202111265847.9A patent/CN113946256B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105786894A (zh) * | 2014-12-22 | 2016-07-20 | 广州市动景计算机科技有限公司 | 页面展示方法和页面展示设备 |
| CN113553529A (zh) * | 2021-07-26 | 2021-10-26 | 平安养老保险股份有限公司 | 记录网页行为方法、装置、计算机设备及存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113946256A (zh) | 2022-01-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111818123B (zh) | 网络前端远程回放方法、装置、设备及存储介质 | |
| CN111488259B (zh) | 针对网页的录制方法及针对录制文件的回放方法 | |
| CN108804299A (zh) | 应用程序异常处理方法及装置 | |
| CN107085549B (zh) | 故障信息生成的方法和装置 | |
| CN111078519A (zh) | 异常监控行为回溯的方法、装置和电子设备 | |
| CN112445757A (zh) | 可视化日志存储和回溯方法、装置和计算机设备 | |
| US10341710B2 (en) | Program recording method and device, and set top box | |
| CN113946256B (zh) | 一种页面操作录制方法、装置、介质和设备 | |
| CN112817866A (zh) | 录制回放方法、装置、系统、计算机设备以及存储介质 | |
| CN113987393A (zh) | 一种网页操作记录器、系统、装置及方法 | |
| CN110659435A (zh) | 页面数据采集处理方法、装置、计算机设备和存储介质 | |
| CN112612690A (zh) | 一种用户界面信息处理方法、装置、电子设备及存储介质 | |
| CN112711727B (zh) | 一种移动终端的网页跳转方法及装置 | |
| CN107784031A (zh) | 一种多网页截图的方法及装置 | |
| CN110837467B (zh) | 软件测试方法、装置以及系统 | |
| CN113282475B (zh) | 用于评价交互系统交互性能的方法和装置 | |
| CN113806208B (zh) | 测试取证方法及装置、设备、存储介质 | |
| CN114546775A (zh) | 基于客户端应用的web监控方法、装置、设备和介质 | |
| US10885343B1 (en) | Repairing missing frames in recorded video with machine learning | |
| CN102970363A (zh) | 远程日志下载系统和远程日志下载方法 | |
| CN113127785A (zh) | 字幕处理方法、装置、计算机设备及存储介质 | |
| CN112351233A (zh) | 教室教学环境录制方法、装置、存储介质及教育一体机 | |
| CN105573921A (zh) | 文件存储方法及装置 | |
| JP4984158B2 (ja) | 測定データ記録装置 | |
| CN117667604B (zh) | 追踪事件的数据监测方法、装置、电子设备及存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |