unified-video-framework 1.4.387 → 1.4.388

package/packages/web/src/security/ScreenProtectionController.ts

@@ -1,508 +0,0 @@
-import { ScreenCaptureEvent, EnhancedScreenProtectionConfig } from '@unified-video/core';
-import { CanvasVideoRenderer } from './CanvasVideoRenderer';
-
-export interface ScreenProtectionOptions {
-  videoElement: HTMLVideoElement;
-  containerElement: HTMLElement;
-  config: EnhancedScreenProtectionConfig;
-  watermarkConfig?: any;
-  onDetection?: (event: ScreenCaptureEvent) => void;
-  onDevToolsDetected?: () => void;
-  onPause?: () => void;  // Callback to pause video
-}
-
-export class ScreenProtectionController {
-  private opts: ScreenProtectionOptions;
-  private overlayElement: HTMLElement | null = null;
-  private blackoutOverlay: HTMLElement | null = null;
-  private blackoutTimeout: NodeJS.Timeout | null = null;
-  private canvasRenderer: CanvasVideoRenderer | null = null;
-  private detectionIntervals: NodeJS.Timeout[] = [];
-  private eventListeners: Array<{ target: any; event: string; handler: any }> = [];
-  private isActive: boolean = false;
-  private devToolsOpen: boolean = false;
-  private originalGetDisplayMedia: any = null;
-
-  constructor(opts: ScreenProtectionOptions) {
-    this.opts = opts;
-  }
-
-  public activate(): void {
-    if (this.isActive) return;
-
-    console.log('[ScreenProtectionController] Activating screen protection...');
-
-    // Apply video element protection
-    this.applyVideoProtection();
-
-    // Initialize canvas rendering if enabled
-    this.initializeCanvasRendering();
-
-    // Create interference overlay (only if not using canvas)
-    if (!this.canvasRenderer) {
-      this.createInterferenceOverlay();
-    }
-
-    // Setup behavioral detection
-    this.setupDetection();
-
-    this.isActive = true;
-  }
-
-  public deactivate(): void {
-    if (!this.isActive) return;
-
-    console.log('[ScreenProtectionController] Deactivating screen protection...');
-
-    // Deactivate canvas renderer
-    if (this.canvasRenderer) {
-      this.canvasRenderer.deactivate();
-      this.canvasRenderer = null;
-    }
-
-    // Remove overlay
-    if (this.overlayElement && this.overlayElement.parentElement) {
-      this.overlayElement.parentElement.removeChild(this.overlayElement);
-      this.overlayElement = null;
-    }
-
-    // Remove blackout overlay
-    this.removeBlackoutOverlay();
-
-    // Clear all intervals
-    this.detectionIntervals.forEach(interval => clearInterval(interval));
-    this.detectionIntervals = [];
-
-    // Remove all event listeners
-    this.eventListeners.forEach(({ target, event, handler }) => {
-      target.removeEventListener(event, handler);
-    });
-    this.eventListeners = [];
-
-    // Restore original getDisplayMedia
-    if (this.originalGetDisplayMedia && navigator.mediaDevices) {
-      navigator.mediaDevices.getDisplayMedia = this.originalGetDisplayMedia;
-      this.originalGetDisplayMedia = null;
-    }
-
-    this.isActive = false;
-  }
-
-  public destroy(): void {
-    this.deactivate();
-  }
-
-  private initializeCanvasRendering(): void {
-    // Check if canvas rendering is enabled
-    if (!this.opts.config.canvasRendering?.enabled) {
-      return;
-    }
-
-    console.log('[ScreenProtectionController] Initializing canvas-based video rendering...');
-    console.warn('[ScreenProtectionController] WARNING: Canvas rendering does NOT prevent screenshots.');
-    console.warn('[ScreenProtectionController] This only adds obfuscation. Use DRM for true protection.');
-
-    // Get watermark text
-    const watermarkText = this.opts.config.forensicWatermark?.userId
-      ? `PROTECTED - ${this.opts.config.forensicWatermark.userId}`
-      : 'PROTECTED CONTENT';
-
-    // Create canvas renderer
-    this.canvasRenderer = new CanvasVideoRenderer({
-      sourceVideo: this.opts.videoElement,
-      containerElement: this.opts.containerElement,
-      watermarkText: watermarkText,
-      enableNoise: this.opts.config.canvasRendering.enableNoise ?? true,
-      enableDynamicTransforms: this.opts.config.canvasRendering.enableDynamicTransforms ?? true
-    });
-
-    // Activate canvas rendering
-    this.canvasRenderer.activate();
-  }
-
-  private applyVideoProtection(): void {
-    const { videoElement, containerElement } = this.opts;
-
-    try {
-      // Prevent Picture-in-Picture
-      videoElement.disablePictureInPicture = true;
-      (videoElement as any).autoPictureInPicture = false;
-    } catch (e) {
-      console.warn('[ScreenProtection] Could not disable PiP:', e);
-    }
-
-    try {
-      // Set controlsList to hide download button (if supported)
-      if ('controlsList' in videoElement) {
-        (videoElement as any).controlsList.add('nodownload');
-      }
-    } catch (e) {
-      console.warn('[ScreenProtection] controlsList not supported:', e);
-    }
-
-    // Prevent text selection
-    containerElement.style.userSelect = 'none';
-    containerElement.style.webkitUserSelect = 'none';
-    (containerElement.style as any).webkitTouchCallout = 'none';
-
-    // Prevent right-click context menu
-    const contextMenuHandler = (e: Event): boolean => {
-      if (containerElement.contains(e.target as Node)) {
-        e.preventDefault();
-        e.stopPropagation();
-        return false;
-      }
-      return true;
-    };
-    document.addEventListener('contextmenu', contextMenuHandler);
-    this.eventListeners.push({ target: document, event: 'contextmenu', handler: contextMenuHandler });
-
-    console.log('[ScreenProtection] Video protection applied');
-  }
-
-  private createInterferenceOverlay(): void {
-    const { containerElement } = this.opts;
-
-    // Create transparent overlay
-    this.overlayElement = document.createElement('div');
-    this.overlayElement.className = 'uvf-screen-protection-overlay';
-    this.overlayElement.setAttribute('aria-hidden', 'true');
-
-    // Style the overlay
-    Object.assign(this.overlayElement.style, {
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none', // Don't block user interactions
-      zIndex: '3', // Between video (1) and watermark (5)
-      mixBlendMode: 'screen',
-      opacity: '0.01',
-      background: 'transparent',
-      // Add subtle noise pattern
-      backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=\'0 0 256 256\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'noise\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'4\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23noise)\' opacity=\'0.05\'/%3E%3C/svg%3E")',
-      transition: 'opacity 0.3s ease-in-out'
-    });
-
-    // Insert into container
-    const watermarkCanvas = containerElement.querySelector('.uvf-watermark-layer');
-    if (watermarkCanvas) {
-      containerElement.insertBefore(this.overlayElement, watermarkCanvas);
-    } else {
-      containerElement.appendChild(this.overlayElement);
-    }
-
-    // Start overlay animation
-    this.animateOverlay();
-
-    console.log('[ScreenProtection] Interference overlay created');
-  }
-
-  private animateOverlay(): void {
-    if (!this.overlayElement || !this.isActive) return;
-
-    // Subtle opacity pulsing
-    const baseOpacity = 0.01;
-    const variation = baseOpacity * 0.5;
-    const newOpacity = baseOpacity + (Math.random() * variation - variation / 2);
-
-    this.overlayElement.style.opacity = newOpacity.toString();
-
-    // Continue animation
-    setTimeout(() => this.animateOverlay(), 3000 + Math.random() * 2000);
-  }
-
-  private setupDetection(): void {
-    // DevTools detection
-    this.detectDevTools();
-
-    // Focus loss detection
-    this.detectFocusLoss();
-
-    // Visibility change detection
-    this.detectVisibilityChange();
-
-    // Screen Capture API detection
-    this.detectScreenCaptureAPI();
-
-    console.log('[ScreenProtection] Detection mechanisms active');
-  }
-
-  private detectDevTools(): void {
-    const threshold = 160;
-    let previousState = false;
-
-    const checkDevTools = () => {
-      if (!this.isActive) return;
-
-      const widthDiff = window.outerWidth - window.innerWidth;
-      const heightDiff = window.outerHeight - window.innerHeight;
-
-      const isOpen = widthDiff > threshold || heightDiff > threshold;
-
-      if (isOpen && !previousState) {
-        this.devToolsOpen = true;
-        this.handleDetection({
-          type: 'devtools',
-          timestamp: Date.now(),
-          details: { widthDiff, heightDiff }
-        });
-
-        if (this.opts.onDevToolsDetected) {
-          this.opts.onDevToolsDetected();
-        }
-      } else if (!isOpen && previousState) {
-        this.devToolsOpen = false;
-      }
-
-      previousState = isOpen;
-    };
-
-    const interval = setInterval(checkDevTools, 500);
-    this.detectionIntervals.push(interval);
-  }
-
-  private detectFocusLoss(): void {
-    const blurHandler = () => {
-      this.handleDetection({
-        type: 'focus-loss',
-        timestamp: Date.now(),
-        details: { documentHidden: document.hidden }
-      });
-    };
-
-    window.addEventListener('blur', blurHandler);
-    this.eventListeners.push({ target: window, event: 'blur', handler: blurHandler });
-  }
-
-  private detectVisibilityChange(): void {
-    const visibilityHandler = () => {
-      if (document.hidden) {
-        this.handleDetection({
-          type: 'visibility-change',
-          timestamp: Date.now(),
-          details: { visibilityState: document.visibilityState }
-        });
-      }
-    };
-
-    document.addEventListener('visibilitychange', visibilityHandler);
-    this.eventListeners.push({ target: document, event: 'visibilitychange', handler: visibilityHandler });
-  }
-
-  private detectScreenCaptureAPI(): void {
-    // Monkey-patch getDisplayMedia if it exists
-    if (navigator.mediaDevices && navigator.mediaDevices.getDisplayMedia) {
-      this.originalGetDisplayMedia = navigator.mediaDevices.getDisplayMedia.bind(
-        navigator.mediaDevices
-      );
-
-      const self = this;
-      navigator.mediaDevices.getDisplayMedia = async function (...args: any[]) {
-        // Detected screen capture attempt
-        self.handleDetection({
-          type: 'screen-capture-api',
-          timestamp: Date.now(),
-          details: { api: 'getDisplayMedia', args: args.length }
-        });
-
-        // Still allow the call to proceed (can't block it)
-        return self.originalGetDisplayMedia(...args);
-      };
-    }
-  }
-
-  private handleDetection(event: ScreenCaptureEvent): void {
-    console.warn('[ScreenProtection] Detection event:', event);
-
-    // Trigger callback
-    if (this.opts.onDetection) {
-      this.opts.onDetection(event);
-    }
-
-    // Send to backend tracking endpoint if configured
-    if (this.opts.config.trackingEndpoint) {
-      this.sendTrackingEvent(event);
-    }
-
-    // Execute configured action
-    const action = this.opts.config.onDetection || 'warn';
-
-    switch (action) {
-      case 'warn':
-        this.executeWarnAction();
-        break;
-      case 'pause':
-        this.executePauseAction();
-        break;
-      case 'degrade':
-        this.executeDegradeAction();
-        break;
-      case 'blackout':
-        this.executeBlackoutAction();
-        break;
-    }
-  }
-
-  private async sendTrackingEvent(event: ScreenCaptureEvent): Promise<void> {
-    try {
-      await fetch(this.opts.config.trackingEndpoint!, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json'
-        },
-        body: JSON.stringify({
-          event,
-          userAgent: navigator.userAgent,
-          timestamp: new Date().toISOString(),
-          forensicData: this.opts.config.forensicWatermark
-        })
-      });
-    } catch (error) {
-      console.error('[ScreenProtection] Failed to send tracking event:', error);
-    }
-  }
-
-  private executeWarnAction(): void {
-    const message = this.opts.config.warningMessage ||
-      'Screen recording or screenshot detected. This content is protected.';
-
-    console.warn(`[ScreenProtection] ${message}`);
-
-    // Could also show visual warning in player (future enhancement)
-  }
-
-  private executePauseAction(): void {
-    console.warn('[ScreenProtection] Pausing playback due to suspicious activity');
-
-    if (this.opts.onPause) {
-      this.opts.onPause();
-    } else {
-      this.opts.videoElement.pause();
-    }
-  }
-
-  private executeDegradeAction(): void {
-    console.warn('[ScreenProtection] Degrading video quality due to suspicious activity');
-
-    // Apply visual degradation
-    this.opts.videoElement.style.filter = 'blur(10px) brightness(0.5)';
-
-    // Restore after 5 seconds
-    setTimeout(() => {
-      if (this.opts.videoElement.style.filter) {
-        this.opts.videoElement.style.filter = '';
-      }
-    }, 5000);
-  }
-
-  private executeBlackoutAction(): void {
-    console.warn('[ScreenProtection] BLACKOUT activated - Suspicious recording activity detected');
-
-    // Pause video immediately
-    if (this.opts.onPause) {
-      this.opts.onPause();
-    } else {
-      this.opts.videoElement.pause();
-    }
-
-    // Remove existing blackout if present
-    if (this.blackoutOverlay && this.blackoutOverlay.parentElement) {
-      this.blackoutOverlay.parentElement.removeChild(this.blackoutOverlay);
-      this.blackoutOverlay = null;
-    }
-
-    // Clear existing timeout
-    if (this.blackoutTimeout) {
-      clearTimeout(this.blackoutTimeout);
-      this.blackoutTimeout = null;
-    }
-
-    // Create full-screen black overlay
-    this.blackoutOverlay = document.createElement('div');
-    this.blackoutOverlay.className = 'uvf-blackout-overlay';
-    this.blackoutOverlay.setAttribute('aria-live', 'assertive');
-    this.blackoutOverlay.setAttribute('role', 'alert');
-
-    // Style the blackout overlay
-    Object.assign(this.blackoutOverlay.style, {
-      position: 'absolute',
-      top: '0',
-      left: '0',
-      width: '100%',
-      height: '100%',
-      backgroundColor: '#000000',
-      zIndex: '9999',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      justifyContent: 'center',
-      color: '#ffffff',
-      fontFamily: 'Arial, sans-serif',
-      textAlign: 'center',
-      padding: '20px',
-      boxSizing: 'border-box'
-    });
-
-    // Warning message
-    const message = this.opts.config.warningMessage ||
-      'CONTENT PROTECTION ACTIVATED\n\nScreen recording detected.\nPlayback has been paused.';
-
-    const messageElement = document.createElement('div');
-    messageElement.style.cssText = `
-      font-size: 24px;
-      font-weight: bold;
-      margin-bottom: 20px;
-      white-space: pre-line;
-      text-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
-    `;
-    messageElement.textContent = message;
-
-    // Warning icon
-    const iconElement = document.createElement('div');
-    iconElement.style.cssText = `
-      font-size: 64px;
-      margin-bottom: 20px;
-      animation: pulse 2s infinite;
-    `;
-    iconElement.textContent = '⚠️';
-
-    // Add pulsing animation
-    const style = document.createElement('style');
-    style.textContent = `
-      @keyframes pulse {
-        0%, 100% { opacity: 1; transform: scale(1); }
-        50% { opacity: 0.7; transform: scale(1.1); }
-      }
-    `;
-    document.head.appendChild(style);
-
-    this.blackoutOverlay.appendChild(iconElement);
-    this.blackoutOverlay.appendChild(messageElement);
-
-    // Add to container
-    this.opts.containerElement.appendChild(this.blackoutOverlay);
-
-    // Auto-restore after configured duration
-    const duration = this.opts.config.blackoutDuration || 10000; // Default 10 seconds
-    this.blackoutTimeout = setTimeout(() => {
-      this.removeBlackoutOverlay();
-    }, duration);
-
-    console.warn(`[ScreenProtection] Blackout will auto-restore in ${duration / 1000} seconds`);
-  }
-
-  private removeBlackoutOverlay(): void {
-    if (this.blackoutOverlay && this.blackoutOverlay.parentElement) {
-      this.blackoutOverlay.parentElement.removeChild(this.blackoutOverlay);
-      this.blackoutOverlay = null;
-      console.log('[ScreenProtection] Blackout overlay removed');
-    }
-
-    if (this.blackoutTimeout) {
-      clearTimeout(this.blackoutTimeout);
-      this.blackoutTimeout = null;
-    }
-  }
-}