@openreplay/tracker 13.0.0 → 13.0.2

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 13.0.2
+
+- more file extensions for canvas
+
+# 13.0.1
+
+- moved canvas snapshots to webp, additional option to utilize useAnimationFrame method (for webgl)
+- simpler, faster canvas recording manager
+
 # 13.0.0
 
 - `assistOnly` flag for tracker options (EE only feature)

package/cjs/app/canvas.d.ts

@@ -4,6 +4,8 @@ interface Options {
     quality: 'low' | 'medium' | 'high';
     isDebug?: boolean;
     fixedScaling?: boolean;
+    useAnimationFrame?: boolean;
+    fileExt?: 'webp' | 'png' | 'jpeg' | 'avif';
 }
 declare class CanvasRecorder {
     private readonly app;
@@ -11,13 +13,14 @@ declare class CanvasRecorder {
     private snapshots;
     private readonly intervals;
     private readonly interval;
+    private readonly fileExt;
     constructor(app: App, options: Options);
     startTracking(): void;
     restartTracking: () => void;
     captureCanvas: (node: Node) => void;
     recordCanvas: (node: Node, id: number) => void;
     sendSnaps(images: {
-        data: string;
+        data: Blob;
         id: number;
     }[], canvasId: number, createdAt: number): void;
     clear(): void;

package/cjs/app/canvas.js

@@ -58,6 +58,17 @@ class CanvasRecorder {
             };
             const canvasMsg = (0, messages_gen_js_1.CanvasNode)(id.toString(), ts);
             this.app.send(canvasMsg);
+            const captureFn = (canvas) => {
+                captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling, this.fileExt, (blob) => {
+                    if (!blob)
+                        return;
+                    this.snapshots[id].images.push({ id: this.app.timestamp(), data: blob });
+                    if (this.snapshots[id].images.length > 9) {
+                        this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt);
+                        this.snapshots[id].images = [];
+                    }
+                });
+            };
             const int = setInterval(() => {
                 const cid = this.app.nodes.getID(node);
                 const canvas = cid ? this.app.nodes.getNode(cid) : undefined;
@@ -67,17 +78,20 @@ class CanvasRecorder {
                 }
                 else {
                     if (!this.snapshots[id].paused) {
-                        const snapshot = captureSnapshot(canvas, this.options.quality, this.snapshots[id].dummy, this.options.fixedScaling);
-                        this.snapshots[id].images.push({ id: this.app.timestamp(), data: snapshot });
-                        if (this.snapshots[id].images.length > 9) {
-                            this.sendSnaps(this.snapshots[id].images, id, this.snapshots[id].createdAt);
-                            this.snapshots[id].images = [];
+                        if (this.options.useAnimationFrame) {
+                            requestAnimationFrame(() => {
+                                captureFn(canvas);
+                            });
+                        }
+                        else {
+                            captureFn(canvas);
                         }
                     }
                 }
             }, this.interval);
             this.intervals.push(int);
         };
