@multiplayer-app/session-recorder-react-native 1.0.1-beta.2 → 1.0.1-beta.4

package/src/recorder/screenRecorder.ts

@@ -0,0 +1,549 @@
+import { type ScreenEvent, type RecorderConfig, type EventRecorder } from '../types'
+import { type eventWithTime } from '@rrweb/types'
+import { trace, SpanStatusCode } from '@opentelemetry/api'
+import { Dimensions, Platform } from 'react-native'
+import {
+  createRecordingMetaEvent,
+  createFullSnapshotEvent,
+  createIncrementalSnapshotWithImageUpdate as createIncrementalSnapshotUtil,
+  generateScreenHash,
+  logger,
+} from '../utils'
+import { screenMaskingService, type ScreenMaskingConfig } from '../services/screenMaskingService'
+import { captureRef } from 'react-native-view-shot'
+const isWeb = Platform.OS === 'web'
+
+
+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.2
+  private captureScale: number = 0.66
+  private captureFormat: 'png' | 'jpg' = 'jpg'
+  private screenDimensions: { width: number; height: number } | null = null
+  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
+  private maskingConfig?: ScreenMaskingConfig
+
+  init(config: RecorderConfig, eventRecorder?: EventRecorder): void {
+    this.config = config
+    this.eventRecorder = eventRecorder
+    this._getScreenDimensions()
+
+    // Initialize masking configuration
+    this.maskingConfig = {
+      enabled: true,
+      ...this.config.masking,
+    }
+
+    // Update the masking service configuration
+    screenMaskingService.updateConfig(this.maskingConfig)
+  }
+
+  start(): void {
+    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
+  }
+
+  stop(): void {
+    this.isRecording = false
+    this._stopPeriodicCapture()
+    // Screen recording stopped
+  }
+
+  pause(): void {
+    this.isRecording = false
+    this._stopPeriodicCapture()
+  }
+
+  resume(): void {
+    this.isRecording = true
+    // this._startPeriodicCapture()
+  }
+
+  private _getScreenDimensions(): void {
+    try {
+      this.screenDimensions = Dimensions.get('window')
+    } catch (error) {
+      // Failed to get screen dimensions - silently continue
+      this.screenDimensions = { width: 375, height: 667 } // Default fallback
+    }
+  }
+
+  private _startPeriodicCapture(): void {
+    if (this.captureInterval) {
+      clearInterval(this.captureInterval)
+    }
+
+    // Capture screen every 5 seconds (reduced frequency)
+    this.captureInterval = setInterval(() => {
+      this._captureScreen()
+    }, 5000)
+  }
+
+  private _stopPeriodicCapture(): void {
+    if (this.captureInterval) {
+      clearInterval(this.captureInterval)
+      this.captureInterval = undefined
+    }
+  }
+
+  private async _captureScreen(timestamp?: number): 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 !== null && this.lastScreenCapture) {
+            const success = this.updateScreenWithIncrementalSnapshot(base64Image, timestamp)
+            if (!success) {
+              // Fallback to full snapshot if incremental update fails
+              this._createAndEmitFullSnapshotEvent(base64Image, timestamp)
+            }
+          } else {
+            // First capture or no existing image node - create full snapshot
+            this._createAndEmitFullSnapshotEvent(base64Image, timestamp)
+          }
+
+          this.lastScreenCapture = base64Image
+          this.lastScreenHash = this._generateScreenHash(base64Image)
+          this.captureCount++
+        }
+      }
+    } catch (error) {
+      this._recordScreenCaptureError(error as Error)
+    }
+  }
+
+  private async _captureScreenBase64(): Promise<string | null> {
+    try {
+      // Check if we're on web platform
+      if (isWeb) {
+        logger.warn('ScreenRecorder', 'Screen capture not available on web platform')
+        return null
+      }
+
+      // Try native masking first if available
+      if (screenMaskingService.isScreenMaskingAvailable()) {
+        logger.info('ScreenRecorder', 'Using native masking for screen capture')
+        const maskedImage = await screenMaskingService.captureMaskedScreen({
+          quality: this.captureQuality,
+          scale: this.captureScale,
+        })
+
+        if (maskedImage) {
+          return maskedImage
+        }
+
+        logger.warn('ScreenRecorder', 'Native masking failed, falling back to view-shot')
+      }
+
+      // Fallback to react-native-view-shot
+      if (!this.viewShotRef) {
+        logger.warn('ScreenRecorder', 'ViewShot ref not available for screen capture')
+        return null
+      }
+
+      // Check if captureRef is available
+      if (!captureRef) {
+        logger.warn('ScreenRecorder', 'react-native-view-shot not available')
+        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. Make sure react-native-view-shot is properly installed and linked:', error)
+      return null
+    }
+  }
+
+  private _createAndEmitFullSnapshotEvent(base64Image: string, timestamp?: number): void {
+    if (!this.screenDimensions) return
+
+    // Use the new createFullSnapshot method
+    const fullSnapshotEvent = this.createFullSnapshot(base64Image, timestamp)
+    this.recordEvent(fullSnapshotEvent)
+  }
+
+  /**
+   * Create a full snapshot event with the given base64 image
+   * @param base64Image - Base64 encoded image data
+   * @param timestamp - Optional timestamp to use for the event
+   * @returns Full snapshot event
+   */
+  createFullSnapshot(base64Image: string, timestamp?: number): 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 },
+      timestamp,
+    )
+
+    // Store the image node ID for future incremental updates
+    // The image node ID is the first node created (after the document)
+    this.currentImageNodeId = 0 // 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 captureFormat - Image format (png, jpg, etc.)
+   * @param timestamp - Optional timestamp to use for the event
+   * @returns Incremental snapshot event with mutation data
+   */
+  createIncrementalSnapshotWithImageUpdate(base64Image: string, captureFormat?: string, timestamp?: number): eventWithTime {
+    return createIncrementalSnapshotUtil(
+      base64Image,
+      captureFormat || this.captureFormat,
+      timestamp,
+    )
+  }
+
+
+  /**
+   * Update the screen with a new image using incremental snapshot
+   * @param base64Image - New base64 encoded image data
+   * @param timestamp - Optional timestamp to use for the event
+   * @returns true if update was successful, false otherwise
+   */
+  updateScreenWithIncrementalSnapshot(base64Image: string, timestamp?: number): boolean {
+    if (this.currentImageNodeId === null) {
+      logger.warn('ScreenRecorder', 'No image node ID available for incremental update')
+      return false
+    }
+
+    const incrementalEvent = this.createIncrementalSnapshotWithImageUpdate(base64Image, 'jpg', timestamp)
+    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
+    // Send event to backend or store locally
+  }
+
+  private _recordOpenTelemetrySpan(event: ScreenEvent): void {
+    try {
+      const span = trace.getTracer('screen').startSpan(`Screen.${event.type}`, {
+        attributes: {
+          'screen.type': event.type,
+          'screen.timestamp': event.timestamp,
+          'screen.platform': 'react-native',
+        },
+      })
+
+      if (event.metadata) {
+        Object.entries(event.metadata).forEach(([key, value]) => {
+          span.setAttribute(`screen.metadata.${key}`, String(value))
+        })
+      }
+
+      span.setStatus({ code: SpanStatusCode.OK })
+      span.end()
+    } catch (error) {
+      // Failed to record OpenTelemetry span for screen - silently continue
+    }
+  }
+
+  private _recordScreenCaptureError(error: Error): void {
+    try {
+      const span = trace.getTracer('screen').startSpan('Screen.capture.error', {
+        attributes: {
+          'screen.error': true,
+          'screen.error.type': error.name,
+          'screen.error.message': error.message,
+          'screen.timestamp': Date.now(),
+        },
+      })
+
+      span.setStatus({ code: SpanStatusCode.ERROR, message: error.message })
+      span.recordException(error)
+      span.end()
+    } catch (spanError) {
+      // Failed to record error span - silently continue
+    }
+  }
+
+  async captureSpecificElement(
+    elementRef: any,
+    _options?: {
+      format?: 'png' | 'jpg' | 'webp'
+      quality?: number
+    },
+  ): Promise<string | null> {
+    try {
+      if (isWeb || !captureRef) {
+        logger.warn('ScreenRecorder', 'Element capture not available on web platform')
+        return null
+      }
+      return await captureRef(elementRef)
+    } catch (error) {
+      // Failed to capture specific element - silently continue
+      return null
+    }
+  }
+
+  // Configuration methods
+  setCaptureInterval(intervalMs: number): void {
+    if (this.captureInterval) {
+      clearInterval(this.captureInterval)
+    }
+
+    if (this.isRecording) {
+      this.captureInterval = setInterval(() => {
+        this._captureScreen()
+      }, intervalMs)
+    }
+  }
+
+  setCaptureQuality(quality: number): void {
+    this.captureQuality = Math.max(0.1, Math.min(1.0, quality))
+  }
+
+  setCaptureFormat(format: 'png' | 'jpg'): void {
+    this.captureFormat = format
+  }
+
+  setMaxCaptures(max: number): void {
+    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 = {
+      screenName,
+      type: 'screenCapture',
+      timestamp: Date.now(),
+      metadata: {
+        screenName,
+        loadTime,
+        performance: 'monitoring',
+        captureCount: this.captureCount,
+      },
+    }
+
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
+  }
+
+  // Error tracking
+  recordScreenError(error: Error, screenName?: string): void {
+    const event: ScreenEvent = {
+      screenName: screenName || 'unknown',
+      type: 'screenCapture',
+      timestamp: Date.now(),
+      metadata: {
+        error: true,
+        errorType: error.name,
+        errorMessage: error.message,
+        screenName,
+        captureCount: this.captureCount,
+      },
+    }
+
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordOpenTelemetrySpan(event)
+    this.events.push(event)
+    this._sendEvent(event)
+    this._recordScreenCaptureError(error)
+  }
+
+  // Get recorded events
+  getEvents(): ScreenEvent[] {
+    return [...this.events]
+  }
+
+  // Clear events
+  clearEvents(): void {
+    this.events = []
+    this.captureCount = 0
+  }
+
+  // Get screen capture statistics
+  getScreenStats(): Record<string, any> {
+    const stats = {
+      totalCaptures: this.captureCount,
+      totalEvents: this.events.length,
+      averageCaptureTime: 0,
+      successRate: 0,
+    }
+
+    if (this.events.length > 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
+      stats.successRate = (successfulCaptures / this.events.length) * 100
+    }
+
+    return stats
+  }
+
+  // Get recording status
+  isRecordingEnabled(): boolean {
+    return this.isRecording
+  }
+
+  // Get current configuration
+  getConfiguration(): Record<string, any> {
+    return {
+      captureInterval: this.captureInterval ? 2000 : 0, // Default 5 seconds
+      captureQuality: this.captureQuality,
+      captureFormat: this.captureFormat,
+      maxCaptures: this.maxCaptures,
+      screenDimensions: this.screenDimensions,
+    }
+  }
+
+  // Shutdown
+  shutdown(): void {
+    this.stop()
+    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
+   * @param timestamp - Optional timestamp to use for the capture event
+   */
+  forceCapture(timestamp?: number): void {
+    if (!this.isRecording) {
+      return
+    }
+
+    this._captureScreen(timestamp)
+  }
+
+  /**
+   * Record an rrweb event
+   * @param event - The rrweb event to record
+   */
+  recordEvent(event: any): void {
+    if (this.eventRecorder) {
+      this.eventRecorder.recordEvent(event)
+    }
+  }
+}