CN111898055A - 一种浏览器网页的录屏与回放方法 - Google Patents

Abstract

本发明提供一种浏览器网页的录屏与回放方法，所述方法包括：全量记录HTML网页快照，并转换成VNode节点数据，增量记录影响页面元素变化的动作数据；把数据序列化，并保存在浏览器数据库中；将数据上传到对象服务器中持久化存储；通过播放管理系统获取需要渲染的全量与增量数据，利用渲染器渲染还原成真实的HTML(超文本标记语言，下同)结构。本发明利用对浏览器的全量快照与增量动作的叠加算法渲染出动画，可以让网页像传统视频一样来进行播放，具有高性能、高压缩比、无损的特点，录制体积只有传统视频录像的百分之一大小；可以广泛运作于监控系统，行为分析，案例复盘，远程教育，低流量视频协同等场景。

Description

一种浏览器网页的录屏与回放方法

技术领域

本发明主要涉及互联网相关技术领域，具体是一种浏览器网页的录屏与回放方法。

背景技术

如果可以将用户在网页中的交互行为像传统视频一样来进行播放，其将会在监控系统，行为分析，案例复盘，远程教育，低流量视频协同等场景中具有重要的应用。因此，提供相应的浏览器网页录屏与回放技术，同时解决计算与存储效率、数据完整性等问题，一直以来是本领域技术人员亟需解决的一项技术问题。

发明内容

为解决目前技术的不足，本发明结合现有技术，从实际应用出发，提供一种浏览器网页的录屏与回放方法，利用对浏览器的全量快照与增量动作的叠加算法渲染出动画，可以让网页像传统视频一样来进行播放，具有高性能、高压缩比、无损的特点，录制体积只有传统视频录像的百分之一大小；可以广泛运作于监控系统，行为分析，案例复盘，远程教育，低流量视频协同等场景。

本发明的技术方案如下：

一种浏览器网页的录屏与回放方法，所述方法包括：

全量记录HTML网页快照，并转换成VNode节点数据，增量记录影响页面元素变化的动作数据；

把数据序列化，并保存在浏览器数据库中；

将数据上传到对象服务器中持久化存储；

通过播放管理系统获取需要渲染的全量与增量数据，利用渲染器渲染还原成真实的HTML结构。

进一步，所述全量记录网页的HTML文档，并转换成VNode节点数据包括：

基于DOM的API获取页面的节点数据对DOM进行深度遍历后将DOM映射成VNode类型节点数据。

进一步，需要记录的DOM节点数据，主要包括ELEMENT节点，COMMENT节点和TEXT节点三种类型。

进一步，所述增量记录影响页面元素变化的动作数据包括：

对DOM的变化使用MutationObserver记录到attributes，characterData，childList三种类型的变化，配合addEventListener的能力组合记录页面一系列的操作事件。

进一步，所述增量记录影响页面元素变化的动作数据包括：

基于mouseMove和click事件记录鼠标动作，对于mouseMove事件，通过样条曲线函数计算出移动轨迹、抖动、加速度数据生成一条路径曲线用来记录鼠标的移动。

进一步，所述增量记录影响页面元素变化的动作数据包括：

基于Node.addEventListener的input blur focus事件记录Input的变化，若是通过JavaScript对标签进行赋值，通过Object.defineProperty来对一些表单对象的特殊属性进行劫持，在不影响目标赋值的情况下，把value新值转发到自定的handle上，统一处理状态变化。

进一步，所述增量记录影响页面元素变化的动作数据包括：

对Canvas元素，通过猴子补丁的方式去扩展或修改相应的API，从而获取到对应的动作；对Iframe元素，在非跨域的状态下，直接访问内部的节点进行录制；对Video元素，利用HTMLVideoElement获取并且记录视频的状态信息；对Flash元素，通过截屏的方式进行录制。

进一步，通过播放管理系统获取需要渲染的全量与增量数据，利用渲染器渲染还原成真实的HTML结构包括：

通过样条曲线模拟鼠标轨迹，通过规则筛选出鼠标轨迹关键点后，利用样条曲线计算函数，按照最小间隔进行取样并插入至鼠标路径队执行列里，当渲染重绘鼠标位置时，得到一个近似曲线的鼠标轨迹。

进一步，通过播放管理系统获取需要渲染的全量与增量数据，利用渲染器渲染还原成真实的HTML结构包括：

