unified-video-framework 1.4.382 → 1.4.384

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

@@ -0,0 +1,391 @@
+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 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;
+    }
+
+    // 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;
+    }
+  }
+
+  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);
+  }
+}

package/scripts/fix-imports.js

@@ -10,21 +10,22 @@ const path = require('path');
 
 function fixImports(filePath) {
   let content = fs.readFileSync(filePath, 'utf8');
-
-  // Fix core imports - remove .js extension for webpack compatibility
+  
+  // Replace @unified-video/core imports with relative paths
   if (filePath.includes(path.join('packages', 'web', 'dist'))) {
-    // Remove .js extension from ALL core imports (webpack can't resolve them in node_modules)
+    // Fix CommonJS require statements
     content = content.replace(
-      /from\s+["']\.\.\/\.\.\/core\/dist\/([^"']+)\.js["']/g,
-      'from "../../core/dist/$1"'
+      /require\(["']@unified-video\/core["']\)/g,
+      'require("../../core/dist")'
     );
+    // Fix ES module import statements
     content = content.replace(
-      /import\s+["']\.\.\/\.\.\/core\/dist\/([^"']+)\.js["']/g,
-      'import "../../core/dist/$1"'
+      /from\s+["']@unified-video\/core["']/g,
+      'from "../../core/dist/index.js"'
     );
     content = content.replace(
-      /export\s+\*\s+from\s+["']\.\.\/\.\.\/core\/dist\/([^"']+)\.js["']/g,
-      'export * from "../../core/dist/$1"'
+      /import\s+["']@unified-video\/core["']/g,
+      'import "../../core/dist/index.js"'
     );
     
     // Fix relative imports within the same package to include .js extension
@@ -42,18 +43,19 @@ function fixImports(filePath) {
       }
     );
   } else if (filePath.includes(path.join('packages', 'react-native', 'dist'))) {
-    // Remove .js extension from ALL core imports
+    // Fix CommonJS require statements
     content = content.replace(
-      /from\s+["']\.\.\/\.\.\/core\/dist\/([^"']+)\.js["']/g,
-      'from "../../core/dist/$1"'
+      /require\(["']@unified-video\/core["']\)/g,
+      'require("../../core/dist")'
     );
+    // Fix ES module import statements
     content = content.replace(
-      /import\s+["']\.\.\/\.\.\/core\/dist\/([^"']+)\.js["']/g,
-      'import "../../core/dist/$1"'
+      /from\s+["']@unified-video\/core["']/g,
+      'from "../../core/dist/index.js"'
     );
     content = content.replace(
-      /export\s+\*\s+from\s+["']\.\.\/\.\.\/core\/dist\/([^"']+)\.js["']/g,
-      'export * from "../../core/dist/$1"'
+      /import\s+["']@unified-video\/core["']/g,
+      'import "../../core/dist/index.js"'
     );
     
     // Fix relative imports within the same package to include .js extension