iidrak-analytics-react 1.2.6 → 1.2.8

package/README.md

@@ -68,7 +68,7 @@ const iidrakConfig = {
     loggingLevel: 'INFO',        // 'INFO', 'WARN', 'ERROR'
     silentMode: false,           // If true, disables all logging
     sessionLength: 1800,         // Session timeout in seconds (e.g. 30 mins)
-    quality: 0.5,                // Recording quality (0.1 - 1.0)
+    quality: 0.1,                // Recording quality (0.1 - 1.0)
     fps: 2,                      // Frames Per Second for recording
   },
 
@@ -164,6 +164,11 @@ If you see this error, it means the native module `react-native-device-info` is
 1. Ensure you installed the peer dependency: `npm install react-native-device-info`
 2. Rebuild your native app: `cd android && ./gradlew clean && cd .. && npx react-native run-android`
 
+### "Network request failed" on Android
+If your backend is running on HTTP (not HTTPS), Android will block the connection by default.
+1. Create a `network_security_config.xml` in `android/app/src/main/res/xml/` allowing cleartext traffic for your domain/IP.
+2. Or for development, add `android:usesCleartextTraffic="true"` to your `AndroidManifest.xml` `<application>` tag.
+
 ### "Cannot read property 'MetaStreamProvider' of undefined"
 Ensure you are importing correctly.
 Correct: `import { MetaStreamProvider } from 'iidrak-analytics-react';`

package/metastreamio/metastreamio.provider.js

@@ -27,7 +27,7 @@ class MetaStreamProvider extends Component {
         const { children, style } = this.props;
 
         return (
-            <ViewShot ref={this.viewShotRef} style={{ flex: 1 }} options={{ format: "jpg", quality: 0.5 }}>
+            <ViewShot ref={this.viewShotRef} style={{ flex: 1 }} options={{ format: "jpg", quality: 0.3 }}>
                 <View
                     style={[styles.container, style]}
                     onTouchStart={(e) => this.handleTouch(e, 'touch_start')}

package/metastreamio/metastreamio.recorder.js

@@ -22,7 +22,7 @@ class MetaStreamIORecorder {
         this.endpoint = config.recordingEndpoint || (this.network.endpoints.length > 0 ? this.network.endpoints[0].replace(/:[0-9]+/, "") + ":8000" : null);
 
         // Use lower quality by default to save bandwidth
-        this.quality = config.quality || 0.5;
+        this.quality = config.quality || 0.3;
         this.fps = config.fps || 2; // Frames per second (0.5s interval)
         // If user_id is provided in user config, use it as app_id (per user requirement)
         // Otherwise fallback to app_id in general config or "default"
@@ -46,10 +46,13 @@ 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}/apps/${this.app_id}/sessions`, {
+            const url = `${this.endpoint}/api/apps/${this.app_id}/sessions`;
+            this.logger.log("recorder", `Sending session creation request to: ${url}`);
+            await fetch(url, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({
+                    session_id: this.sessionId,
                     device_info: {
                         width: Dimensions.get('window').width,
                         height: Dimensions.get('window').height,
@@ -58,19 +61,19 @@ class MetaStreamIORecorder {
                     }
                 })
             }).then(async res => {
+                this.logger.log("recorder", "Session creation response status: " + res.status);
                 if (res.ok) {
                     const data = await res.json();
                     // Server might return its own ID, but we want to map them. 
-                    // For simplicity, we assume server respects ours or we track the mapping.
-                    // In this demo, the server generates a timestamp ID. That's fine.
                     this.recorderSessionId = data.session_id;
                     this.isRecording = true;
                     this.startLoop(viewRef);
+                    this.logger.log("recorder", "Session created successfully with ID: " + this.recorderSessionId);
                 } else {
-                    this.logger.error("recorder", "Failed to start session on recording server");
+                    this.logger.error("recorder", "Failed to start session on recording server: " + res.status);
                 }
-            }).catch(err => {
-                this.logger.error("recorder", "Connection error to recording server: " + err);
+            }).catch(e => {
+                this.logger.error("recorder", "Connection error to recording server: " + e + " to " + url);
             });
 
         } catch (err) {
@@ -99,9 +102,9 @@ class MetaStreamIORecorder {
                 // 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",
+                    format: "jpg",
                     quality: this.quality,
-                    width: 400,
+                    width: 350,
                     result: "base64"
                 });
 
@@ -151,14 +154,14 @@ class MetaStreamIORecorder {
             formData.append('is_duplicate', 'true');
         } else {
             formData.append('file', {
-                uri: 'data:image/png;base64,' + data,
-                type: 'image/png',
-                name: 'screenshot.png',
+                uri: 'data:image/jpeg;base64,' + data,
+                type: 'image/jpeg',
+                name: 'screenshot.jpg',
             });
         }
 
         try {
-            await fetch(`${this.endpoint}/apps/${this.app_id}/sessions/${this.recorderSessionId}/screenshot`, {
+            await fetch(`${this.endpoint}/api/apps/${this.app_id}/sessions/${this.recorderSessionId}/screenshot`, {
                 method: 'POST',
                 body: formData,
                 headers: {
@@ -185,7 +188,7 @@ class MetaStreamIORecorder {
         };
 
         try {
-            fetch(`${this.endpoint}/apps/${this.app_id}/sessions/${this.recorderSessionId}/events`, {
+            fetch(`${this.endpoint}/api/apps/${this.app_id}/sessions/${this.recorderSessionId}/events`, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify([event])

package/metastreamio/models/constructor.config.js

@@ -9,6 +9,9 @@ export class ConfigConstructorModel {
     silentMode = null,
     allowTrackCategories = [],
     appName = null,
+    quality = null,
+    fps = null,
+    recordingEndpoint = null,
   } = {}) {
     this.logging = logging;
     this.loggingLevel = loggingLevel;
@@ -18,7 +21,11 @@ export class ConfigConstructorModel {
     this.sessionLength = sessionLength;
     this.silentMode = silentMode;
     this.allowTrackCategories = allowTrackCategories;
+    // correctly assign appName
     this.appName = appName;
+    this.quality = quality;
+    this.fps = fps;
+    this.recordingEndpoint = recordingEndpoint;
   }
   json() {
     return {
@@ -30,6 +37,10 @@ export class ConfigConstructorModel {
       sessionLength: this.sessionLength,
       silentMode: this.silentMode,
       allowTrackCategories: this.allowTrackCategories,
+      appName: this.appName,
+      quality: this.quality,
+      fps: this.fps,
+      recordingEndpoint: this.recordingEndpoint,
     };
   }
 }

package/package.json

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