播放管理系统的播放器内置有计时器，栈中的每一个对象就是一帧，通过RAF对数据帧的时间戳进行扫描从而得知下一帧在什么时间发生；通过CancelAnimationFrame暂停计时器；通过加速渲染帧的速率进行快进；在内存中按照一定的距离计算出相应的快照与动作，使其形成一个区块，通过定位到相应的区块中进行计算并渲染实现双向跳转行为。

本发明的有益效果：

本发明所提供的浏览器网页的录屏与回放方法，利用对浏览器的全量快照与增量动作的叠加算法渲染出动画，可以让网页像传统视频一样来进行播放，同时该技术加大程度减小录像文件体积、具有极低的CPU与内存占用比率，能够无损显示、可以进行无极缩放，窗口自适应等，记录的全序列化数据，十分利于数据分析，录制简易，播放方便，直接导出html文件，可以在任何平台的任何浏览器播，可以广泛运作于监控系统，行为分析，案例复盘，远程教育，低流量视频协同等场景。

附图说明

图1是本发明的实现步骤流程图；

图2是本发明的核心架构图；

图3是本发明的鼠标轨迹示意图；

图4是本发明的通过样条曲线模拟鼠标虚拟轨迹示意图。

具体实施方式

结合附图和具体实施例，对本发明作进一步说明。应理解，这些实施例仅用于说明本发明而不用于限制本发明的范围。此外应理解，在阅读了本发明讲授的内容之后，本领域技术人员可以对本发明作各种改动或修改，这些等价形式同样落于本申请所限定的范围。

本发明是一种浏览器网页的录屏与回放技术，利用对浏览器的全量快照与增量动作的叠加算法渲染出动画，可以让网页像传统视频一样来进行播放，具有高性能、高压缩比、无损的特点，录制体积只有传统视频录像的百分之一大小，可以广泛运作于监控系统，行为分析，案例复盘，远程教育，低流量视频协同等场景。

如图1所示为本发明的实现步骤流程图。

其主要步骤如下：

全量记录HTML网页快照，并转换成VNode节点数据(即虚拟节点数据)，增量记录影响页面元素变化的动作数据；

把数据序列化，并保存在浏览器数据库中；

将数据上传到对象服务器中持久化存储；

通过播放管理系统获取需要渲染的全量与增量数据，利用渲染器渲染还原成真实的HTML结构。

如图2所示，为本发明的结构框架图。

核心模块主要分为以下四个模块：

1.Record：负责网页的快照以及各种行为数据进行分类采集

2.Virtual Dom：负责将采集数据转换为一种可序列化的结构，同时支持还原

3.Player：负责将数据渲染成视频，并控制视频的播放

4.Cloud Service：负责数据的网络存储以及实时计算。

本发明的具体实现技术如下：

对DOM进行快照：

通过DOM的API可以很轻易的拿到页面的节点数据，但是对于本技术的需求而言，显而DOM Node提供的数据太冗余了，这一步通过参考VirtualDom的设计，可以把信息类型进行精简，参考实现过程如下：

(VNode结构代码示意)interface VNode{

type：number

id：number

tag：string

attrs：Attrs

children：VNode[]

extra：Extra

}

对DOM进行深度遍历后，DOM被映射成了VNode类型节点，需要记录的Node主要是三种类型，三种浏览器节点类型分别是ELEMENT_NODE，COMMENT_NODE和TEXT_NODE，之后在播放时，只需要对VNode进行解析，就可以还原成记录时的状态。在这过程中，有一些节点和属性可以进行特殊处理，例如：

.InputElement(浏览器内置对象)等类型的value checked是无法从DOM获取的，需要从节点中对象中获取

·script标签的内容由于之后不会去执行，所以可以直接skip或者标记为noscript

.SVG可以直接获取，但是它本身以及它的子元素重新转换为DOM的时候需要使用createElementNS(浏览器内置对象)的方法创建元素

·src或href属性如果是相对路径，需要把他们转换为绝对路径。

记录影响页面元素变化的Action：

DOM的变化可以使用MutationObserver(浏览器内置对象)，监听到attributes，characterData，childList三种类型的变化，参考实现过程如下：

再借助WindowEventHandlers addEventListener等的能力组合，就可以监听到页面一系列的操作事件了。

通过mouseMove(浏览器事件)和click事件(浏览器事件)记录鼠标动作。

对于mouseMove事件，在移动的过程中会频繁的触发，产生很容冗余的数据，这样的数据会浪费很多的空间，因此对于鼠标的轨迹，可以只采集少量的关键点，最简单的办法是使用节流来减小事件产生的数据量。但是这种方法截流的间隔中可能会丢失关键的鼠标坐标数据，只采即时通过截流在移动距离足够长的时候任然会产生巨大的数据量，因此可以通过Spline Curves(样条曲线)函数来计算得出移动轨迹、抖动、加速度等生成一条路径曲线用来控制鼠标的移动。

