fix(tracker): expose canvas tracking restart method, remove context creation in assist

tracker/tracker-assist/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 7.0.3
+
+- small fix for canvas context tracking
+
 ## 7.0.1
 
 - mark live sessions with ux test active

tracker/tracker-assist/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker-assist",
   "description": "Tracker plugin for screen assistance through the WebRTC",
-  "version": "7.0.4",
+  "version": "7.0.3",
   "keywords": [
     "WebRTC",
     "assistance",
@@ -34,7 +34,7 @@
     "socket.io-client": "^4.7.2"
   },
   "peerDependencies": {
-    "@openreplay/tracker": "^12.0.0"
+    "@openreplay/tracker": "^11.0.5"
   },
   "devDependencies": {
     "@openreplay/tracker": "file:../tracker",

tracker/tracker-assist/src/Canvas.ts

@@ -9,7 +9,6 @@ export default class CanvasRecorder {
     private readonly onStream: (stream: MediaStream) => void,
     private readonly logError: (...args: any[]) => void,
   ) {
-    this.canvas.getContext('2d', { alpha: true, })
     const stream = this.canvas.captureStream(this.fps)
     this.emitStream(stream)
   }

tracker/tracker-assist/src/version.ts

@@ -1 +1 @@
-export const pkgVersion = '7.0.4'
+export const pkgVersion = '7.0.3'

tracker/tracker/CHANGELOG.md

@@ -1,3 +1,8 @@
+# 11.0.5
+
+- add method to restart canvas tracking (in case of context recreation)
+- scan dom tree for canvas els on tracker start
+
 # 11.0.4
 
 - some additional security for canvas capture (check if canvas el itself is obscured/ignored)

tracker/tracker/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@openreplay/tracker",
   "description": "The OpenReplay tracker main package",
-  "version": "11.0.4",
+  "version": "11.0.5",
   "keywords": [
     "logging",
     "replay"

tracker/tracker/src/main/app/canvas.ts

@@ -10,6 +10,7 @@ interface CanvasSnapshot {
 interface Options {
   fps: number
   quality: 'low' | 'medium' | 'high'
+  isDebug?: boolean
 }
 
 class CanvasRecorder {
@@ -25,10 +26,17 @@ class CanvasRecorder {
   }
 
   startTracking() {
+    setTimeout(() => {
+      this.app.nodes.scanTree(this.handleCanvasEl)
+      this.app.nodes.attachNodeCallback((node: Node): void => {
+        this.handleCanvasEl(node)
+      })
+    }, 500)
+  }
+
+  restartTracking = () => {
+    this.clear()
     this.app.nodes.scanTree(this.handleCanvasEl)
-    this.app.nodes.attachNodeCallback((node: Node): void => {
-      this.handleCanvasEl(node)
-    })
   }
 
   handleCanvasEl = (node: Node) => {
@@ -74,7 +82,9 @@ class CanvasRecorder {
     images.forEach((snapshot) => {
       const blob = dataUrlToBlob(snapshot.data)[0]
       formData.append('snapshot', blob, `${createdAt}_${canvasId}_${snapshot.id}.jpeg`)
-      // saveImageData(snapshot.data, `${createdAt}_${canvasId}_${snapshot.id}.jpeg`)
+      if (this.options.isDebug) {
+        saveImageData(snapshot.data, `${createdAt}_${canvasId}_${snapshot.id}.jpeg`)
+      }
     })
 
     fetch(this.app.options.ingestPoint + '/v1/web/images', {

tracker/tracker/src/main/app/index.ts

@@ -106,6 +106,7 @@ type AppOptions = {
   __is_snippet: boolean
   __debug_report_edp: string | null
   __debug__?: LoggerOptions
+  __save_canvas_locally?: boolean
   localStorage: Storage | null
   sessionStorage: Storage | null
   forceSingleTab?: boolean
@@ -183,6 +184,7 @@ export default class App {
         verbose: false,
         __is_snippet: false,
         __debug_report_edp: null,
+        __save_canvas_locally: false,
         localStorage: null,
         sessionStorage: null,
         disableStringDict: false,
@@ -702,17 +704,21 @@ export default class App {
         this.compressionThreshold = compressionThreshold
         const onStartInfo = { sessionToken: token, userUUID, sessionID }
 
+        if (canvasEnabled) {
+          this.canvasRecorder =
+            this.canvasRecorder ??
+            new CanvasRecorder(this, {
+              fps: canvasFPS,
+              quality: canvasQuality,
+              isDebug: this.options.__save_canvas_locally,
+            })
+          this.canvasRecorder.startTracking()
+        }
         // TODO: start as early as possible (before receiving the token)
         this.startCallbacks.forEach((cb) => cb(onStartInfo)) // MBTODO: callbacks after DOM "mounted" (observed)
         this.observer.observe()
         this.ticker.start()
 
-        if (canvasEnabled) {
-          this.canvasRecorder =
-            this.canvasRecorder ??
-            new CanvasRecorder(this, { fps: canvasFPS, quality: canvasQuality })
-          this.canvasRecorder.startTracking()
-        }
         this.activityState = ActivityState.Active
 
         this.notify.log('OpenReplay tracking started.')
@@ -767,6 +773,10 @@ export default class App {
       })
   }
 
+  restartCanvasTracking = () => {
+    this.canvasRecorder?.restartTracking()
+  }
+
   onUxtCb = []
 
   addOnUxtCb(cb: (id: number) => void) {

tracker/tracker/src/main/index.ts

@@ -223,6 +223,13 @@ export default class API {
     return this.featureFlags.flags
   }
 
+  public restartCanvasTracking = () => {
+    if (this.app === null) {
+      return
+    }
+    this.app.restartCanvasTracking()
+  }
+
   use<T>(fn: (app: App | null, options?: Options) => T): T {
     return fn(this.app, this.options)
   }