CN115586941A - 一种移动端rn页面录屏回放的方法及装置 - Google Patents

Abstract

本发明提供了一种移动端RN页面录屏回放的方法及装置，该方法包括：获取移动端RN页面的页面基础信息；获取所述RN页面的页面变化信息，所述页面变化信息包括页面变化记录以及所述页面变化记录对应的时间戳；依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录，以实现录屏回放。本发明的方案通过获取移动端RN页面的页面基础信息和页面变化信息，利用页面变化信息中的变化记录和时间戳在页面基础信息的基础上的进行操作还原，可以在不影响用户体验、只使用少量存储空间的前提下，付出较小的成本，完整录制用户的页面操作过程，并在后续的场景中回放还原用户操作。

Description

一种移动端RN页面录屏回放的方法及装置

技术领域

本发明涉及终端技术领域，特别是一种移动端RN页面录屏回放的方法及装置。

背景技术

录屏回放技术在移动端的应用主要是通过记录用户的界面操作，并在后续情景重放、问题定位等场景中，将用户的操作过程回放还原的一种技术。在H5页面中，目前已经有一些技术手段可以实现录屏回放功能，但是在RN(React Native)页面中，还没有比较满意的解决方案。

目前行业内的移动端RN页面录屏回放解决方案为借助手机自带的系统录屏功能，录制用户的操作过程，然后将录制的视频文件保存到服务端，在需要的时候将视频下载播放，该方案主要有以下缺点：1、录制文件体积大，由于使用的是系统录屏功能，虽然录制的清晰度比较高，但是录制的文件体积过大，录制一分钟普通分辨率的视频就超过十几兆，对于企业来说这是无法接受的。用户量越多，使用时间越长，录制的视频越大，需要消耗非常大的带宽和服务器资源，带来巨大的经济成本。2、录屏信息保存困难，由于录制的文件体积巨大，从客户端保存到服务端需要消耗较多流量，这是用户无法接受的。一是会占用用户的上传带宽，二是可能会浪费用户的流量，三是视频文件的保存会需要非常长的时间，无法做到实时保存。3、依赖客户端，由于需要调用系统的录屏功能，涉及隐私权限调用等底层系统能力，对于RN开发来说，还需要依赖客户端技术支持才能实现录屏功能，存在技术依赖，且不同的客户端需要分别实现。上述录屏回放技术，需要依赖客户端的支持，占用较大的存储空间，需要付出较大的成本，且无法做到不影响用户体验，并不适合大规模投入使用，且成本高昂。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的移动端RN页面录屏回放的方法及装置。

根据本发明的第一方面，提供了一种移动端RN页面录屏回放的方法，所述方法包括：

获取移动端RN页面的页面基础信息，所述页面基础信息为移动端执行录屏操作时记录的RN页面数据结构关联的信息；

获取所述RN页面的页面变化信息，所述页面变化信息包括页面变化记录以及所述页面变化记录对应的时间戳；

依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录，以实现录屏回放。

可选地，所述获取移动端RN页面的页面基础信息之前，所述方法还包括：

获取移动端上传至服务端的压缩文件，对所述压缩文件进行解析以得到RN页面的页面基础信息和页面变化信息；

所述压缩文件为所述移动端在设定条件下自动上传至所述服务端或响应于用户操作上传至所述服务端；所述设定条件包括网络环境条件和/或移动端运行环境条件。

可选地，所述页面基础信息为所述移动端对RN页面进行以下处理得到：

获取RN页面的源代码元素结构信息，并将所述源代码元素结构信息转换为JSON数据结构；

提取所述RN页面中的可视元素；

基于所述可视元素和所述JSON数据结构得到移动端RN页面的页面基础信息。

可选地，所述所述页面变化信息为所述移动端对RN页面进行监控操作得到：

所述移动端通过监测所述RN页面的元素结构变化数据生成的变更记录及对应的时间戳；和/或，

所述移动端通过监测用户操作所述RN页面时生成的操作记录及对应的时间戳。

可选地，所述移动端通过以下至少一种方式监测用户操作所述RN页面时生成的操作记录：

通过RN页面提供的手势操作Gesture API拦截以监测用户的手势操作；

通过拦截scrollView的滚动事件获取页面滚动记录；

