add snapshot delay setting

highlight · Jul 19, 2023 · 137e02c · 137e02c
1 parent 2cc726b
commit 137e02c
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 3 deletions.
diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts
@@ -321,6 +321,7 @@ function record<T = eventWithTime>(
     mirror,
     sampling: sampling?.canvas?.fps,
     clearWebGLBuffer: sampling?.canvas?.clearWebGLBuffer,
+    initialSnapshotDelay: sampling?.canvas?.initialSnapshotDelay,
     dataURLOptions,
     resizeFactor: sampling?.canvas?.resizeFactor,
     maxSnapshotDimension: sampling?.canvas?.maxSnapshotDimension,

diff --git a/packages/rrweb/src/record/observers/canvas/canvas-manager.ts b/packages/rrweb/src/record/observers/canvas/canvas-manager.ts
@@ -73,6 +73,7 @@ export class CanvasManager {
     mirror: Mirror;
     sampling?: 'all' | number;
     clearWebGLBuffer?: boolean;
+    initialSnapshotDelay?: number;
     dataURLOptions: DataURLOptions;
     resizeFactor?: number;
     maxSnapshotDimension?: number;
@@ -89,6 +90,7 @@ export class CanvasManager {
       recordCanvas,
       recordVideos,
       clearWebGLBuffer,
+      initialSnapshotDelay,
       dataURLOptions,
     } = options;
     this.mutationCb = options.mutationCb;
@@ -106,6 +108,7 @@ export class CanvasManager {
         blockSelector,
         {
           clearWebGLBuffer,
+          initialSnapshotDelay,
           dataURLOptions,
         },
         options.resizeFactor,
@@ -154,6 +157,7 @@ export class CanvasManager {
     blockSelector: string | null,
     options: {
       clearWebGLBuffer?: boolean;
+      initialSnapshotDelay?: number;
       dataURLOptions: DataURLOptions;
     },
     resizeFactor?: number,
@@ -404,16 +408,21 @@ export class CanvasManager {
           }
         }),
       );
-      await Promise.all(promises);
+      Promise.all(promises).catch(console.error);
 
       rafId = requestAnimationFrame(takeSnapshots);
     };
 
-    rafId = requestAnimationFrame(takeSnapshots);
+    const delay = setTimeout(() => {
+      rafId = requestAnimationFrame(takeSnapshots);
+    }, options.initialSnapshotDelay);
 
     this.resetObservers = () => {
       canvasContextReset();
-      cancelAnimationFrame(rafId);
+      clearTimeout(delay);
+      if (rafId) {
+        cancelAnimationFrame(rafId);
+      }
     };
   }
 

diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
@@ -213,6 +213,10 @@ export type CanvasSamplingStrategy = Partial<{
    * Set to false to disable the clearing (in case there are visual glitches in the canvas).
    */
   clearWebGLBuffer?: boolean;
+  /**
+   * Time (in milliseconds) to wait before the initial snapshot of canvas/video elements.
+   */
+  initialSnapshotDelay?: number;
   /**
    * Adjust the quality of the canvas blob serialization.
    */