add snapshot function to replay canvas

Author: c298lee

packages/replay/src/canvas.ts

@@ -1,10 +1,19 @@
-import { getCanvasManager } from '@sentry-internal/rrweb';
+import { getCanvasManager, _getCanvasManager } from '@sentry-internal/rrweb';
 import type { Integration } from '@sentry/types';
-import type { ReplayConfiguration } from './types';
+import type { CanvasManagerInterface, GetCanvasManagerOptions, ReplayConfiguration } from './types';
+import { CANVAS_QUALITY } from './constants';
 
 interface ReplayCanvasOptions {
-  fps: number;
-  quality: number;
+  canvasQuality: {
+    sampling: {
+      canvas: number;
+    };
+    dataURLOptions: {
+      type: string;
+      quality: number;
+    };
+  };
+  manualSnapshot?: boolean;
 }
 
 /** An integration to add canvas recording to replay. */
@@ -19,16 +28,20 @@ export class ReplayCanvas implements Integration {
    */
   public name: string;
 
+  public canvasManager: (options: GetCanvasManagerOptions) => CanvasManagerInterface;
+
   private _canvasOptions: ReplayCanvasOptions;
 
   public constructor() {
     this.name = ReplayCanvas.id;
     // TODO FN: Allow to configure this
     // But since we haven't finalized how to configure this, this is predefined for now
     // to avoid breaking changes
+    this.canvasManager = getCanvasManager;
     this._canvasOptions = {
-      fps: 4,
-      quality: 0.6,
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+      canvasQuality: CANVAS_QUALITY.medium,
+      manualSnapshot: true,
     };
   }
 
@@ -46,9 +59,32 @@ export class ReplayCanvas implements Integration {
       _experiments: {
         canvas: {
           ...this._canvasOptions,
-          manager: getCanvasManager,
+          manager: opts =>
+            this.canvasManager({
+              ...opts,
+              manualSnapshot: this._canvasOptions.manualSnapshot,
+            }),
         },
       },
     };
   }
+
+  /**
+   * Take manual snapshot of canvas
+   */
+  public snapshotCanvas(canvasElement?: HTMLCanvasElement): void {
+    const canvasManager: CanvasManagerInterface = _getCanvasManager(this.canvasManager, {
+      recordCanvas: true,
+      blockClass: '',
+      blockSelector: null,
+      unblockSelector: null,
+      dataURLOptions: this._canvasOptions.canvasQuality.dataURLOptions,
+    });
+
+    return canvasManager.snapshot(
+      this._canvasOptions.canvasQuality.dataURLOptions,
+      this._canvasOptions.canvasQuality.sampling.canvas,
+      canvasElement,
+    );
+  }
 }

packages/replay/src/types/replay.ts

@@ -234,6 +234,7 @@ export interface ReplayPluginOptions extends ReplayNetworkOptions {
     traceInternals: boolean;
     canvas: {
       quality?: 'low' | 'medium' | 'high';
+      manualSnapshot?: boolean;
       manager: (options: GetCanvasManagerOptions) => CanvasManagerInterface;
     };
   }>;

packages/replay/src/types/rrweb.ts

@@ -51,9 +51,18 @@ export interface CanvasManagerInterface {
   unfreeze(): void;
   lock(): void;
   unlock(): void;
+  snapshot(
+    dataURLOptions: Partial<{
+      type: string;
+      quality: number;
+    }>,
+    sampling: number,
+    canvasElement?: HTMLCanvasElement,
+  ): void;
 }
 
 export interface GetCanvasManagerOptions {
+  manualSnapshot?: boolean;
   recordCanvas: boolean;
   blockClass: string | RegExp;
   blockSelector: string | null;