通过底层Touchable组件可以拦截所有的点击事件。

可选地，所述依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录包括：

采用react-native-web技术将所述页面基础信息还原在web页面上作为基础视图；

将所述页面变化记录按照记录的时间戳进行逐一还原，基于所述基础视图进行页面调整。

可选地，所述依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录之前，所述方法还包括：

获取所述压缩包中存储的媒体链接，依据所述媒体连接获取对应的媒体文件。

根据本发明的第二方面，提供了一种移动端RN页面录屏回放的装置，所述装置包括：

第一信息获取模块，用于获取移动端RN页面的页面基础信息，所述页面基础信息为移动端执行录屏操作时记录的RN页面数据结构关联的信息；

第二信息获取模块，用于获取所述RN页面的页面变化信息，所述页面变化信息包括页面变化记录以及所述页面变化记录对应的时间戳；

回放模块，用于依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录，以实现录屏回放。

根据本发明的第三方面，提供了一种计算机可读存储介质，所述计算机可读存储介质用于存储程序代码，所述程序代码用于执行第一方面中任一项所述的方法。

根据本发明的第四方面，提供了一种计算设备，所述计算设备包括处理器以及存储器：

所述存储器用于存储程序代码，并将所述程序代码传输给所述处理器；

所述处理器用于根据所述程序代码中的指令执行第一方面中任一项所述的方法。

本发明提供了一种移动端RN页面录屏回放的方法及装置，通过获取移动端RN页面的页面基础信息和页面变化信息，利用页面变化信息中的变化记录和时间戳在页面基础信息的基础上的进行操作还原，可以在不影响用户体验、只使用少量存储空间的前提下，付出较小的成本，完整录制用户的页面操作过程，并在后续的场景中回放还原用户操作。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

根据下文结合附图对本发明具体实施例的详细描述，本领域技术人员将会更加明了本发明的上述以及其他目的、优点和特征。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明实施例的移动端RN页面录屏回放的方法流程示意图；

图2示出了根据本发明实施例的RN页面数据化结构示意图；

图3示出了根据本发明实施例的RN页面的页面变化信息示意图；

图4示出了根据本发明实施例的页面回放示意图；

图5示出了根据本发明实施例的移动端RN页面录屏回放的装置结构示意图。

具体实施方式

下面将参照附图更详细地描述本发明的示例性实施例。虽然附图中显示了本发明的示例性实施例，然而应当理解，可以以各种形式实现本发明而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本发明，并且能够将本发明的范围完整的传达给本领域的技术人员。

本发明实施例提供了一种移动端RN页面录屏回放的方法，可应用于执行录屏回放操作的回放端，该回放端可以是任一终端设备。如图1所示，本发明实施例的移动端RN页面录屏回放的方法至少可以包括以下步骤S101～S103。

S101，获取移动端RN页面的页面基础信息，所述页面基础信息为移动端执行录屏操作时记录的RN页面数据结构关联的信息。

本实施例的移动端是进行录屏的终端，用户在移动端基于RN页面执行对应的操作之前，可以获取并记录在RN页面中的页面基础信息。其中，RN页面的页面基础信息可以包括RN页面的页面结构以及RN页面包含的各个页面元素等相关信息，RN页面的页面基础信息可以是在基于RN页面执行录屏动作时所记录并存储至服务端。进行录屏回放时，可以由回放端从服务端获取，回放端可以是移动端之外的其他终端，也可以是移动端本身。

S102，获取RN页面的页面变化信息，所述页面变化信息包括页面变化记录以及所述页面变化记录对应的时间戳。

在获取到RN页面的页面基础信息之后，可以进一步获取RN页面的页面变化信息，RN页面的页面变化信息可以是移动端进行录屏时所记录的页面中的元素变化或者是结构变化的变化记录，以及每条变化记录生成时的时间戳，本实施例页面变化信息也存储于服务端中。

S103，依据页面变化记录对应的时间戳在页面基础信息还原所述页面变化记录，以实现录屏回放。

在获取到RN页面的页面基础信息以及页面变化信息之后，就可以根据页面变化信息中的页面变化记录及对应的时间戳以进行页面变化记录的还原，从而实现录屏回放。

