1. "視頻"並非真的視頻、也不是通過連續播放大量截圖來實現
首先請大家觀看這個視頻：
視頻中，當鼠標點擊“場景重現”，會立即播放一段“視頻”。它完整的記錄了用戶點餐時候遇到障礙之前的一段操作。這段“視頻”看起來和真的視頻幾乎一樣，所以會被誤以為是通過錄制視頻來記錄的。實際上，它並非視頻。我們在客戶端通過記錄操作序列(用戶行為、DOM變化)，在重放的時候將操作序列再執行一遍，看起來就像視頻一樣了。當然，涉及到很多復雜的細節，在這里不便贅述。近期，SMARTX公司開源的rrweb也使用了類似的技術。如果感興趣，可以去了解詳細內容。
這樣做有幾大優點：
-
可自定義的隱私保護：通過配置
_fun-hide標簽，插件會自動將隱私數據抹去。如果是視頻，很難做到。 -
"視頻”的體積很小：如果是錄制視頻，使用iPhone X錄制一個20s的視頻大概是6MB，假設壓縮比例為10%，那么依然有620KB。針對大多數的網頁，20s的錄屏數據可以小至幾十KB。當然不排除極個別的情況數據量過大，我們會主動放棄錄制。
2. 不僅只支持Chrome
幾乎所有高版本的瀏覽器(IE(>=11)，Chrome(>=26)，Safari(>=7), Firefox(>=14))都是支持的，包括微信內置瀏覽器(Webview)。比如下面這一條記錄，設備信息顯示為Safari。“場景重現”的標簽是可點擊的，證明錄屏有數據，可以播放。
另外，微信/釘釘等應用內打開的網頁也是可以錄制的:
3. 性能充分優化，不會影響用戶使用
因為不是真的錄制視頻，所以並不會占用太多資源。另外，錄屏插件的核心算法經過充分的優化，將CPU和內存使用率降到最低。錄屏算法的性能本質上和頁面發生變化的節點數有關，我們做過這樣一個測試：在網頁中插入一定數量的DOM節點，並統計接入和不接入錄屏插件耗時情況。
| 插入的節點數量 | 不接入錄屏(ms) | 平均時間(ms) | 接入錄屏(ms) | 平均時間(ms) |
|---|---|---|---|---|
| 10 | 110.0, 152.4, 121.9, 147.4, 133.5, 105.8, 153.3 | 132.04 | 187.1, 131.4, 121.4, 160.3, 139.9, 123.2, 143.3 | 143.8 |
| 50 | 114.7, 92.7,107.2, 114.3, 112.1, 124.5, 119.3 | 112.11 | 126.4, 128.8, 137.5, 143.5, 133.6, 135.1, 133.3 | 134.02 |
| 100 | 125.5, 118.9, 112.5, 115.4, 129.5, 107.9, 113.8 | 117.64 | 152.8, 136.0, 144.4, 146.9, 131.0, 146.0, 148.6 | 143.67 |
| 200 | 164.0, 121.6, 167.7, 122.1, 119.7, 139.4,129.6 | 137.72 | 196.0, 190.7, 201.8, 177.5, 194.9,175.5, 201.0 | 191.06 |
| 500 | 141.5, 197.5, 173.9, 193.7, 193.1, 170.6, 192.3 | 180.37 | 229.2, 274.8, 324.8, 348.0, 368.6, 324.3, 324.1 | 313.4 |
| 1000 | 345.7, 278.0,316.1, 258.1, 285.7, 284.0,331,2 | 299.83 | 468.9, 486.9, 453.0,376.4, 361.8, 462.7, 462.3 | 438.86 |
一般情況下，網頁的變動導致DOM的變化節點不會超過100個。在小於100個節點的情況下，接入錄屏插件額外增加的時間小於30毫秒。因此，在大多數情況下，錄屏插件對性能的影響是可以忽略不計的。
錄屏功能介紹
Fundebug提供專業的異常監控服務，當線上應用出現 BUG 的時候，我們可以第一時間報警，幫助開發者及時發現 BUG，提高 Debug 效率。在網頁端，我們通過原創的錄屏技術，可以 100%還原 BUG 出現之前用戶的操作流程，幫助開發者快速復現出錯場景。完整演示視頻如下：
關於Fundebug
Fundebug專注於JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java線上應用實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了10億+錯誤事件，付費客戶有陽光保險、核桃編程、荔枝FM、掌門1對1、微脈、青團社等眾多品牌企業。歡迎大家免費試用！
版權聲明
轉載時請注明作者 Fundebug以及本文地址：
https://blog.fundebug.com/2019/08/02/a-few-tips-about-revideo/