Input的变换可以通过Node.addEventListener(浏览器内置对象)的input blurfocus事件监听，不过这只能监听到用户的行为，如果是通过JavaScript对标签进行赋值，是监听不到数据的变化的，这时可以通过Object.defineProperty((JavaScript方法))来对一些表单对象的特殊属性进行劫持，在不影响目标赋值的情况下，把value新值转发到自定的handle上，统一处理状态变化。参考实现过程如下：

由于DOM的Diff Patch是借助MutationObserver来实现的，需要对发生更变的记录进行收集处理，这涉及到一些关键问题：例如DOM更变的时序是有先后的，Mutation(MutationObserver回

调的数据对象)只归纳为新增和删除，但是在调用insertBefore(浏览器内置对象)或者appendChild(浏览器内置对象)，的时候，会造成移动，要对这些节点进行处理，标记为移动，否则节点的引用丢失就可能会导致渲染错误。

MutationObserver IE11及以上，安卓4.4及以上可以使用，对于老浏览器的兼容可以通过mutationobserver-shim(第三方插件)的方式来支持，但是使用shim可能会因为收集的数据致精度不足从而产生一些致命Bug，另外还有一种情况是某些网站可能会屏蔽的掉MutationObserver这个API，遇到这种清空可以通过创建Iframe的方式来还原NativeCode。

Canvas、Iframe、Video等元素的处理

Canvas：通过数据劫持的方式(Object.defineProperty或ES6 Proxy)去扩展或修改相应的API，从而获取到对应的动作；

Iframe：在非跨域的状态下，也可以直接访问内部的节点进行录制，类似的还有Shadow Dom；

Video：利用HTMLVideoElement(浏览器内置对象)获取并且记录视频的状态信息；

Flash：通过截屏的方式进行录制。

加载HTML以后会引用很多外界的资源，通常会有多种形式

例如：

1.绝对路径<img src＝″/xx.png″/>

2.相对路径<img src＝″./xx.png″/>

3.相对当前path的路径<img src＝″xx.png″/>

4.协议相对URL(The Protocol-relative URL)<img src＝″//cnd.xx.png″/>

5.srcset响应式图片Responsive images srcset＝″www.xxx.png 1x，www.xxx.png 2x″

…

对于以上需要，可以使用一个转换器来处理路径问题，在Deserialize阶段，把他们转成原域名下的绝对路径才能在跨域下正常加载还有一种情况是对于第三方资源加载第三方资源的问题，这就需要借助服务器来解决了。

对于CORS Error问题，通常是由于被录制的网站对资源进行了限制，开启了CORSPolicy，解决方案是，如果资源可控，可以添加白名单或者忽略，或者使用代理服务器实现。

在客户端进行的Gzip压缩：

Gzip一般是在网络应用层里对传输数据进行压缩，但是我们的数据不一定只存在数据库里，可能会有三种储存方式

·服务器存储TCP＝＞DB

·本地储存LocalStorage(浏览器内置存储器)、IndexedDB(浏览器内置数据库)、Web SQL(浏览器内置数据库)

·数据持久化于script中，保存为本地文件，例如直接导出可运行的HTML文件

利用客户端的运算能力，在进行导出或者传输之前，可以对数据进行压缩，极大程度的减小体积，利用Pako.js(第三方工具)，的Gzip方法来对数据进行压缩

GZip的核心是Deflate，而Deflate又是基于LZ77和哈夫曼树的，通过GZip把文本数据转换成Uint8Array，再把Uint8转成对应的ASCII，这样的好处是每一个编码只会占用1byte的空间，通过压缩减少约5倍左右的体积。

数据上传：

对于客户端的数据，可以利用浏览器提供的indexedDB进行存储，毕竟indexedDB会比LocalStorage容量大得多，一般来说不少于250MB，甚至没有上限，此外它使用objectstore存储，而且支持transaction，另外很重要的一点它是异步的，意味着不会阻塞录屏器的运行，之后数据可以通过WebSocket或http方式持续上传到服务器中，由于数据是分块进行传输的，在同步之后还可以增加数据校验码来保证一致性避免错误。

加载SDK：

通过Ro|IUp(第三方工具)打包器可以生成多种格式版本，例如UMD(模块类型)与ESM(模块类型)等在项目中加载SDK或者利用Chrome Extension(Chrome浏览器插件)的插件机制注入UMD模块，可以很方便的加载代码，控制数据录制写入的过程。