本发明实施例提供了一种移动端RN页面录屏回放的方法，可以在不影响用户体验、只使用少量存储空间的前提下，付出较小的成本，通过完整录制用户的页面操作过程作为页面变化信息，同时结合页面基础信息，实现后续的场景中在页面基础信息回放还原用户操作。本实施例的方案可以应用于具有录屏需求的应用场景，例如针对移动端进行APP操作执行的录屏操作等。移动端作为录屏终端可以为智能手机、平板电脑等终端，或者是其他能够提供浏览、查看、触发等操作的终端。一般来讲，应用本发明实施例的回放端是与移动端不同的终端。

上文提及，RN页面的页面基础信息和页面变化信息均可以存储与服务端，可选地，在上述步骤S101获取移动端RN页面的页面基础信息之前，还可以获取移动端上传至服务端的压缩文件，对所述压缩文件进行解析以得到RN页面的页面基础信息和页面变化信息。可以理解为，RN页面的页面基础信息和页面变化信息均由移动端进行采集，并进行打包后上传至服务端进行存储。回放端需要进行录屏回放时，从服务端获取到压缩包进行解压之后，即可获取到页面基础信息和页面变化信息。

其中，所述压缩文件为所述移动端在设定条件下自动上传至所述服务端或响应于用户操作上传至所述服务端。也就是说，移动端在向服务端上传压缩文件时，可以在移动端满足设定条件时自动上传至服务端，该设定条件可以包括网络环境条件和/或移动端运行环境条件。举例来讲，可以在移动端流量充足，或是连接WiFi情况下自动将压缩包上传至服务端，或者是在移动端进行页面报错等与服务端进行信息交互时将压缩包上传至服务端，从而减少因上传压缩包文件而带来的流量损失。当然，移动端还可以响应于用户的主动操作将压缩包上传至服务端。

进一步地，对于RN页面中的多媒体文件，移动端可以进获取多媒体文件对应的多媒体链接，进而将多媒体链接连通RN页面的页面基础信息和页面变化信息一起打包生成压缩文件上传至服务端。回放端在进行录屏回放时，可以获取所述压缩包中存储的媒体链接，依据所述媒体连接获取对应的媒体文件。

在本实施例中，RN页面的页面基础信息为移动端对RN页面进行以下处理得到：

A1，获取RN页面的源代码元素结构信息，并将所述源代码元素结构信息转换为JSON数据结构。在移动端，可以将RN页面庞大的元素结构，利用AST(Abstract SyntaxTree，抽象语法树)工具，将源代码元素结构信息进行抽象，转换为简易的JSON数据结构，如图2所示。一个对象生成AST的关键所在是词法分析和语法分析。词法分析指的是将对象逐个扫描，获取每一个字母的信息，生成由对象组成的一维数组。本实施例采用AST工具，将源代码元素结构信息进行抽象，转换为简易的JSON数据结构，可以将一个复杂的页面转换为只有几十到几百kb的原始数据，从而有效减少RN页面相关信息的内存占比。

A2，提取所述RN页面中的可视元素。由于RN页面具有庞大的数据结构，因此，需要对RN页面元素进行信息数据化，将RN页面中的隐藏元素、不可视元素过滤掉，提取可视元素。可选地，RN页面中的隐藏元素包括：不在可视区域的元素、不可见的元素等。不在可视区域判断规则为：通过NativeModules的UIManager API来计算元素在视图中的位置，对于超出视图范围的元素则可以标记为步在可视区域的元素。过滤掉不在可视区域的元素以及隐藏元素之后的其他元素就是需要保留存储的可视元素，也即最终需要进行回放的RN元素。

隐藏、不可见元素的判断规则为：1)样式设置为display:none；2)样式设置为opacity:0；3)属性设置为type＝hidden；4)元素width和height设置为0；5)父元素隐藏，则子元素也可以标记为隐藏元素。本实施例中，通过对不可视区域的元素以及隐藏元素进行过滤，可以对RN页面的元素进行有效过滤，进而减少RN页面信息的文件大小，减少存储空间的占用。

A3，基于所述可视元素和所述JSON数据结构得到移动端RN页面的页面基础信息。根据上述得到的可视元素和JSON数据结构组合可得到RN页面的页面基础信息。移动端获取RN页面的页面变化信息时，可以通过以下方式：

