[發明專利]一種瀏覽器網頁的錄屏與回放方法

在審

• 申請號: 202010794679.1
• 申請日: 2020-08-10
• 公開（公告）號: CN111898055A
• 公開（公告）日: 2020-11-06
• 發明（設計）人: 馮帆
• 申請（專利權）人: 馮帆
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958
• 代理公司: 濟南佰智蔚然知識產權代理事務所(普通合伙) 37285
• 代理人: 劉靜

本發明提供一種瀏覽器網頁的錄屏與回放方法，所述方法包括：全量記錄HTML網頁快照，并轉換成VNode節點數據，增量記錄影響頁面元素變化的動作數據；把數據序列化，并保存在瀏覽器數據庫中；將數據上傳到對象服務器中持久化存儲；通過播放管理系統獲取需要渲染的全量與增量數據，利用渲染器渲染還原成真實的HTML(超文本標記語言，下同)結構。本發明利用對瀏覽器的全量快照與增量動作的疊加算法渲染出動畫，可以讓網頁像傳統視頻一樣來進行播放，具有高性能、高壓縮比、無損的特點，錄制體積只有傳統視頻錄像的百分之一大小；可以廣泛運作于監控系統，行為分析，案例復盤，遠程教育，低流量視頻協同等場景。

技術領域

本發明主要涉及互聯網相關技術領域，具體是一種瀏覽器網頁的錄屏與回放方法。

背景技術

如果可以將用戶在網頁中的交互行為像傳統視頻一樣來進行播放，其將會在監控系統，行為分析，案例復盤，遠程教育，低流量視頻協同等場景中具有重要的應用。因此，提供相應的瀏覽器網頁錄屏與回放技術，同時解決計算與存儲效率、數據完整性等問題，一直以來是本領域技術人員亟需解決的一項技術問題。

發明內容

為解決目前技術的不足，本發明結合現有技術，從實際應用出發，提供一種瀏覽器網頁的錄屏與回放方法，利用對瀏覽器的全量快照與增量動作的疊加算法渲染出動畫，可以讓網頁像傳統視頻一樣來進行播放，具有高性能、高壓縮比、無損的特點，錄制體積只有傳統視頻錄像的百分之一大小；可以廣泛運作于監控系統，行為分析，案例復盤，遠程教育，低流量視頻協同等場景。

本發明的技術方案如下：

一種瀏覽器網頁的錄屏與回放方法，所述方法包括：

全量記錄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上，統一處理狀態變化。

進一步，所述增量記錄影響頁面元素變化的動作數據包括：