feat: Screencast is replaced by snapDOM from html2canvas

Author: Nice-PLQ

src/client/cdp/common/constant.js

@@ -2,6 +2,4 @@ export const DEVTOOL_OVERLAY = '__devtools-overlay__';
 
 export const DEVTOOL_STYLESHEET = '__devtools-stylesheet__';
 
-export const HTML_TO_CANVAS = 'html2canvas-container';
-
-export const IGNORE_NODE = [DEVTOOL_OVERLAY, DEVTOOL_STYLESHEET, HTML_TO_CANVAS];
+export const IGNORE_NODE = [DEVTOOL_OVERLAY, DEVTOOL_STYLESHEET];

src/client/cdp/domain/overlay.js

@@ -193,6 +193,7 @@ export default class Overlay extends BaseDomain {
 
     containerBox.className = DEVTOOL_OVERLAY;
     containerBox.id = DEVTOOL_OVERLAY;
+    containerBox.setAttribute('data-capture', 'exclude');
     document.body.appendChild(containerBox);
 
     this.highlightBox = { containerBox, contentBox, marginBox, tooltipsBox };

src/client/cdp/domain/page.js

@@ -80,7 +80,7 @@ export default class Page extends BaseDomain {
 
     captureScreen();
 
-    this.intervalTimer = setInterval(captureScreen, 2000);
+    this.intervalTimer = setInterval(captureScreen, 1000);
   }
 
   stopScreencast() {

src/client/cdp/domain/screen-preview.js

@@ -1,35 +1,20 @@
 import throttle from 'lodash.throttle';
-import { isMatches, isMobile, loadScript } from '../common/utils';
-import { DEVTOOL_OVERLAY } from '../common/constant';
+import { isMobile, loadScript } from '../common/utils';
 import BaseDomain from './domain';
 import { Event } from './protocol';
 
 export default class ScreenPreview extends BaseDomain {
   namespace = 'ScreenPreview';
 
   static captureScreen() {
-    const renderScreen = () => window.html2canvas(document.body, {
-      allowTaint: true,
-      backgroundColor: null,
-      useCORS: true,
-      imageTimeout: 10000,
-      scale: 1,
-      logging: false,
-      ignoreElements: (element) => {
-        if (!element?.style) return false;
-        const { display, opacity, visibility } = element.style;
-        return isMatches(element, `.${DEVTOOL_OVERLAY}`) ||
-          display === 'none' ||
-          opacity === 0 ||
-          visibility === 'hidden';
-      }
-    }).then(canvas => canvas.toDataURL('image/jpeg'));
+    const renderScreen = () => window.snapdom.toCanvas(document.body)
+      .then(canvas => canvas.toDataURL('image/jpeg'));
 
-    if (window.html2canvas) {
+    if (window.snapdom) {
       return renderScreen();
     }
 
-    return loadScript('https://unpkg.com/html2canvas@1.4.1/dist/html2canvas.min.js').then(renderScreen);
+    return loadScript('https://unpkg.com/@zumer/snapdom@1.8.0/dist/snapdom.min.js').then(renderScreen);
   }
 
   /**