B1，移动端通过监测所述RN页面的元素结构变化数据生成的变更记录及对应的时间戳。RN技术是基于JS框架React的衍生产物，在元素发生变化时，会将变更进行Diff操作，形成更新队列，因此，可以在更新队列处加一层监测，就可以获取到所有元素的变化信息。

B2，移动端通过监测用户操作所述RN页面时生成的操作记录及对应的时间戳。具体地，可以通过RN页面提供的手势操作Gesture API拦截以监测用户的手势操作。

通过拦截scrollView的滚动事件获取页面滚动记录。视图的滚动过程，其实是在不断修改原点坐标。当手指触摸后，ScrollView会暂时拦截触摸事件，使用一个计时器。假如在计时器到点后没有发生手指移动事件，那么ScrollView发送tracking events到被点击的subView；若是在计时器到点后发生了移动事件，那么ScrollView取消tracking自己促发滚动。scrollView的滚动事件包括scrollStart、scrollEnd等。本实施例中，通过底层Touchable组件可以拦截所有的点击事件，点击事件包括被点击元素的信息、点击顺序以及点击事件等等。如图3所示，移动端可以记录RN页面中元素的变化状态，并生成数据化结构。

对于上述提到的页面基础信息和页面变化信息，移动端可以经过gzip压缩临时存储到服务端。进一步地，对于比较占用传输体积的媒体文件如图片、音视频等，并不会直接存储媒体文件，而是只记录相应的媒体链接与上述信息一并存储在元素的属性中，在还原时再去加载相应的媒体链接，在用户空闲、页面报错、网络状态良好、用户主动上报等情况下触发数据上传到服务端。可选地，压缩包可以先存储至移动端本地，后续再上传至服务端，上传至服务端的压缩包会被移动端本地清空，不占用用户的存储空间。由于本实施例中只记录了最小可还原的原始页面信息数据，可以直接存储到服务端的数据库中，只需使用较小的存储空间，而无需使用费用较高的OSS文件存储。

在得到RN页面的页面基础信息以及页面变化信息之后，即可执行上述步骤S103依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录包括：采用react-native-web技术将所述页面基础信息还原在web页面上作为基础视图；将所述页面变化记录按照记录的时间戳进行逐一还原，基于所述基础视图进行页面调整。

react-native-web是一个使React Native组件和API能运行在Web上的库，其和React Native Windows,React Native macOS等库将React Native拓展到一个又一个新的平台。浅显地认为react-native-web就是把React Native的组件和API都用适用于Web的标签和API再适配实现一遍，使其在Web上的行为和在原生应用上尽量保持一致。

由于RN元素并不是标准的HTML规范，它所使用的元素均为特殊的组件封装，无法直接在web端展示，故录屏回放端需要借助react-native-web技术(该技术已开源)将RN元素转换为标准的HTML结构。转换过程如下：回放端将RN页面的基础信息通过react-native-web技术还原在web页面上作为基础视图；回放端将页面变化信息按照变化记录的时间戳按顺序逐一还原，根据变化记录的类型包括元素的增加、删除、改动等，对基础视图进行改动。通过记录的页面滚动、用户点击等记录，同步还原页面的滚动效果及点击效果，最终实现视频回放的效果。

结合图4所示，依据本实施例提供的移动端RN页面录屏回放方法在进行录屏回放时，可以包括：

1)回放端获取移动端RN页面的页面基础信息，如图4所示的数据化结构；借助react-native-web技术将RN页面中的RN元素转换为标准的HTML结构；

2)回放端将RN页面的基础记录通过react-native-web技术还原在web页面上作为基础视图；如图4中的初始页面；

3)回放端将变更记录按照记录的时间戳按顺序逐一还原，根据变更记录的类型包括元素的增加、删除、改动等，对基础视图进行改动；通过记录的页面滚动、用户点击等记录，同步还原页面的滚动效果及点击效果，最终实现视频回放的效果。前文提及，本实施例中RN页面的页面变化信息中包括变化记录以及对应的时间戳，结合图4，假设有变化记录A和变化记录B，在进行录屏回放时，先依据变化记录A在初始页面执行对应的操作，如删除元素A2、增加元素A4，以生成变化页面A；进一步地，再在变化页面A的基础上执行变化记录B，删除元素A3，增加元素A5。基于本实施例提供的方法，不仅可以有效保存RN页面的重点信息，且仅需要较小的存储空间即可保存移动端完成录屏后上传的压缩文件，在不影响用户体验的同时节约成本，完整录制用户的页面操作过程并实现回放。

