如何實現Web頁面錄屏？

来源:https://www.cnblogs.com/fundebug/archive/2019/09/09/how-to-implement-web-video-record.html
-Advertisement-
Play Games

摘要： 很有意思的操作... 原文： "web頁面錄屏實現" 譯者：frontdog "Fundebug" 經授權轉載，版權歸原作者所有。 寫在前面的話 在看到評論後，突然意識到自己沒有提前說明，本文可以說是一篇調研學習文，是我自己感覺可行的一套方案，後續會去讀讀已經開源的一些類似的代碼庫，補足自己 ...


摘要： 很有意思的操作...

Fundebug經授權轉載，版權歸原作者所有。

寫在前面的話

在看到評論後，突然意識到自己沒有提前說明，本文可以說是一篇調研學習文，是我自己感覺可行的一套方案，後續會去讀讀已經開源的一些類似的代碼庫，補足自己遺漏的一些細節，所以大家可以當作學習文，生產環境慎用。

錄屏重現錯誤場景

如果你的應用有接入到web apm系統中，那麼你可能就知道apm系統能幫你捕獲到頁面發生的未捕獲錯誤，給出錯誤棧，幫助你定位到BUG。但是，有些時候，當你不知道用戶的具體操作時，是沒有辦法重現這個錯誤的，這時候，如果有操作錄屏，你就可以清楚地瞭解到用戶的操作路徑，從而復現這個BUG並且修複。

實現思路

思路一：利用Canvas截圖

這個思路比較簡單，就是利用canvas去畫網頁內容，比較有名的庫有：html2canvas，這個庫的簡單原理是：

  1. 收集所有的DOM，存入一個queue中；
  2. 根據zIndex按照順序將DOM一個個通過一定規則，把DOM和其CSS樣式一起畫到Canvas上。

這個實現是比較複雜的，但是我們可以直接使用，所以我們可以獲取到我們想要的網頁截圖。

為了使得生成的視頻較為流暢，我們一秒中需要生成大約25幀，也就是需要25張截圖，思路流程圖如下：

但是，這個思路有個最致命的不足：為了視頻流暢，一秒中我們需要25張圖，一張圖300KB，當我們需要30秒的視頻時，圖的大小總共為220M，這麼大的網路開銷明顯不行。

思路二：記錄所有操作重現

為了降低網路開銷，我們換個思路，我們在最開始的頁面基礎上，記錄下一步步操作，在我們需要"播放"的時候，按照順序應用這些操作，這樣我們就能看到頁面的變化了。這個思路把滑鼠操作和DOM變化分開：

滑鼠變化：

  1. 監聽mouseover事件，記錄滑鼠的clientX和clientY。
  2. 重放的時候使用js畫出一個假的滑鼠，根據坐標記錄來更改"滑鼠"的位置。

DOM變化：

  1. 對頁面DOM進行一次全量快照。包括樣式的收集、JS腳本去除，並通過一定的規則給當前的每個DOM元素標記一個id。
  2. 監聽所有可能對界面產生影響的事件，例如各類滑鼠事件、輸入事件、滾動事件、縮放事件等等，每個事件都記錄參數和目標元素，目標元素可以是剛纔記錄的id，這樣的每一次變化事件可以記錄為一次增量的快照。
  3. 將一定量的快照發送給後端。
  4. 在後臺根據快照和操作鏈進行播放。

當然這個說明是比較簡略的，滑鼠的記錄比較簡單，我們不展開講，主要說明一下DOM監控的實現思路。

頁面首次全量快照

首先你可能會想到，要實現頁面全量快照，可以直接使用outerHTML

const content = document.documentElement.outerHTML;

這樣就簡單記錄了頁面的所有DOM，你只需要首先給DOM增加標記id，然後得到outerHTML，然後去除JS腳本。

但是，這裡有個問題，使用outerHTML記錄的DOM會將把臨近的兩個TextNode合併為一個節點，而我們後續監控DOM變化時會使用MutationObserver，此時你需要大量的處理來相容這種TextNode的合併，不然你在還原操作的時候無法定位到操作的目標節點。

那麼，我們有辦法保持頁面DOM的原有結構嗎？

答案是肯定的，在這裡我們使用Virtual DOM來記錄DOM結構，把documentElement變成Virtual DOM，記錄下來，後面還原的時候重新生成DOM即可。

DOM轉化為Virtual DOM

我們在這裡只需要關心兩種Node類型：Node.TEXT_NODE和Node.ELEMENT_NODE。同時，要註意，SVG和SVG子元素的創建需要使用API：createElementNS，所以，我們在記錄Virtual DOM的時候，需要註意namespace的記錄，上代碼：