+        this.fileExt = options.fileExt ?? 'webp';
         this.interval = 1000 / options.fps;
     }
     startTracking() {
@@ -94,12 +108,12 @@ class CanvasRecorder {
         }
         const formData = new FormData();
         images.forEach((snapshot) => {
-            const blob = dataUrlToBlob(snapshot.data);
+            const blob = snapshot.data;
             if (!blob)
                 return;
-            formData.append('snapshot', blob[0], `${createdAt}_${canvasId}_${snapshot.id}.jpeg`);
+            formData.append('snapshot', blob, `${createdAt}_${canvasId}_${snapshot.id}.${this.fileExt}`);
             if (this.options.isDebug) {
-                saveImageData(snapshot.data, `${createdAt}_${canvasId}_${snapshot.id}.jpeg`);
+                saveImageData(blob, `${createdAt}_${canvasId}_${snapshot.id}.${this.fileExt}`);
             }
         });
         fetch(this.app.options.ingestPoint + '/v1/web/images', {
@@ -126,8 +140,8 @@ const qualityInt = {
     medium: 0.55,
     high: 0.8,
 };
-function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false) {
-    const imageFormat = 'image/jpeg'; // or /png'
+function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false, fileExt, onBlob) {
+    const imageFormat = `image/${fileExt}`;
     if (fixedScaling) {
         const canvasScaleRatio = window.devicePixelRatio || 1;
         dummy.width = canvas.width / canvasScaleRatio;
@@ -137,10 +151,10 @@ function captureSnapshot(canvas, quality = 'medium', dummy, fixedScaling = false
             return '';
         }
         ctx.drawImage(canvas, 0, 0, dummy.width, dummy.height);
-        return dummy.toDataURL(imageFormat, qualityInt[quality]);
+        dummy.toBlob(onBlob, imageFormat, qualityInt[quality]);
     }
     else {
-        return canvas.toDataURL(imageFormat, qualityInt[quality]);
+        canvas.toBlob(onBlob, imageFormat, qualityInt[quality]);
     }
 }
 function dataUrlToBlob(dataUrl) {
@@ -159,7 +173,8 @@ function dataUrlToBlob(dataUrl) {
     }
     return [new Blob([u8arr], { type: mime }), u8arr];
 }
-function saveImageData(imageDataUrl, name) {
+function saveImageData(imageDataBlob, name) {
+    const imageDataUrl = URL.createObjectURL(imageDataBlob);
     const link = document.createElement('a');
     link.href = imageDataUrl;
     link.download = name;

package/cjs/app/index.d.ts

@@ -50,14 +50,37 @@ type AppOptions = {
     __is_snippet: boolean;
     __debug_report_edp: string | null;
     __debug__?: ILogLevel;
+    /** @deprecated see canvas prop */
     __save_canvas_locally?: boolean;
+    /** @deprecated see canvas prop */
     fixedCanvasScaling?: boolean;
     localStorage: Storage | null;
     sessionStorage: Storage | null;
     forceSingleTab?: boolean;
+    /** Sometimes helps to prevent session breaking due to dict reset */
     disableStringDict?: boolean;
     assistSocketHost?: string;
+    /** @deprecated see canvas prop */
     disableCanvas?: boolean;
+    canvas: {
+        disableCanvas?: boolean;
+        /**
+         * If you expect HI-DPI users mostly, this will render canvas
+         * in 1:1 pixel ratio
+         * */
+        fixedCanvasScaling?: boolean;
+        __save_canvas_locally?: boolean;
+        /**
+         * Use with care since it hijacks one frame each time it captures
+         * snapshot for every canvas
+         * */
+        useAnimationFrame?: boolean;
+        /**
+         * Use webp unless it produces too big images
+         * @default webp
+         * */
+        fileExt?: 'webp' | 'png' | 'jpeg' | 'avif';
+    };
     /** @deprecated */
     onStart?: StartCallback;
     network?: NetworkOptions;

package/cjs/app/index.js

@@ -80,7 +80,7 @@ class App {
         this.stopCallbacks = [];
         this.commitCallbacks = [];
         this.activityState = ActivityState.NotActive;
-        this.version = '13.0.0'; // TODO: version compatability check inside each plugin.
+        this.version = '13.0.2'; // TODO: version compatability check inside each plugin.
         this.socketMode = false;
         this.compressionThreshold = 24 * 1000;
         this.restartAttempts = 0;
@@ -118,6 +118,18 @@ class App {
             });
         };
         this.onUxtCb = [];
+        if (Object.keys(options).findIndex((k) => ['fixedCanvasScaling', 'disableCanvas'].includes(k)) !==
+            -1) {
+            console.warn('Openreplay: canvas options are moving to separate key "canvas" in next update. Please update your configuration.');
+            options = {
+                ...options,
+                canvas: {
+                    __save_canvas_locally: options.__save_canvas_locally,
+                    fixedCanvasScaling: options.fixedCanvasScaling,
+                    disableCanvas: options.disableCanvas,
+                },
+            };
+        }
         this.contextId = Math.random().toString(36).slice(2);
         this.projectKey = projectKey;
         this.networkOptions = options.network;
@@ -143,6 +155,12 @@ class App {
             fixedCanvasScaling: false,
             disableCanvas: false,
             assistOnly: false,
+            canvas: {
+                disableCanvas: false,
+                fixedCanvasScaling: false,
+                __save_canvas_locally: false,
+                useAnimationFrame: false,
+            },
         }, options);
         if (!this.options.forceSingleTab && globalThis && 'BroadcastChannel' in globalThis) {
             const host = location.hostname.split('.').slice(-2).join('_');
@@ -887,14 +905,15 @@ class App {
             void this.featureFlags.reloadFlags();
             await this.tagWatcher.fetchTags(this.options.ingestPoint, token);
             this.activityState = ActivityState.Active;
-            if (canvasEnabled && !this.options.disableCanvas) {
+            if (canvasEnabled && !this.options.canvas.disableCanvas) {
                 this.canvasRecorder =
                     this.canvasRecorder ??
                         new canvas_js_1.default(this, {
                             fps: canvasFPS,
                             quality: canvasQuality,
-                            isDebug: this.options.__save_canvas_locally,
-                            fixedScaling: this.options.fixedCanvasScaling,
+                            isDebug: this.options.canvas.__save_canvas_locally,
+                            fixedScaling: this.options.canvas.fixedCanvasScaling,
+                            useAnimationFrame: this.options.canvas.useAnimationFrame,
                         });
                 this.canvasRecorder.startTracking();
             }

package/cjs/index.js

@@ -97,7 +97,7 @@ class API {
             const orig = this.options.ingestPoint || index_js_1.DEFAULT_INGEST_POINT;
             req.open('POST', orig + '/v1/web/not-started');
             req.send(JSON.stringify({
-                trackerVersion: '13.0.0',
+                trackerVersion: '13.0.2',
                 projectKey: this.options.projectKey,
                 doNotTrack,
                 reason: missingApi.length ? `missing api: ${missingApi.join(',')}` : reason,