本发明实施例提供的移动端RN页面录屏回放的方法，页面结构信息数据化，信息变化时以最小的记录存储，无需录制视频媒体文件；在数据传输过程中，只占用较少的流量带宽，节省用户流量及服务器资源；在存储过程，也只需存储较少的页面原始数据，通过回放端即可完整还原用户操作。相比现有的通过系统录制视频回放的技术，本方案可以节省99％的存储空间，为企业节省极大的成本支出。本实施例的方案使用RN技术栈实现，天然支持跨端，在安卓和iOS端均可使用，无需客户端额外支持。

基于同一发明构思，本发明实施例还提供了一种移动端RN页面录屏回放的装置，如图5所示，本实施例的移动端RN页面录屏回放的装置可以包括：

第一信息获取模块510，用于获取移动端RN页面的页面基础信息，所述页面基础信息为移动端执行录屏操作时记录的RN页面数据结构关联的信息；

第二信息获取模块520，用于获取所述RN页面的页面变化信息，所述页面变化信息包括页面变化记录以及所述页面变化记录对应的时间戳；

回放模块530，用于依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录，以实现录屏回放。

在本发明一可选实施例中，第一获取模块还用于：获取移动端上传至服务端的压缩文件，对所述压缩文件进行解析以得到RN页面的页面基础信息和页面变化信息。

在本发明一可选实施例中，所述移动端用于对RN页面进行以下处理得到所述页面基础信息：获取RN页面的源代码元素结构信息，并将所述源代码元素结构信息转换为JSON数据结构；提取所述RN页面中的可视元素；基于所述可视元素和所述JSON数据结构得到移动端RN页面的页面基础信息。

在本发明一可选实施例中，所述移动端用于对RN页面进行以下处理得到页面变化信息：

所述移动端通过监测所述RN页面的元素结构变化数据生成的变更记录及对应的时间戳；和/或，所述移动端通过监测用户操作所述RN页面时生成的操作记录及对应的时间戳。

在本发明一可选实施例中，移动端还用于通过以下至少一种方式监测用户操作所述RN页面时生成的操作记录：

通过RN页面提供的手势操作Gesture API拦截以监测用户的手势操作；

通过拦截scrollView的滚动事件获取页面滚动记录；

通过底层Touchable组件可以拦截所有的点击事件。

在本发明一可选实施例中，回放模块530还用于：

采用react-native-web技术将所述页面基础信息还原在web页面上作为基础视图；

将所述页面变化记录按照记录的时间戳进行逐一还原，基于所述基础视图进行页面调整。

在本发明一可选实施例中，第二信息获取模块520还用于：方法还包括：

获取所述压缩包中存储的媒体链接，依据所述媒体连接获取对应的媒体文件。

需要说明的是，本申请实施例提供的装置所涉及各功能单元的其他相应描述，可以参考上述方法实施例的对应描述，在此不再赘述。

本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质用于存储程序代码，所述程序代码用于执行上述实施例所述的移动端RN页面录屏回放的方法。

本发明实施例还提供了一种计算设备，所述计算设备包括处理器以及存储器：所述存储器用于存储程序代码，并将所述程序代码传输给所述处理器；所述处理器用于根据所述程序代码中的指令执行上述实施例所述的移动端RN页面录屏回放的方法。

本发明实施例还提供了一种计算设备，该计算设备包括通信总线、处理器、存储器和通信接口，还可以包括输入输出接口和显示设备，其中，各个功能单元之间可以通过总线完成相互间的通信。该存储器存储有计算机程序，处理器，用于执行存储器上所存放的程序，执行上述实施例的方法。

所属领域的技术人员可以清楚地了解到，上述描述的系统、装置、模块和单元的具体工作过程，可以参考前述方法实施例中的对应过程，为简洁起见，在此不另赘述。