const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
const XML_NAMESPACES = ['xmlns', 'xmlns:svg', 'xmlns:xlink'];

function createVirtualDom(element, isSVG = false)  {
  switch (element.nodeType) {
    case Node.TEXT_NODE:
      return createVirtualText(element);
    case Node.ELEMENT_NODE:
      return createVirtualElement(element, isSVG || element.tagName.toLowerCase() === 'svg');
    default:
      return null;
  }
}

function createVirtualText(element) {
  const vText = {
    text: element.nodeValue,
    type: 'VirtualText',
  };
  if (typeof element.__flow !== 'undefined') {
    vText.__flow = element.__flow;
  }
  return vText;
}

function createVirtualElement(element, isSVG = false) {
  const tagName = element.tagName.toLowerCase();
  const children = getNodeChildren(element, isSVG);
  const { attr, namespace } = getNodeAttributes(element, isSVG);
  const vElement = {
    tagName, type: 'VirtualElement', children, attributes: attr, namespace,
  };
  if (typeof element.__flow !== 'undefined') {
    vElement.__flow = element.__flow;
  }
  return vElement;
}

function getNodeChildren(element, isSVG = false) {
  const childNodes = element.childNodes ? [...element.childNodes] : [];
  const children = [];
  childNodes.forEach((cnode) => {
    children.push(createVirtualDom(cnode, isSVG));
  });
  return children.filter(c => !!c);
}

function getNodeAttributes(element, isSVG = false) {
  const attributes = element.attributes ? [...element.attributes] : [];
  const attr = {};
  let namespace;
  attributes.forEach(({ nodeName, nodeValue }) => {
    attr[nodeName] = nodeValue;
    if (XML_NAMESPACES.includes(nodeName)) {
      namespace = nodeValue;
    } else if (isSVG) {
      namespace = SVG_NAMESPACE;
    }
  });
  return { attr, namespace };
}

通過以上代碼，我們可以將整個documentElement轉化為Virtual DOM，其中__flow用來記錄一些參數，包括標記ID等，Virtual Node記錄了：type、attributes、children、namespace。

Virtual DOM還原為DOM

將Virtual DOM還原為DOM的時候就比較簡單了，只需要遞歸創建DOM即可，其中nodeFilter是為了過濾script元素，因為我們不需要JS腳本的執行。

function createElement(vdom, nodeFilter = () => true) {
  let node;
  if (vdom.type === 'VirtualText') {
    node = document.createTextNode(vdom.text);
  } else {
    node = typeof vdom.namespace === 'undefined'
      ? document.createElement(vdom.tagName)
      : document.createElementNS(vdom.namespace, vdom.tagName);
    for (let name in vdom.attributes) {
      node.setAttribute(name, vdom.attributes[name]);
    }
    vdom.children.forEach((cnode) => {
      const childNode = createElement(cnode, nodeFilter);
      if (childNode && nodeFilter(childNode)) {
        node.appendChild(childNode);
      }
    });
  }
  if (vdom.__flow) {
    node.__flow = vdom.__flow;
  }
  return node;
}

DOM結構變化監控

在這裡，我們使用了API：MutationObserver，更值得高興的是，這個API是所有瀏覽器都相容的，所以我們可以大膽使用。

使用MutationObserver：

const options = {
  childList: true, // 是否觀察子節點的變動
  subtree: true, // 是否觀察所有後代節點的變動
  attributes: true, // 是否觀察屬性的變動
  attributeOldValue: true, // 是否觀察屬性的變動的舊值
  characterData: true, // 是否節點內容或節點文本的變動
  characterDataOldValue: true, // 是否節點內容或節點文本的變動的舊值
  // attributeFilter: ['class', 'src'] 不在此數組中的屬性變化時將被忽略
};

const observer = new MutationObserver((mutationList) => {
    // mutationList: array of mutation
});
observer.observe(document.documentElement, options);

使用起來很簡單，你只需要指定一個根節點和需要監控的一些選項，那麼當DOM變化時，在callback函數中就會有一個mutationList，這是一個DOM的變化列表，其中mutation的結構大概為：

{
    type: 'childList', // or characterData、attributes
    target: <DOM>,
    // other params
}

我們使用一個數組來存放mutation，具體的callback為：

