[#1412] fix Changes in the canvas within the Shadow DOM cannot be rec…

packages/rrweb/src/record/observers/canvas/canvas-manager.ts

@@ -98,7 +98,7 @@
       this.pendingCanvasMutations.set(target, []);
     }
 
     this.pendingCanvasMutations.get(target)!.push(mutation);
   };
 
   private initCanvasFPSObserver(
@@ -161,11 +161,27 @@
 
     const getCanvas = (): HTMLCanvasElement[] => {
       const matchedCanvas: HTMLCanvasElement[] = [];
-      win.document.querySelectorAll('canvas').forEach((canvas) => {
-        if (!isBlocked(canvas, blockClass, blockSelector, true)) {
-          matchedCanvas.push(canvas);
-        }
-      });
+
+      // traverse DOM and Shadow DOM
+      const traverseDom = (root: Document | ShadowRoot) => {
+        root.querySelectorAll('canvas').forEach((canvas) => {
+          if (
+            canvas instanceof HTMLCanvasElement &&
+            !isBlocked(canvas, blockClass, blockSelector, true)
+          ) {
+            matchedCanvas.push(canvas);
+          }
+        });
+
+        root.querySelectorAll('*').forEach((elem) => {
+          if (elem.shadowRoot) {
+            traverseDom(elem.shadowRoot);
+          }
+        });
+      };
+
+      traverseDom(win.document);
+
       return matchedCanvas;
     };
 
@@ -297,7 +313,7 @@
     if (!valuesWithType || id === -1) return;
 
     const values = valuesWithType.map((value) => {
       const { type, ...rest } = value;
       return rest;
     });
     const { type } = valuesWithType[0];