云存储服务：

数据可以上传的到云服务器，选用OBS对象存储数据进行存储，在传输器的设计中，需要考虑对数据块进行加密，以及可靠传输的校验重传机制可以选择性的集成：多租户管理系统，数据分析系统，Stream处理系统，分布式计算系统等。

在开始播放前，需要把之前的存储的数据还原成真实的DOM，这个过程中会占用一定的加载时间产生白屏，这取决于用户的浏览器性能以及录制网页资源情况，参考FMP(First Meaningful Paint)(首页有效绘制)的实现，加载过程中可以通过之前映射的数据动态生成骨架图，等待FMP发出Ready信号之后再播放。

用户在网页中移动鼠标会产生很多mouseMove事件，通过const{x，y}＝event.target获取到了轨迹的坐标与时间戳，假如我在页面上用鼠标划过一个″爱心″的轨迹，可能会得到如图3所示这样的坐标点，但是对于录屏这个业务场景来说，大部分场合并不要求100％还原精确的鼠标轨迹，而是只会关心两种情况：鼠标在哪里点击以及鼠标在哪里停留，那么通过这个两个策略对鼠标轨迹进行精简后，画一个″爱心″大约只需要6个点，通过样条曲线来模拟鼠标的虚拟轨迹，当t＝0.2的时候，就可以得到一个如图4所示的带着弧度的轨迹了。通过规则筛选出关键点后，利用B样条曲线计算函数，按照最小间隔进行取样并插入我们的鼠标路径队执行列里，当渲染时重绘鼠标位置的时候，就可以得到一个近似曲线的鼠标轨迹了。

当在一个输入框中不断的敲击内容时，Watcher函数会源源不断的事件响应，通过Event.target.value(浏览器事件对象)可以拿到当前HTMLInputElement(浏览器内置对象)最新的值，利用节流函数可以过滤掉一些冗余的响应，但是还不够，例如在一个TextArea中的文本会非常的长，假设文本的长度是n，我们在文本后面添加了10个字符，每次输入响应1次，那么响应的长度是：

10n+∑(k＝1，n＝10)

可见会产生大量的数据

通过Diff Patch(一种字符串差异算法)之后，把字符串abcd修改bcde可以表达为：

[-a]bcd[+e]

删除第0位1个，从第3位插入一个e，参考过程如下：

在之前已经通过鼠标事件记录了完整的坐标信息，通过heatmap.js可以很方便的生成热力图，用于对用户的行为数据进行分析。

对于一些客户个人隐私数据，通过在开发时对DOM进行标注的Node.COMMENT_NODE(例如：＜！--…--＞)信息申明，是可以获取并加工的。通过约定好的声明对需要脱敏的DOM块按业务的需求进行处理即可，例如在项目的DEMO中，需要在回放的时候把＜button＞标签隐藏掉，只需改写成＜！--hidden--＞＜button＞。

录制的内容有可能属于第三方提供，这意味着可能存在一定的风险，网站中可能有一些恶意的脚本并没有被完全过滤掉，例如：＜div onload＝″alert(′something′)；script…″＞＜/div＞，或者播放器中的一些事件也可能对播放内容产生影响，这时候需要一个沙盒来隔离播放内容的环境，HTML5提供的Sandbox可以轻易的隔离环境。

播放、跳转与快进：

播放

播放器会内置一个精确的计时器，动作的数据存储在一个栈中，栈中的每一个对象就是一帧，通过RAF(RequestAnimationFrame)(浏览器内置对象)对数据帧的时间戳进行扫描从而得知下一帧在什么时间发生

暂停

通过CancelAnimationFrame(浏览器内置对象)暂停计时器

快进

加速渲染帧的速率

双向跳转

跳转是个复杂的问题，如果要实现像视频那样可以向前与向后的双向跳转，由于受到渲染引擎的约束，本技术没有实现出一个反向渲染的方法，而是通过特殊的办法来解决。

要实现双向跳转，这里的思路是在内存中按照一定的距离计算出相应的S(Snapshot)与A(Action)

例如：[SAAASAASAAA...]

于是[SAAA]形成了一个区块，发生跳转行为时，会定位到相应的区块中进行计算后并渲染。

通过HTML5提供的WebRTC(网页即时通信)接口可以进行音频录制，由于主要是录制人声语音，所以对于录制品质要求并不高，因此可以选用了8000的采样率和8比特率单声道的PCM录制格式，后期可以转化为有损压缩的mp3格式以节省空间，字幕会通过一些第三方服务分析录制文件后自动生成。