const onMutationChange = (mutationsList) => {
  const getFlowId = (node) => {
    if (node) {
      // 新插入的DOM沒有標記，所以這裡需要相容
      if (!node.__flow) node.__flow = { id: uuid() };
      return node.__flow.id;
    }
  };
  mutationsList.forEach((mutation) => {
    const { target, type, attributeName } = mutation;
    const record = { 
      type, 
      target: getFlowId(target), 
    };
    switch (type) {
      case 'characterData':
        record.value = target.nodeValue;
        break;
      case 'attributes':
        record.attributeName = attributeName;
        record.attributeValue = target.getAttribute(attributeName);
        break;
      case 'childList':
        record.removedNodes = [...mutation.removedNodes].map(n => getFlowId(n));
        record.addedNodes = [...mutation.addedNodes].map((n) => {
          const snapshot = this.takeSnapshot(n);
          return {
            ...snapshot,
            nextSibling: getFlowId(n.nextSibling),
            previousSibling: getFlowId(n.previousSibling)
          };
        });
        break;
    }
    this.records.push(record);
  });
}

function takeSnapshot(node, options = {}) {
  this.markNodes(node);
  const snapshot = {
    vdom: createVirtualDom(node),
  };
  if (options.doctype === true) {
    snapshot.doctype = document.doctype.name;
    snapshot.clientWidth = document.body.clientWidth;
    snapshot.clientHeight = document.body.clientHeight;
  }
  return snapshot;
}

這裡面只需要註意，當你處理新增DOM的時候，你需要一次增量的快照，這裡仍然使用Virtual DOM來記錄，在後面播放的時候，仍然生成DOM，插入到父元素即可，所以這裡需要參照DOM，也就是兄弟節點。

表單元素監控

上面的MutationObserver並不能監控到input等元素的值變化，所以我們需要對錶單元素的值進行特殊處理。

oninput事件監聽

MDN文檔：developer.mozilla.org/en-US/docs/…

事件對象：select、input，textarea

window.addEventListener('input', this.onFormInput, true);

onFormInput = (event) => {
  const target = event.target;
  if (
    target && 
    target.__flow &&
    ['select', 'textarea', 'input'].includes(target.tagName.toLowerCase())
   ) {
     this.records.push({
       type: 'input', 
       target: target.__flow.id, 
       value: target.value, 
     });
   }
}

在window上使用捕獲來捕獲事件，後面也是這樣處理的，這樣做的原因是我們是可能並經常在冒泡階段阻止冒泡來實現一些功能，所以使用捕獲可以減少事件丟失，另外，像scroll事件是不會冒泡的，必須使用捕獲。

onchange事件監聽

MDN文檔：developer.mozilla.org/en-US/docs/…

input事件沒法滿足type為checkbox和radio的監控，所以需要藉助onchange事件來監控

window.addEventListener('change', this.onFormChange, true);

onFormChange = (event) => {
  const target = event.target;
  if (target && target.__flow) {
    if (
      target.tagName.toLowerCase() === 'input' &&
      ['checkbox', 'radio'].includes(target.getAttribute('type'))
    ) {
      this.records.push({
        type: 'checked', 
        target: target.__flow.id, 
        checked: target.checked,
      });
    }
  }
}

onfocus事件監聽

MDN文檔：developer.mozilla.org/en-US/docs/…

window.addEventListener('focus', this.onFormFocus, true);

onFormFocus = (event) => {
  const target = event.target;
  if (target && target.__flow) {
    this.records.push({
      type: 'focus', 
      target: target.__flow.id,
    });
  }
}

onblur事件監聽

MDN文檔：developer.mozilla.org/en-US/docs/…

window.addEventListener('blur', this.onFormBlur, true);

onFormBlur = (event) => {
  const target = event.target;
  if (target && target.__flow) {
    this.records.push({
      type: 'blur', 
      target: target.__flow.id,
    });
  }
}

媒體元素變化監聽

這裡指audio和video，類似上面的表單元素，可以監聽onplay、onpause事件、timeupdate、volumechange等等事件，然後存入records

Canvas畫布變化監聽

canvas內容變化沒有拋出事件，所以我們可以：

  1. 收集canvas元素，定時去更新實時內容
  2. hack一些畫畫的API，來拋出事件

canvas監聽研究沒有很深入，需要進一步深入研究

播放

思路比較簡單，就是從後端拿到一些信息：

  • 全量快照Virtual DOM
  • 操作鏈records
  • 屏幕解析度
  • doctype

利用這些信息，你就可以首先生成頁面DOM，其中包括過濾script標簽，然後創建iframe，append到一個容器中，其中使用一個map來存儲DOM

