diff --git a/packages/rrweb/src/record/index.ts b/packages/rrweb/src/record/index.ts index fcfad601..b5b1ceb2 100644 --- a/packages/rrweb/src/record/index.ts +++ b/packages/rrweb/src/record/index.ts @@ -321,6 +321,7 @@ function record( 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 index 5bf958b0..36815dc1 100644 --- 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 index a9a61188..96344c65 100644 --- 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. */