本发明的上述技术如下如下的优点：

1.极大程度减小录像文件体积

2.极低的CPU与内存占用比率

3.无损显示，可以进行无极缩放，窗口自适应等

4.非常灵活的时间跳转，几乎无法感知的缓冲时间

5.所有信息都是活的，文本图片可以复制，链接可以点击，鼠标可以滚动

6.可以方便的录制声音，并让声音和画面同步，还以类似YouTube(一个视频网站)那样把声音翻译成字幕

7.方便进行视频细节的修改，例如显示的内容进行脱敏，生成热力图等

8.记录的全序列化数据，十分利于数据分析

9.录制简易，播放方便，直接导出html文件，可以在任何平台的任何浏览器播放。

本发明的技术可以广泛运作于监控系统，行为分析，案例复盘，远程教育，低流量视频协同等场景。

Claims (9)

1.一种浏览器网页的录屏与回放方法，其特征在于，所述方法包括：

全量记录HTML网页快照，并转换成VNode节点数据，增量记录影响页面元素变化的动作数据；

把数据序列化，并保存在浏览器数据库中；

将数据上传到对象服务器中持久化存储；

通过播放管理系统获取需要渲染的全量与增量数据，利用渲染器渲染还原成真实的HTML结构。

2.根据权利要求1所述的浏览器网页的录屏与回放方法，其特征在于，所述全量记录网页的HTML文档，并转换成VNode节点数据包括：

基于DOM的API获取页面的节点数据对DOM进行深度遍历后将DOM映射成VNode类型节点数据。

3.根据权利要求2所述的浏览器网页的录屏与回放方法，其特征在于，需要记录的DOM节点数据包括ELEMENT节点，COMMENT节点和TEXT节点三种类型。

4.根据权利要求1所述的浏览器网页的录屏与回放方法，其特征在于，所述增量记录影响页面元素变化的动作数据包括：

对DOM的变化使用MutationObserver记录到attributes，characterData，childList三种类型的变化，配合addEventListener的能力组合记录页面一系列的操作事件。

5.根据权利要求1所述的浏览器网页的录屏与回放方法，其特征在于，所述增量记录影响页面元素变化的动作数据包括；

基于mouseMove和click事件记录鼠标动作，对于mouseMove事件，通过样条曲线函数计算出移动轨迹、抖动、加速度数据生成一条路径曲线用来记录鼠标的移动。

6.根据权利要求1所述的浏览器网页的录屏与回放方法，其特征在于，所述增量记录影响页面元素变化的动作数据包括：

基于Node.addEventListene r的input blur focus事件记录Input的变化，若是通过JavaScript对标签进行赋值，通过Object.defineProperty来对一些表单对象的特殊属性进行劫持，在不影响目标赋值的情况下，把value新值转发到自定的handle上，统一处理状态变化。

7.根据权利要求1所述的浏览器网页的录屏与回放方法，其特征在于，所述增量记录影响页面元素变化的动作数据包括；

对Canvas元素，通过猴子补丁的方式去扩展或修改相应的APT，从而获取到对应的动作；对Iframe元素，在非跨域的状态下，直接访问内部的节点进行录制；对Video元素，利用HTMLVideoElement获取并且记录视频的状态信息；对Flash元素，通过截屏的方式进行录制。

8.根据权利要求1所述的浏览器网页的录屏与回放方法，其特征在于，通过播放管理系统获取需要渲染的全量与增量数据，利用渲染器渲染还原成真实的HTML结构包括：

通过样条曲线模拟鼠标轨迹，通过规则筛选出鼠标轨迹关键点后，利用样条曲线计算函数，按照最小间隔进行取样并插入至鼠标路径队执行列里，当渲染重绘鼠标位置时，得到一个近似曲线的鼠标轨迹。

9.根据权利要求1所述的浏览器网页的录屏与回放方法，其特征在于，通过播放管理系统获取需要渲染的全量与增量数据，利用渲染器渲染还原成真实的HTML结构包括：

播放管理系统的播放器内置有计时器，栈中的每一个对象就是一帧，通过RAF(RequestAnimationFrame)对数据帧的时间戳进行扫描从而得知下一帧在什么时间发生；通过CancelAnimationFrame暂停计时器；通过加速渲染帧的速率进行快进；在内存中按照一定的距离计算出相应的快照与动作，使其形成一个区块，通过定位到相应的区块中进行计算并渲染，从而实现双向跳转行为。

Images