function play(options = {}) {
  const { container, records = [], snapshot ={} } = options;
  const { vdom, doctype, clientHeight, clientWidth } = snapshot;
  this.nodeCache = {};
  this.records = records;
  this.container = container;
  this.snapshot = snapshot;
  this.iframe = document.createElement('iframe');
  const documentElement = createElement(vdom, (node) => {
    // 緩存DOM
    const flowId = node.__flow && node.__flow.id;
    if (flowId) {
      this.nodeCache[flowId] = node;
    }
    // 過濾script
    return !(node.nodeType === Node.ELEMENT_NODE && node.tagName.toLowerCase() === 'script'); 
  });
    
  this.iframe.style.width = `${clientWidth}px`;
  this.iframe.style.height = `${clientHeight}px`;
  container.appendChild(iframe);
  const doc = iframe.contentDocument;
  this.iframeDocument = doc;
  doc.open();
  doc.write(`<!doctype ${doctype}><html><head></head><body></body></html>`);
  doc.close();
  doc.replaceChild(documentElement, doc.documentElement);
  this.execRecords();
}

function execRecords(preDuration = 0) {
  const record = this.records.shift();
  let node;
  if (record) {
    setTimeout(() => {
      switch (record.type) {
        // 'childList'、'characterData'、
        // 'attributes'、'input'、'checked'、
        // 'focus'、'blur'、'play''pause'等事件的處理
      }
      this.execRecords(record.duration);
    }, record.duration - preDuration)
  }
}

上面的duration在上文中省略了，這個你可以根據自己的優化來做播放的流暢度，看是多個record作為一幀還是原本呈現。

關於Fundebug

Fundebug專註於JavaScript、微信小程式、微信小游戲、支付寶小程式、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了20億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業。歡迎大家免費試用！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • HTML5新標簽和CSS偽類
    HTML5提供了很多新的標簽，由於HTML5的相容性比較差，HTML5的標簽常用於手機端 CSS3結構偽類選擇器 :first-child 選中第一個元素 :last-child 選中最後一個元素 :nth-child(n) 選中第幾個元素 其中n除了填寫數字代表第幾個元素外，填寫n代表選擇所有元素 ...
  • Node基礎-CommonJS模塊化規範
    1.在本地項目中基於NPM/YARN安裝第三方模塊 package.json 2.安裝在本地和全局的區別 3.NODE入門 NODE本身是基於CommonJS模塊規範設計的，所以模塊是NODE的組成 內置模塊：NODE天生提供給JS調取使用的 第三方模塊：別人寫好的，我們可以基於NPM安裝使用 自定 ...
  • 瀏覽器HTML自帶懶載入技術
    對於目前的圖片懶載入，我們一般採用的是通過第三方庫或懶載入庫來實現，但是該方式的顯著問題就是，必須按順序執行： 1、載入初始的 HTML 響應內容 2、載入懶載入庫 3、載入圖片 假如瀏覽器能直接支持懶載入，那是最好的，這一想法也不是不可能哦！從Chrome 75開始，我們可以通過切換兩個開關來手動 ...
  • 工作開發隨筆
    日常後臺迭代開發，需要在瀏覽器刷新時記錄下當前tab和翻頁數，用的elementUI。 其實數據記錄倒是挺簡單的，localstorage或者sessionstorage都行，但在組件生命周期鉤子func：created中設置pagination的current-page時，不生效。 嘗試過vm.$ ...
  • jQuery（三）之 選擇器(基礎版)
    對於jQuery的調用，我們一般都會傳入參數 一、前置（DOM對象和jQuery對象） 1. DOM對象， 關於這個，應該是前端的基礎知識了，在文檔對象模型中，每個部分都是節點。 2. jQuery對象 這個是指通過jQuery構造函數創建出來的對象，可以通過jQuery選擇器獲取到，並以類數組的形 ...
  • 01.前端之HTML
    HTML介紹 Web服務本質 瀏覽器發請求 HTTP協議 服務端接收請求 服務端返迴響應 服務端把HTML文件內容發給瀏覽器 瀏覽器渲染頁面 HTML是什麼？ 超文本標記語言（Hypertext Markup Language, HTML）是一種用於創建網頁的標記語言。 本質上是瀏覽器可識別的規則， ...
  • 好用的前端開發小工具
    這是一款集截屏（支持自定義尺寸）、屏幕錄影機、屏幕拾色器、屏幕放大鏡、屏幕標尺、PDF圖片轉換、圖片編輯等等諸多實用功能於一身的小工具， 完全免費，極限輕量化，軟體總體積僅1.63 MB . 鏈接: https://pan.baidu.com/s/15Mii0BiLcD3Pr2_OXAkAWw 提取 ...
  • layui省市區三級聯動城市選擇
    基於layui框架製作精美的省市區下拉框三級聯動菜單選擇， 支持三級聯動城市選擇，點擊提交獲取選中值代碼。 示例圖如下： 資源鏈接: https://pan.baidu.com/s/1s6l8iDBEP1UOt28O-5jVLg 提取碼: y4d3 標簽：三級聯動 省市區 選擇 中值 城市 下拉框 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類