fix(tracker): scan node tree for canvas on start

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.2",
+  "version": "7.0.4",
   "keywords": [
     "WebRTC",
     "assistance",
@@ -34,7 +34,7 @@
     "socket.io-client": "^4.7.2"
   },
   "peerDependencies": {
-    "@openreplay/tracker": "^11.0.3"
+    "@openreplay/tracker": "^12.0.0"
   },
   "devDependencies": {
     "@openreplay/tracker": "file:../tracker",

tracker/tracker-assist/src/version.ts

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

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

@@ -25,42 +25,47 @@ class CanvasRecorder {
   }
 
   startTracking() {
+    this.app.nodes.scanTree(this.handleCanvasEl)
     this.app.nodes.attachNodeCallback((node: Node): void => {
-      const id = this.app.nodes.getID(node)
-      if (!id) {
-        return
-      }
-
-      const isIgnored = this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id)
-      if (isIgnored || !hasTag(node, 'canvas') || this.snapshots[id]) {
-        return
-      }
-      const ts = this.app.timestamp()
-      this.snapshots[id] = {
-        images: [],
-        createdAt: ts,
-      }
-      const canvasMsg = CanvasNode(id.toString(), ts)
-      this.app.send(canvasMsg as Message)
-      const int = setInterval(() => {
-        const cid = this.app.nodes.getID(node)
-        const canvas = cid ? this.app.nodes.getNode(cid) : undefined
-        if (!canvas || !hasTag(canvas, 'canvas') || canvas !== node) {
-          this.app.debug.log('Canvas element not in sync')
-          clearInterval(int)
-        } else {
-          const snapshot = captureSnapshot(canvas, this.options.quality)
-          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 = []
-          }
-        }
-      }, this.interval)
-      this.intervals.push(int)
+      this.handleCanvasEl(node)
     })
   }
 
+  handleCanvasEl = (node: Node) => {
+    const id = this.app.nodes.getID(node)
+    if (!id || !hasTag(node, 'canvas')) {
+      return
+    }
+
+    const isIgnored = this.app.sanitizer.isObscured(id) || this.app.sanitizer.isHidden(id)
+    if (isIgnored || !hasTag(node, 'canvas') || this.snapshots[id]) {
+      return
+    }
+    const ts = this.app.timestamp()
+    this.snapshots[id] = {
+      images: [],
+      createdAt: ts,
+    }
+    const canvasMsg = CanvasNode(id.toString(), ts)
+    this.app.send(canvasMsg as Message)
+    const int = setInterval(() => {
+      const cid = this.app.nodes.getID(node)
+      const canvas = cid ? this.app.nodes.getNode(cid) : undefined
+      if (!canvas || !hasTag(canvas, 'canvas') || canvas !== node) {
+        this.app.debug.log('Canvas element not in sync')
+        clearInterval(int)
+      } else {
+        const snapshot = captureSnapshot(canvas, this.options.quality)
+        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 = []
+        }
+      }
+    }, this.interval)
+    this.intervals.push(int)
+  }
+
   sendSnaps(images: { data: string; id: number }[], canvasId: number, createdAt: number) {
     if (Object.keys(this.snapshots).length === 0) {
       return

tracker/tracker/src/main/app/nodes.ts

@@ -16,6 +16,10 @@ export default class Nodes {
     this.nodeCallbacks.push(nodeCallback)
   }
 
+  scanTree = (cb: (node: Node | void) => void) => {
+    this.nodes.forEach((node) => cb(node))
+  }
+
   attachNodeListener(node: Node, type: string, listener: EventListener, useCapture = true): void {
     const id = this.getID(node)
     if (id === undefined) {