@multiplayer-app/session-recorder-react-native 0.0.1-alpha.6 → 0.0.1-alpha.8

package/src/recorder/screenRecorder.ts

@@ -1,22 +1,39 @@
-import { ScreenEvent, RecorderConfig } from '../types'
+import { ScreenEvent, RecorderConfig, EventRecorder } from '../types'
+import { eventWithTime } from '@rrweb/types'
 import { trace, SpanStatusCode } from '@opentelemetry/api'
 import { Dimensions } from 'react-native'
 import { captureRef } from 'react-native-view-shot'
-
-export class ScreenRecorder {
+import {
+  createRecordingMetaEvent,
+  createFullSnapshotEvent,
+  createIncrementalSnapshotWithImageUpdate as createIncrementalSnapshotUtil,
+  generateScreenHash,
+  logger,
+} from '../utils'
+
+export class ScreenRecorder implements EventRecorder {
   private config?: RecorderConfig
   private isRecording = false
   private events: ScreenEvent[] = []
   private captureInterval?: NodeJS.Timeout
   private captureCount: number = 0
   private maxCaptures: number = 100 // Limit captures to prevent memory issues
-  private captureQuality: number = 0.8
-  private captureFormat: 'png' | 'jpg' | 'webp' = 'png'
+  private captureQuality: number = 0.3
+  private captureFormat: 'png' | 'jpg' = 'jpg'
   private screenDimensions: { width: number; height: number } | null = null
   private currentScreen: string | null = null
-
-  init(config: RecorderConfig): void {
+  private eventRecorder?: EventRecorder
+  private nodeIdCounter: number = 1
+  private viewShotRef: any = null
+  private lastScreenCapture: string | null = null
+  private lastScreenHash: string | null = null
+  private enableChangeDetection: boolean = true
+  private hashSampleSize: number = 100
+  private currentImageNodeId: number | null = null
+
+  init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
     this.config = config
+    this.eventRecorder = eventRecorder
     this._getScreenDimensions()
   }
 
@@ -24,7 +41,19 @@ export class ScreenRecorder {
     this.isRecording = true
     this.events = []
     this.captureCount = 0
+    this.lastScreenCapture = null
+    this.lastScreenHash = null
+    this.currentImageNodeId = null // Reset image node ID for new session
+    logger.info('ScreenRecorder', 'Screen recording started')
+    // Emit screen recording started meta event
+
+    this.recordEvent(createRecordingMetaEvent())
+
     this._startPeriodicCapture()
+
+    // Capture initial screen immediately
+    this._captureScreen()
+
     // Screen recording started
   }
 
@@ -58,7 +87,7 @@ export class ScreenRecorder {
       clearInterval(this.captureInterval)
     }
 
-    // Capture screen every 5 seconds
+    // Capture screen every 5 seconds (reduced frequency)
     this.captureInterval = setInterval(() => {
       this._captureScreen()
     }, 5000)
@@ -74,9 +103,171 @@ export class ScreenRecorder {
   private async _captureScreen(): Promise<void> {
     if (!this.isRecording || this.captureCount >= this.maxCaptures) return
 
+    try {
+      const base64Image = await this._captureScreenBase64()
+
+      if (base64Image) {
+        // Check if screen has changed by comparing with previous capture
+        const hasChanged = this.enableChangeDetection ? this._hasScreenChanged(base64Image) : true
+
+        if (hasChanged) {
+          // Use incremental snapshot if we have an existing image node, otherwise create full snapshot
+          if (this.currentImageNodeId && this.lastScreenCapture) {
+            const success = this.updateScreenWithIncrementalSnapshot(base64Image)
+            if (!success) {
+              // Fallback to full snapshot if incremental update fails
+              this._createAndEmitFullSnapshotEvent(base64Image)
+            }
+          } else {
+            // First capture or no existing image node - create full snapshot
+            this._createAndEmitFullSnapshotEvent(base64Image)
+          }
+
+          this.lastScreenCapture = base64Image
+          this.lastScreenHash = this._generateScreenHash(base64Image)
+          this.captureCount++
+        }
+      }
+    } catch (error) {
+      this._recordScreenCaptureError(error as Error)
+    }
+  }
+
+  private async _captureScreenBase64(): Promise<string | null> {
+    try {
+      if (!this.viewShotRef) {
+        logger.warn('ScreenRecorder', 'ViewShot ref not available for screen capture')
+        return null
+      }
+
+      // Capture the screen using react-native-view-shot
+      const result = await captureRef(this.viewShotRef, {
+        format: this.captureFormat,
+        quality: this.captureQuality,
+        result: 'base64',
+      })
+
+      return result
+    } catch (error) {
+      logger.error('ScreenRecorder', 'Failed to capture screen', error)
+      return null
+    }
   }
 
+  private _createAndEmitFullSnapshotEvent(base64Image: string): void {
+    if (!this.screenDimensions) return
+
+    // Use the new createFullSnapshot method
+    const fullSnapshotEvent = this.createFullSnapshot(base64Image)
+    this.recordEvent(fullSnapshotEvent)
+  }
+
+  /**
+   * Create a full snapshot event with the given base64 image
+   * @param base64Image - Base64 encoded image data
+   * @returns Full snapshot event
+   */
+  createFullSnapshot(base64Image: string): eventWithTime {
+    if (!this.screenDimensions) {
+      throw new Error('Screen dimensions not available')
+    }
+
+    const { width, height } = this.screenDimensions
+    this.nodeIdCounter = 1
+
+    // Use utility function to create full snapshot event
+    const fullSnapshotEvent = createFullSnapshotEvent(
+      base64Image,
+      width,
+      height,
+      this.captureFormat,
+      { current: this.nodeIdCounter },
+    )
 
+    // Store the image node ID for future incremental updates
+    // The image node ID is the first node created (after the document)
+    this.currentImageNodeId = 2 // First element node is the image
+
+    return fullSnapshotEvent
+  }
+
+  /**
+   * Create an incremental snapshot event with mutation data to update image src
+   * @param base64Image - New base64 encoded image data
+   * @param imageNodeId - ID of the image node to update
+   * @returns Incremental snapshot event with mutation data
+   */
+  createIncrementalSnapshotWithImageUpdate(base64Image: string, imageNodeId: number): eventWithTime {
+    return createIncrementalSnapshotUtil(
+      base64Image,
+      imageNodeId,
+      this.captureFormat,
+    )
+  }
+
+  /**
+   * Get the current image node ID
+   * @returns The current image node ID or null if not set
+   */
+  getCurrentImageNodeId(): number | null {
+    return this.currentImageNodeId
+  }
+
+  /**
+   * Update the screen with a new image using incremental snapshot
+   * @param base64Image - New base64 encoded image data
+   * @returns true if update was successful, false otherwise
+   */
+  updateScreenWithIncrementalSnapshot(base64Image: string): boolean {
+    if (!this.currentImageNodeId) {
+      logger.warn('ScreenRecorder', 'No image node ID available for incremental update')
+      return false
+    }
+
+    const incrementalEvent = this.createIncrementalSnapshotWithImageUpdate(base64Image, this.currentImageNodeId)
+    this.recordEvent(incrementalEvent)
+    return true
+  }
+
+  /**
+   * Force a full snapshot (useful when screen dimensions change or for debugging)
+   * @param base64Image - Base64 encoded image data
+   */
+  forceFullSnapshot(base64Image: string): void {
+    this._createAndEmitFullSnapshotEvent(base64Image)
+    this.lastScreenCapture = base64Image
+    this.lastScreenHash = this._generateScreenHash(base64Image)
+    this.captureCount++
+  }
+
+  /**
+   * Check if the screen has changed by comparing with the previous capture
+   * @param currentBase64 - Current screen capture as base64
+   * @returns true if screen has changed, false otherwise
+   */
+  private _hasScreenChanged(currentBase64: string): boolean {
+    // If this is the first capture, consider it changed
+    if (!this.lastScreenCapture) {
+      return true
+    }
+
+    // Generate hash for current capture
+    const currentHash = this._generateScreenHash(currentBase64)
+
+    // Compare with previous hash
+    return currentHash !== this.lastScreenHash
+  }
+
+  /**
+   * Generate a simple hash for screen comparison
+   * This is a lightweight hash that focuses on the beginning and end of the base64 string
+   * to detect changes without doing a full comparison
+   * @param base64Image - Base64 encoded image
+   * @returns Hash string for comparison
+   */
+  private _generateScreenHash(base64Image: string): string {
+    return generateScreenHash(base64Image, this.hashSampleSize)
+  }
 
   private _sendEvent(event: ScreenEvent): void {
     // Screen event recorded
@@ -125,14 +316,14 @@ export class ScreenRecorder {
     }
   }
 
-
-  async captureSpecificElement(elementRef: any, options?: {
-    format?: 'png' | 'jpg' | 'webp'
-    quality?: number
-  }): Promise<string | null> {
+  async captureSpecificElement(
+    elementRef: any,
+    options?: {
+      format?: 'png' | 'jpg' | 'webp'
+      quality?: number
+    },
+  ): Promise<string | null> {
     try {
-
-
       return await captureRef(elementRef)
     } catch (error) {
       // Failed to capture specific element - silently continue
@@ -157,7 +348,7 @@ export class ScreenRecorder {
     this.captureQuality = Math.max(0.1, Math.min(1.0, quality))
   }
 
-  setCaptureFormat(format: 'png' | 'jpg' | 'webp'): void {
+  setCaptureFormat(format: 'png' | 'jpg'): void {
     this.captureFormat = format
   }
 
@@ -165,6 +356,22 @@ export class ScreenRecorder {
     this.maxCaptures = Math.max(1, max)
   }
 
+  /**
+   * Enable or disable change detection
+   * @param enabled - Whether to enable change detection
+   */
+  setChangeDetection(enabled: boolean): void {
+    this.enableChangeDetection = enabled
+  }
+
+  /**
+   * Set the hash sample size for change detection
+   * @param size - Number of characters to sample from each part of the image
+   */
+  setHashSampleSize(size: number): void {
+    this.hashSampleSize = Math.max(10, Math.min(1000, size))
+  }
+
   // Performance monitoring
   recordScreenPerformance(screenName: string, loadTime: number): void {
     const event: ScreenEvent = {
@@ -179,7 +386,9 @@ export class ScreenRecorder {
       },
     }
 
-    this.events.push(event); this._sendEvent(event); this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
     this.events.push(event)
     this._sendEvent(event)
     this._recordOpenTelemetrySpan(event)
@@ -200,7 +409,9 @@ export class ScreenRecorder {
       },
     }
 
-    this.events.push(event); this._sendEvent(event); this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
     this.events.push(event)
     this._sendEvent(event)
     this._recordScreenCaptureError(error)
@@ -227,15 +438,13 @@ export class ScreenRecorder {
     }
 
     if (this.events.length > 0) {
-      const captureTimes = this.events
-        .map(event => event.metadata?.captureTime || 0)
-        .filter(time => time > 0)
+      const captureTimes = this.events.map((event) => event.metadata?.captureTime || 0).filter((time) => time > 0)
 
       if (captureTimes.length > 0) {
         stats.averageCaptureTime = captureTimes.reduce((a, b) => a + b, 0) / captureTimes.length
       }
 
-      const successfulCaptures = this.events.filter(event => event.dataUrl).length
+      const successfulCaptures = this.events.filter((event) => event.dataUrl).length
       stats.successRate = (successfulCaptures / this.events.length) * 100
     }
 
@@ -264,4 +473,34 @@ export class ScreenRecorder {
     this.clearEvents()
     // Screen recorder shutdown
   }
+
+  /**
+   * Set the viewshot ref for screen capture
+   * @param ref - React Native View ref for screen capture
+   */
+  setViewShotRef(ref: any): void {
+    this.viewShotRef = ref
+  }
+
+  /**
+   * Force capture screen (useful after touch interactions)
+   * This bypasses the change detection and always captures
+   */
+  forceCapture(): void {
+    if (!this.isRecording) {
+      return
+    }
+
+    this._captureScreen()
+  }
+
+  /**
+   * Record an rrweb event
+   * @param event - The rrweb event to record
+   */
+  recordEvent(event: any): void {
+    if (this.eventRecorder) {
+      this.eventRecorder.recordEvent(event)
+    }
+  }
 }

package/src/services/api.service.ts

@@ -1,13 +1,5 @@
 import { SessionRecorderOptions, IResourceAttributes, ISessionAttributes } from '../types'
 
-// Type definitions for fetch API
-type RequestInit = {
-  method?: string
-  headers?: Record<string, string>
-  body?: string
-  signal?: AbortSignal
-}
-
 export interface StartSessionRequest {
   name?: string
   stoppedAt?: string | number
@@ -37,6 +29,7 @@ export class ApiService {
   }
 
   init(config: SessionRecorderOptions): void {
+
     this.config = {
       ...this.config,
       ...config,

package/src/services/storage.service.ts

@@ -87,6 +87,7 @@ export class StorageService {
   saveSessionState(state: SessionState): void {
     try {
       StorageService.cache.sessionState = state
+
       AsyncStorage.setItem(StorageService.SESSION_STATE_KEY, state).catch(error => {
         // Failed to persist session state - silently continue
       })

package/src/session-recorder.ts

@@ -1,15 +1,19 @@
 
 import { SessionType } from '@multiplayer-app/session-recorder-common'
+import { Observable } from 'lib0/observable'
 
 import { TracerReactNativeSDK } from './otel'
 import { RecorderReactNativeSDK } from './recorder'
+import { logger } from './utils'
 
 import {
   ISession,
   SessionState,
   ISessionRecorder,
   SessionRecorderConfigs,
-  SessionRecorderOptions
+  SessionRecorderOptions,
+  RRWebEvent,
+  EventRecorder
 } from './types'
 import { getFormattedDate, isSessionActive, getNavigatorInfo } from './utils'
 import { setMaxCapturingHttpPayloadSize, setShouldRecordHttpData } from './patch/xhr'
@@ -20,8 +24,11 @@ import { ApiService, StartSessionRequest, StopSessionRequest } from './services/
 
 // Utility functions for React Native
 
+type SessionRecorderEvents =
+  | 'state-change'
 
-class SessionRecorder implements ISessionRecorder {
+
+class SessionRecorder extends Observable<SessionRecorderEvents> implements ISessionRecorder, EventRecorder {
   private _isInitialized = false
   private _configs: SessionRecorderConfigs | null = null
   private _apiService = new ApiService()
@@ -61,6 +68,7 @@ class SessionRecorder implements ISessionRecorder {
   }
   set sessionState(state: SessionState | null) {
     this._sessionState = state
+    this.emit('state-change', [state || SessionState.stopped])
     if (state) {
       this._storageService.saveSessionState(state)
     }
@@ -108,14 +116,15 @@ class SessionRecorder implements ISessionRecorder {
    * Initialize debugger with default or custom configurations
    */
   constructor() {
+    super()
     // Initialize with stored session data if available
-    this._loadStoredSessionData()
+    StorageService.initialize()
   }
 
   private async _loadStoredSessionData(): Promise<void> {
     try {
+      await StorageService.initialize()
       const storedData = await this._storageService.getAllSessionData()
-
       if (isSessionActive(storedData.sessionObject, storedData.sessionType === SessionType.CONTINUOUS)) {
         this.session = storedData.sessionObject
         this.sessionId = storedData.sessionId
@@ -128,7 +137,7 @@ class SessionRecorder implements ISessionRecorder {
         this.sessionType = SessionType.PLAIN
       }
     } catch (error) {
-      console.error('Failed to load stored session data:', error)
+      logger.error('SessionRecorder', 'Failed to load stored session data', error)
       this.session = null
       this.sessionId = null
       this.sessionState = null
@@ -142,18 +151,20 @@ class SessionRecorder implements ISessionRecorder {
    */
   public async init(configs: SessionRecorderOptions): Promise<void> {
     this._configs = getSessionRecorderConfig({ ...this._configs, ...configs })
-
     this._isInitialized = true
     this._checkOperation('init')
-
-    await StorageService.initialize()
-
+    await this._loadStoredSessionData()
     setMaxCapturingHttpPayloadSize(this._configs.maxCapturingHttpPayloadSize || DEFAULT_MAX_HTTP_CAPTURING_PAYLOAD_SIZE)
     setShouldRecordHttpData(!this._configs.captureBody, this._configs.captureHeaders)
 
-    this._tracer.init(this._configs)
-    this._apiService.init(this._configs)
 
+    try {
+      this._apiService.init(this._configs)
+      this._tracer.init(this._configs)
+
+    } catch (error) {
+      logger.error('SessionRecorder', 'Failed to initialize API service', error)
+    }
     if (this._configs.apiKey) {
       this._recorder.init(this._configs)
     }
@@ -510,6 +521,81 @@ class SessionRecorder implements ISessionRecorder {
       this._session.updatedAt = new Date().toISOString()
     }
   }
+
+  /**
+   * Record a custom rrweb event
+   * Note: Screen capture and touch events are recorded automatically when session is started
+   * @param event - The rrweb event to record
+   */
+  recordEvent(event: RRWebEvent): void {
+    if (!this._isInitialized || this.sessionState !== SessionState.started) {
+      return
+    }
+
+    // Forward the event to the recorder SDK
+    this._recorder.recordEvent(event)
+  }
+
+  /**
+   * Record touch start event (internal use - touch recording is automatic)
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure
+   * @internal
+   */
+  recordTouchStart(x: number, y: number, target?: string, pressure?: number): void {
+    if (!this._isInitialized || this.sessionState !== SessionState.started) {
+      return
+    }
+
+    // Forward to gesture recorder
+    this._recorder.recordTouchStart(x, y, target, pressure)
+  }
+
+  /**
+   * Record touch move event (internal use - touch recording is automatic)
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure
+   * @internal
+   */
+  recordTouchMove(x: number, y: number, target?: string, pressure?: number): void {
+    if (!this._isInitialized || this.sessionState !== SessionState.started) {
+      return
+    }
+
+    // Forward to gesture recorder
+    this._recorder.recordTouchMove(x, y, target, pressure)
+  }
+
+  /**
+   * Record touch end event (internal use - touch recording is automatic)
+   * @param x - X coordinate
+   * @param y - Y coordinate
+   * @param target - Target element identifier
+   * @param pressure - Touch pressure
+   * @internal
+   */
+  recordTouchEnd(x: number, y: number, target?: string, pressure?: number): void {
+    if (!this._isInitialized || this.sessionState !== SessionState.started) {
+      return
+    }
+
+    // Forward to gesture recorder
+    this._recorder.recordTouchEnd(x, y, target, pressure)
+  }
+
+  /**
+   * Set the viewshot ref for screen capture
+   * @param ref - React Native View ref for screen capture
+   */
+  setViewShotRef(ref: any): void {
+    if (this._recorder) {
+      this._recorder.setViewShotRef(ref)
+    }
+  }
 }
 
 export default new SessionRecorder()

package/src/types/index.ts

@@ -1,2 +1,46 @@
 export * from './session-recorder'
-export * from './session'
+export * from './session'
+
+// Re-export rrweb types for convenience
+export { EventType, IncrementalSource, MouseInteractions as MouseInteractionType } from 'rrweb'
+export type { eventWithTime, serializedNodeWithId, mouseInteractionData, metaEvent } from '@rrweb/types'
+
+// Import types for use in this file
+import type { MouseInteractions } from 'rrweb'
+import type { eventWithTime, mouseInteractionData, metaEvent } from '@rrweb/types'
+
+// React Native specific types
+export interface TouchInteractionData {
+  type: MouseInteractions
+  id: number
+  x: number
+  y: number
+  pressure?: number
+  target?: string
+}
+
+export interface ReactNativeScreenData {
+  width: number
+  height: number
+  base64Image: string
+  timestamp: number
+  screenName?: string
+}
+
+export interface ReactNativeTouchData {
+  pageX: number
+  pageY: number
+  target?: string
+  pressure?: number
+  timestamp: number
+}
+
+// Type aliases for convenience
+export type RRWebEvent = eventWithTime
+export type MouseInteractionData = mouseInteractionData
+export type MetaEvent = metaEvent
+
+// Event recording interface
+export interface EventRecorder {
+  recordEvent(event: RRWebEvent): void
+}

package/src/utils/index.ts

@@ -4,3 +4,5 @@ export * from './session'
 export * from './time'
 export * from './type-utils'
 export * from './request-utils'
+export * from './rrweb-events'
+export * from './logger'