@multiplayer-app/session-recorder-react-native 1.0.0 → 1.0.1-beta.10

package/src/recorder/screenRecorder.ts

@@ -0,0 +1,600 @@
+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?: any;
+  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);
+    }
+  }
+}