iidrak-analytics-react 1.2.4 → 1.2.5

package/metastreamio/metastreamio.recorder.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { strf } from "./string.format.js";
-import ViewShot, { captureRef } from "react-native-view-shot";
+import { captureRef } from "react-native-view-shot";
 import { Platform, Dimensions } from "react-native";
 
 strf();
@@ -24,6 +24,8 @@ class MetaStreamIORecorder {
         // Use lower quality by default to save bandwidth
         this.quality = config.quality || 0.5;
         this.fps = config.fps || 2; // Frames per second (0.5s interval)
+        this.app_id = config.app_id || "default"; // Default to 'default' app if not specified
+        this.lastBase64 = null;
     }
 
     setSessionId(id) {
@@ -41,7 +43,7 @@ class MetaStreamIORecorder {
 
             // 1. Initialize Session on Python Server
             // Note: We use a separate fetch here because the payload format is different from standard analytics
-            await fetch(`${this.endpoint}/sessions`, {
+            await fetch(`${this.endpoint}/apps/${this.app_id}/sessions`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
@@ -84,25 +86,55 @@ class MetaStreamIORecorder {
 
     startLoop(viewRef) {
         const intervalMs = 1000 / this.fps;
-
+        this.lastUploadTime = 0;
+        console.log("Starting loop");
         this.intervalId = setInterval(async () => {
             if (!viewRef.current) return;
 
             try {
-                const uri = await captureRef(viewRef, {
-                    format: "jpg",
+                // Capture as base64 for comparison and direct upload
+                // Resize to width 400px (height maintained automatically) to reduce size
+                // Use PNG to ensure deterministic output for diffing
+                const base64 = await captureRef(viewRef, {
+                    format: "png",
                     quality: this.quality,
-                    result: "tmpfile"
+                    width: 400,
+                    result: "base64"
                 });
 
-                this.uploadFrame(uri);
+                let isDuplicate = false;
+                if(this.lastBase64){
+                    if (this.lastBase64 === base64) {
+                        isDuplicate = true;
+                        console.log("DBG:: Duplicate frame");
+                    }else{
+                        console.log("DBG:: New frame");
+                        this.lastBase64 = base64;
+                    }
+                }
+
+                const now = Date.now();
+                // Logic:
+                // If NEW frame: Upload immediately.
+                // If DUPLICATE frame:
+                //    Only upload if it's been > 5 seconds since last upload (Keepalive)
+                //    This reduces chatter significantly. 
+                
+                const timeSinceLastUpload = (now - this.lastUploadTime) / 1000;
+                
+                if (!isDuplicate || timeSinceLastUpload > 5.0) {
+                    console.log("DBG:: Uploading frame");
+                    this.uploadFrame(base64, isDuplicate);
+                    this.lastUploadTime = now;
+                    this.lastBase64 = base64;
+                }
             } catch (e) {
                 // Silent fail on capture error to avoid log spam
             }
         }, intervalMs);
     }
 
-    async uploadFrame(uri) {
+    async uploadFrame(data, isDuplicate) {
         if (!this.recorderSessionId) return;
 
         const formData = new FormData();
@@ -111,14 +143,19 @@ class MetaStreamIORecorder {
 
         formData.append('timestamp', String(timestamp));
         formData.append('duration', String(duration));
-        formData.append('file', {
-            uri: uri,
-            type: 'image/jpeg',
-            name: 'screenshot.jpg',
-        });
+        
+        if (isDuplicate) {
+            formData.append('is_duplicate', 'true');
+        } else {
+            formData.append('file', {
+                uri: 'data:image/png;base64,' + data,
+                type: 'image/png',
+                name: 'screenshot.png',
+            });
+        }
 
         try {
-            await fetch(`${this.endpoint}/sessions/${this.recorderSessionId}/screenshot`, {
+            await fetch(`${this.endpoint}/apps/${this.app_id}/sessions/${this.recorderSessionId}/screenshot`, {
                 method: 'POST',
                 body: formData,
                 headers: {
@@ -145,7 +182,7 @@ class MetaStreamIORecorder {
         };
 
         try {
-            fetch(`${this.endpoint}/sessions/${this.recorderSessionId}/events`, {
+            fetch(`${this.endpoint}/apps/${this.app_id}/sessions/${this.recorderSessionId}/events`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify([event])

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "iidrak-analytics-react",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "react native client for metastreamio",
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.2.0",