另外，在本发明各个实施例中的各功能单元可以物理上相互独立，也可以两个或两个以上功能单元集成在一起，还可以全部功能单元都集成在一个处理单元中。上述集成的功能单元既可以采用硬件的形式实现，也可以采用软件或者固件的形式实现。

本领域普通技术人员可以理解：所述集成的功能单元如果以软件的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，其包括若干指令，用以使得一台计算设备(例如个人计算机，服务器，或者网络设备等)在运行所述指令时执行本发明各实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM)、随机存取存储器(RAM)，磁碟或者光盘等各种可以存储程序代码的介质。

或者，实现前述方法实施例的全部或部分步骤可以通过程序指令相关的硬件(诸如个人计算机，服务器，或者网络设备等的计算设备)来完成，所述程序指令可以存储于一计算机可读取存储介质中，当所述程序指令被计算设备的处理器执行时，所述计算设备执行本发明各实施例所述方法的全部或部分步骤。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：在本发明的精神和原则之内，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案脱离本发明的保护范围。

Claims (10)

1.一种移动端RN页面录屏回放的方法，其特征在于，所述方法包括：

获取移动端RN页面的页面基础信息，所述页面基础信息为移动端执行录屏操作时记录的RN页面数据结构关联的信息；

获取所述RN页面的页面变化信息，所述页面变化信息包括页面变化记录以及所述页面变化记录对应的时间戳；

依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录，以实现录屏回放。

2.根据权利要求1所述的方法，其特征在于，所述获取移动端RN页面的页面基础信息之前，所述方法还包括：

获取移动端上传至服务端的压缩文件，对所述压缩文件进行解析以得到RN页面的页面基础信息和页面变化信息；

所述压缩文件为所述移动端在设定条件下自动上传至所述服务端或响应于用户操作上传至所述服务端；所述设定条件包括网络环境条件和/或移动端运行环境条件。

3.根据权利要求2所述的方法，其特征在于，所述页面基础信息为所述移动端对RN页面进行以下处理得到：

获取RN页面的源代码元素结构信息，并将所述源代码元素结构信息转换为JSON数据结构；

提取所述RN页面中的可视元素；

基于所述可视元素和所述JSON数据结构得到移动端RN页面的页面基础信息。

4.根据权利要求2所述的方法，其特征在于，所述所述页面变化信息为所述移动端对RN页面进行监控操作得到：

所述移动端通过监测所述RN页面的元素结构变化数据生成的变更记录及对应的时间戳；和/或，

所述移动端通过监测用户操作所述RN页面时生成的操作记录及对应的时间戳。

5.根据权利要求4所述的方法，其特征在于，所述移动端通过以下至少一种方式监测用户操作所述RN页面时生成的操作记录：

通过RN页面提供的手势操作Gesture API拦截以监测用户的手势操作；

通过拦截scrollView的滚动事件获取页面滚动记录；

通过底层Touchable组件可以拦截所有的点击事件。

6.根据权利要求1所述的方法，其特征在于，所述依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录包括：

采用react-native-web技术将所述页面基础信息还原在web页面上作为基础视图；

将所述页面变化记录按照记录的时间戳进行逐一还原，基于所述基础视图进行页面调整。

7.根据权利要求2-6中任一项所述的方法，其特征在于，所述依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录之前，所述方法还包括：

获取所述压缩包中存储的媒体链接，依据所述媒体连接获取对应的媒体文件。

8.一种移动端RN页面录屏回放的装置，其特征在于，所述装置包括：

第一信息获取模块，用于获取移动端RN页面的页面基础信息，所述页面基础信息为移动端执行录屏操作时记录的RN页面数据结构关联的信息；

第二信息获取模块，用于获取所述RN页面的页面变化信息，所述页面变化信息包括页面变化记录以及所述页面变化记录对应的时间戳；

回放模块，用于依据所述页面变化记录对应的时间戳在所述页面基础信息还原所述页面变化记录，以实现录屏回放。

9.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质用于存储程序代码，所述程序代码用于执行权利要求1-7任一项所述的方法。

10.一种计算设备，其特征在于，所述计算设备包括处理器以及存储器：

所述存储器用于存储程序代码，并将所述程序代码传输给所述处理器；

所述处理器用于根据所述程序代码中的指令执行权利要求1-7任一项所述的方法。

Images