support canvas downsampling configuration

packages/rrweb-player/package.json

@@ -23,7 +23,7 @@
     "typescript": "^4.7.3"
   },
   "dependencies": {
-    "@highlight-run/rrweb": "2.1.7",
+    "@highlight-run/rrweb": "2.1.8",
     "@tsconfig/svelte": "^1.0.1"
   },
   "scripts": {

packages/rrweb/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@highlight-run/rrweb",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "record and replay the web",
   "scripts": {
     "prepare": "npm run prepack",

packages/rrweb/src/record/index.ts

@@ -229,7 +229,10 @@ function record<T = eventWithTime>(
     win: window,
     blockClass,
     mirror,
-    sampling: sampling.canvas,
+    sampling: sampling?.canvas?.fps,
+    resizeQuality: sampling?.canvas?.resizeQuality,
+    resizeFactor: sampling?.canvas?.resizeFactor,
+    maxSnapshotDimension: sampling?.canvas?.maxSnapshotDimension,
   });
 
   const shadowDomManager = new ShadowDomManager({

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

@@ -61,6 +61,9 @@ export class CanvasManager {
     blockClass: blockClass;
     mirror: Mirror;
     sampling?: 'all' | number;
+    resizeQuality?: 'pixelated' | 'low' | 'medium' | 'high';
+    resizeFactor?: number;
+    maxSnapshotDimension?: number;
   }) {
     const { sampling = 'all', win, blockClass, recordCanvas } = options;
     this.mutationCb = options.mutationCb;
@@ -69,7 +72,14 @@ export class CanvasManager {
     if (recordCanvas && sampling === 'all')
       this.initCanvasMutationObserver(win, blockClass);
     if (recordCanvas && typeof sampling === 'number')
-      this.initCanvasFPSObserver(sampling, win, blockClass);
+      this.initCanvasFPSObserver(
+        sampling,
+        win,
+        blockClass,
+        options.resizeQuality,
+        options.resizeFactor,
+        options.maxSnapshotDimension,
+      );
   }
 
   private processMutation: canvasManagerMutationCallback = (
@@ -93,6 +103,9 @@ export class CanvasManager {
     fps: number,
     win: IWindow,
     blockClass: blockClass,
+    resizeQuality?: 'pixelated' | 'low' | 'medium' | 'high',
+    resizeFactor?: number,
+    maxSnapshotDimension?: number,
   ) {
     const canvasContextReset = initCanvasContextObserver(win, blockClass);
     const snapshotInProgressMap: Map<number, boolean> = new Map();
@@ -103,14 +116,14 @@ export class CanvasManager {
 
       if (!('base64' in e.data)) return;
 
-      const { base64, type, width, height } = e.data;
+      const { base64, type, canvasWidth, canvasHeight } = e.data;
       this.mutationCb({
         id,
         type: CanvasContext['2D'],
         commands: [
           {
             property: 'clearRect', // wipe canvas
-            args: [0, 0, width, height],
+            args: [0, 0, canvasWidth, canvasHeight],
           },
           {
             property: 'drawImage', // draws (semi-transparent) image
@@ -127,6 +140,8 @@ export class CanvasManager {
               } as CanvasArg,
               0,
               0,
+              canvasWidth,
+              canvasHeight,
             ],
           },
         ],
@@ -178,13 +193,27 @@ export class CanvasManager {
           if (canvas.width === 0 || canvas.height === 0) {
             return;
           }
-          const bitmap = await createImageBitmap(canvas);
+          let scale = resizeFactor || 1;
+          if (maxSnapshotDimension) {
+            const maxDim = Math.max(canvas.width, canvas.height);
+            scale = Math.min(scale, maxSnapshotDimension / maxDim);
+          }
+          const width = canvas.width * scale;
+          const height = canvas.height * scale;
+
+          const bitmap = await createImageBitmap(canvas, {
+            resizeQuality: resizeQuality || 'low',
+            resizeWidth: width,
+            resizeHeight: height,
+          });
           worker.postMessage(
             {
               id,
               bitmap,
-              width: canvas.width,
-              height: canvas.height,
+              width,
+              height,
+              canvasWidth: canvas.width,
+              canvasHeight: canvas.height,
             },
             [bitmap],
           );

packages/rrweb/src/record/workers/image-bitmap-data-url-worker.ts

@@ -45,14 +45,14 @@ worker.onmessage = async function (e) {
   if (!('OffscreenCanvas' in globalThis))
     return worker.postMessage({ id: e.data.id });
 
-  const { id, bitmap, width, height } = e.data;
+  const { id, bitmap, width, height, canvasWidth, canvasHeight } = e.data;
 
   const transparentBase64 = getTransparentBlobFor(width, height);
 
   const offscreen = new OffscreenCanvas(width, height);
   const ctx = offscreen.getContext('2d')!;
 
-  ctx.drawImage(bitmap, 0, 0);
+  ctx.drawImage(bitmap, 0, 0, width, height);
   bitmap.close();
   const blob = await offscreen.convertToBlob(); // takes a while
   const type = blob.type;
@@ -73,6 +73,8 @@ worker.onmessage = async function (e) {
     base64,
     width,
     height,
+    canvasWidth,
+    canvasHeight,
   });
   lastBlobMap.set(id, base64);
 };

packages/rrweb/src/types.ts

@@ -185,6 +185,32 @@ export type blockClass = string | RegExp;
 
 export type maskTextClass = string | RegExp;
 
+export type CanvasSamplingStrategy = Partial<{
+  /**
+   * 'all' will record every single canvas call
+   * number between 1 and 60, will record an image snapshots in a web-worker a (maximum) number of times per second.
+   *                          Number only supported where [`OffscreenCanvas`](http://mdn.io/offscreencanvas) is supported.
+   */
+  fps: 'all' | number;
+  /**
+   * A scaling to apply to canvas shapshotting. Adjusts the resolution at which
+   * canvases are recorded by this multiple.
+   */
+  resizeFactor: number;
+  /**
+   * The quality of canvas snapshots
+   */
+  resizeQuality: 'pixelated' | 'low' | 'medium' | 'high';
+  /**
+   * The maximum dimension to take canvas snapshots at.
+   * This setting takes precedence over resizeFactor if the resulting image size
+   * from the resizeFactor calculation is larger than this value.
+   * Eg: set to 600 to ensure that the canvas is saved with images no larger than 600px
+   * in either dimension (while preserving the original canvas aspect ratio).
+   */
+  maxSnapshotDimension: number;
+}>;
+
 export type SamplingStrategy = Partial<{
   /**
    * false means not to record mouse/touch move events
@@ -213,12 +239,8 @@ export type SamplingStrategy = Partial<{
    * 'last' will only record the last input value while input a sequence of chars
    */
   input: 'all' | 'last';
-  /**
-   * 'all' will record every single canvas call
-   * number between 1 and 60, will record an image snapshots in a web-worker a (maximum) number of times per second.
-   *                          Number only supported where [`OffscreenCanvas`](http://mdn.io/offscreencanvas) is supported.
-   */
-  canvas: 'all' | number;
+
+  canvas: CanvasSamplingStrategy;
 }>;
 
 export type RecordPlugin<TOptions = unknown> = {
@@ -299,7 +321,7 @@ export type observerParam = {
   stylesheetManager: StylesheetManager;
   shadowDomManager: ShadowDomManager;
   canvasManager: CanvasManager;
-  enableStrictPrivacy: boolean,
+  enableStrictPrivacy: boolean;
   plugins: Array<{
     observer: (
       cb: (...arg: Array<unknown>) => void,
@@ -566,6 +588,8 @@ export type ImageBitmapDataURLWorkerParams = {
   bitmap: ImageBitmap;
   width: number;
   height: number;
+  canvasWidth: number;
+  canvasHeight: number;
 };
 
 export type ImageBitmapDataURLWorkerResponse =
@@ -578,6 +602,8 @@ export type ImageBitmapDataURLWorkerResponse =
       base64: string;
       width: number;
       height: number;
+      canvasWidth: number;
+      canvasHeight: number;
     };
 
 export type fontParam = {