Fix iframe shadowdomed canvas not being captured bug.

packages/rrweb-player/src/main.ts

@@ -3,6 +3,8 @@ import _Player from './Player.svelte';
 
 type PlayerProps = {
   events: eventWithTime[];
+  width: number;
+  height:number;
 };
 
 class Player extends _Player {

packages/rrweb-snapshot/tsconfig.json

@@ -9,7 +9,7 @@
     "preserveConstEnums": true,
     "rootDir": "src",
     "outDir": "build",
-    "lib": ["es6", "dom"]
+    "lib": ["es6", "dom", "ES2020", "ES2021.WeakRef"]
   },
   "exclude": ["test"],
   "include": ["src"],

packages/rrweb/src/record/iframe-manager.ts

@@ -5,6 +5,7 @@ import CrossOriginIframeMirror from './cross-origin-iframe-mirror';
 import { EventType, IncrementalSource } from '@rrweb/types';
 import type { eventWithTime, mutationCallBack } from '@rrweb/types';
 import type { StylesheetManager } from './stylesheet-manager';
+import type { CanvasManager } from './observers/canvas/canvas-manager';
 
 export class IframeManager {
   private iframes: WeakMap<HTMLIFrameElement, true> = new WeakMap();
@@ -20,17 +21,19 @@ export class IframeManager {
   private loadListener?: (iframeEl: HTMLIFrameElement) => unknown;
   private stylesheetManager: StylesheetManager;
   private recordCrossOriginIframes: boolean;
-
+  private canvasManager : CanvasManager;
   constructor(options: {
     mirror: Mirror;
     mutationCb: mutationCallBack;
     stylesheetManager: StylesheetManager;
+    canvasManager : CanvasManager;
     recordCrossOriginIframes: boolean;
     wrappedEmit: (e: eventWithTime, isCheckout?: boolean) => void;
   }) {
     this.mutationCb = options.mutationCb;
     this.wrappedEmit = options.wrappedEmit;
     this.stylesheetManager = options.stylesheetManager;
+    this.canvasManager = options.canvasManager;
     this.recordCrossOriginIframes = options.recordCrossOriginIframes;
     this.crossOriginIframeStyleMirror = new CrossOriginIframeMirror(
       this.stylesheetManager.styleMirror.generateId.bind(
@@ -45,6 +48,7 @@ export class IframeManager {
 
   public addIframe(iframeEl: HTMLIFrameElement) {
     this.iframes.set(iframeEl, true);
+    this.canvasManager.addIFrame(iframeEl);
     if (iframeEl.contentWindow)
       this.crossOriginIframeMap.set(iframeEl.contentWindow, iframeEl);
   }

packages/rrweb/src/record/index.ts

@@ -282,9 +282,21 @@ function record<T = eventWithTime>(
     adoptedStyleSheetCb: wrappedAdoptedStyleSheetEmit,
   });
 
+  canvasManager = new CanvasManager({
+    recordCanvas,
+    mutationCb: wrappedCanvasMutationEmit,
+    win: window,
+    blockClass,
+    blockSelector,
+    mirror,
+    sampling: sampling.canvas,
+    dataURLOptions,
+  });
+
   const iframeManager = new IframeManager({
     mirror,
     mutationCb: wrappedMutationEmit,
+    canvasManager: canvasManager,
     stylesheetManager: stylesheetManager,
     recordCrossOriginIframes,
     wrappedEmit,
@@ -305,20 +317,10 @@ function record<T = eventWithTime>(
 
   const processedNodeManager = new ProcessedNodeManager();
 
-  canvasManager = new CanvasManager({
-    recordCanvas,
-    mutationCb: wrappedCanvasMutationEmit,
-    win: window,
-    blockClass,
-    blockSelector,
-    mirror,
-    sampling: sampling.canvas,
-    dataURLOptions,
-  });
-
   const shadowDomManager = new ShadowDomManager({
     mutationCb: wrappedMutationEmit,
     scrollCb: wrappedScrollEmit,
+    canvasManager: canvasManager,
     bypassOptions: {
       blockClass,
       blockSelector,

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

@@ -55,6 +55,17 @@ export class CanvasManager {
     this.locked = false;
   }
 
+  private shadowDoms = new Set<WeakRef<ShadowRoot>>();
+  private iframes = new Set<WeakRef<HTMLIFrameElement>>();
+
+  public addshadowRoot(shadowroot:ShadowRoot){
+    this.shadowDoms.add(new WeakRef(shadowroot));
+  }
+
+  public addIFrame(iframeEl: HTMLIFrameElement){
+    this.iframes.add(new WeakRef(iframeEl));
+  }
+
   constructor(options: {
     recordCanvas: boolean;
     mutationCb: canvasMutationCallback;
@@ -157,14 +168,34 @@ export class CanvasManager {
     const timeBetweenSnapshots = 1000 / fps;
     let lastSnapshotTime = 0;
     let rafId: number;
-
+    const that=this;
     const getCanvas = (): HTMLCanvasElement[] => {
       const matchedCanvas: HTMLCanvasElement[] = [];
-      win.document.querySelectorAll('canvas').forEach((canvas) => {
-        if (!isBlocked(canvas, blockClass, blockSelector, true)) {
-          matchedCanvas.push(canvas);
-        }
+      function collectWindowCanvas(win:Window){
+        win.document.querySelectorAll('canvas').forEach((canvas:HTMLCanvasElement) => {
+          if (!isBlocked(canvas, blockClass, blockSelector, true)) {
+            matchedCanvas.push(canvas);
+          }
+        });
+      }
+      // handle shadow root cases
+      that.shadowDoms.forEach(function(shadowroot:WeakRef<ShadowRoot>){
+        const sr=shadowroot.deref();
+        if (!sr) return;
+        sr.querySelectorAll('canvas').forEach((canvas:HTMLCanvasElement) => {
+          if (!isBlocked(canvas, blockClass, blockSelector, true)) {
+            matchedCanvas.push(canvas);
+          }
+        });
       });
+      collectWindowCanvas(win);
+      // handle iframe cases
+      that.iframes.forEach((iframeEl:WeakRef<HTMLIFrameElement>)=>{
+        const iframe=iframeEl.deref();
+        if (!iframe) return;
+        if (!iframe.contentWindow || !iframe.contentDocument) return;
+        collectWindowCanvas(iframe.contentWindow);
+      })
       return matchedCanvas;
     };
 
@@ -233,7 +264,7 @@ export class CanvasManager {
   ): void {
     this.startRAFTimestamping();
     this.startPendingCanvasMutationFlusher();
-
+    
     const canvasContextReset = initCanvasContextObserver(
       win,
       blockClass,

packages/rrweb/src/record/shadow-dom-manager.ts

@@ -2,7 +2,7 @@ import type { MutationBufferParam } from '../types';
 import type {
   mutationCallBack,
   scrollCallback,
-  SamplingStrategy,
+  SamplingStrategy
 } from '@rrweb/types';
 import {
   initMutationObserver,
@@ -12,7 +12,7 @@ import {
 import { patch, inDom } from '../utils';
 import type { Mirror } from 'rrweb-snapshot';
 import { isNativeShadowDom } from 'rrweb-snapshot';
-
+import type { CanvasManager } from './observers/canvas/canvas-manager';
 type BypassOptions = Omit<
   MutationBufferParam,
   'doc' | 'mutationCb' | 'mirror' | 'shadowDomManager'
@@ -27,17 +27,20 @@ export class ShadowDomManager {
   private bypassOptions: BypassOptions;
   private mirror: Mirror;
   private restoreHandlers: (() => void)[] = [];
+  private canvasManager: CanvasManager;
 
   constructor(options: {
     mutationCb: mutationCallBack;
     scrollCb: scrollCallback;
+    canvasManager : CanvasManager;
     bypassOptions: BypassOptions;
     mirror: Mirror;
   }) {
     this.mutationCb = options.mutationCb;
     this.scrollCb = options.scrollCb;
     this.bypassOptions = options.bypassOptions;
     this.mirror = options.mirror;
+    this.canvasManager = options.canvasManager;
 
     this.init();
   }
@@ -52,6 +55,7 @@ export class ShadowDomManager {
     if (!isNativeShadowDom(shadowRoot)) return;
     if (this.shadowDoms.has(shadowRoot)) return;
     this.shadowDoms.add(shadowRoot);
+    this.canvasManager.addshadowRoot(shadowRoot);
     const observer = initMutationObserver(
       {
         ...this.bypassOptions,

packages/rrweb/src/replay/index.ts

@@ -186,6 +186,7 @@ export class Replayer {
       triggerFocus: true,
       UNSAFE_replayCanvas: false,
       pauseAnimation: true,
+      mouseCursor: true,
       mouseTail: defaultMouseTailConfig,
       useVirtualDom: true, // Virtual-dom optimization is enabled by default.
       logger: console,
@@ -569,9 +570,11 @@ export class Replayer {
     this.wrapper.classList.add('replayer-wrapper');
     this.config.root.appendChild(this.wrapper);
 
-    this.mouse = document.createElement('div');
-    this.mouse.classList.add('replayer-mouse');
-    this.wrapper.appendChild(this.mouse);
+    if (this.config.mouseCursor !== false) {
+      this.mouse = document.createElement('div');
+      this.mouse.classList.add('replayer-mouse');
+      this.wrapper.appendChild(this.mouse);
+    }
 
     if (this.config.mouseTail !== false) {
       this.mouseTail = document.createElement('canvas');

packages/rrweb/src/types.ts

@@ -172,6 +172,7 @@ export type playerConfig = {
   triggerFocus: boolean;
   UNSAFE_replayCanvas: boolean;
   pauseAnimation?: boolean;
+  mouseCursor:boolean;
   mouseTail:
     | boolean
     | {

packages/rrweb/tsconfig.json

@@ -11,7 +11,9 @@
     "outDir": "build",
     "lib": [
       "es6",
-      "dom"
+      "dom",
+      "ES2020", 
+      "ES2021.WeakRef"
     ],
     "downlevelIteration": true,
     "importsNotUsedAsValues": "error",