unified-video-framework 1.4.386 → 1.4.388

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

@@ -1,246 +0,0 @@
-/**
- * Canvas Video Renderer
- *
- * IMPORTANT LIMITATION:
- * This canvas-based approach does NOT prevent screenshots/recordings from showing content.
- * - Screenshots capture the canvas output (not black screen)
- * - Screen recorders capture the rendered canvas frames
- * - Only DRM provides true black screen protection
- *
- * What this DOES provide:
- * - Obfuscation layer (makes automated piracy tools slightly harder)
- * - Dynamic noise/watermarking that's harder to remove
- * - Video element is hidden (minor deterrent only)
- *
- * Use this only as an ADDITIONAL layer on top of other protections, not as primary protection.
- */
-
-export interface CanvasRendererOptions {
-  sourceVideo: HTMLVideoElement;
-  containerElement: HTMLElement;
-  watermarkText?: string;
-  enableNoise?: boolean;
-  enableDynamicTransforms?: boolean;
-}
-
-export class CanvasVideoRenderer {
-  private opts: CanvasRendererOptions;
-  private canvas: HTMLCanvasElement;
-  private ctx: CanvasRenderingContext2D;
-  private animationFrameId: number | null = null;
-  private isActive: boolean = false;
-  private noiseOffset: number = 0;
-
-  constructor(opts: CanvasRendererOptions) {
-    this.opts = opts;
-
-    // Create canvas element
-    this.canvas = document.createElement('canvas');
-    this.canvas.className = 'uvf-canvas-video-renderer';
-    this.canvas.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-      z-index: 2;
-    `;
-
-    const context = this.canvas.getContext('2d', {
-      alpha: false,
-      desynchronized: true, // Hint for better performance
-      willReadFrequently: false
-    });
-
-    if (!context) {
-      throw new Error('[CanvasRenderer] Failed to get 2D context');
-    }
-
-    this.ctx = context;
-  }
-
-  public activate(): void {
-    if (this.isActive) return;
-
-    console.log('[CanvasRenderer] Activating canvas-based video rendering...');
-    console.warn('[CanvasRenderer] WARNING: Canvas rendering does NOT prevent screenshots showing content.');
-    console.warn('[CanvasRenderer] This only adds obfuscation. Use DRM for true protection.');
-
-    // Hide the original video element
-    this.opts.sourceVideo.style.opacity = '0';
-    this.opts.sourceVideo.style.pointerEvents = 'none';
-
-    // Add canvas to container
-    this.opts.containerElement.appendChild(this.canvas);
-
-    // Set canvas dimensions to match video
-    this.updateCanvasSize();
-
-    // Start rendering loop
-    this.isActive = true;
-    this.renderFrame();
-
-    // Update canvas size on video resize
-    this.opts.sourceVideo.addEventListener('loadedmetadata', () => {
-      this.updateCanvasSize();
-    });
-
-    console.log('[CanvasRenderer] Canvas rendering active');
-  }
-
-  public deactivate(): void {
-    if (!this.isActive) return;
-
-    console.log('[CanvasRenderer] Deactivating canvas rendering...');
-
-    this.isActive = false;
-
-    // Stop animation loop
-    if (this.animationFrameId !== null) {
-      cancelAnimationFrame(this.animationFrameId);
-      this.animationFrameId = null;
-    }
-
-    // Show original video
-    this.opts.sourceVideo.style.opacity = '1';
-    this.opts.sourceVideo.style.pointerEvents = 'auto';
-
-    // Remove canvas
-    if (this.canvas.parentElement) {
-      this.canvas.parentElement.removeChild(this.canvas);
-    }
-  }
-
-  public destroy(): void {
-    this.deactivate();
-  }
-
-  private updateCanvasSize(): void {
-    const video = this.opts.sourceVideo;
-
-    // Set internal canvas resolution to match video
-    this.canvas.width = video.videoWidth || 1920;
-    this.canvas.height = video.videoHeight || 1080;
-
-    console.log(`[CanvasRenderer] Canvas size: ${this.canvas.width}x${this.canvas.height}`);
-  }
-
-  private renderFrame = (): void => {
-    if (!this.isActive) return;
-
-    const video = this.opts.sourceVideo;
-
-    // Only render if video has content and is playing
-    if (video.readyState >= video.HAVE_CURRENT_DATA) {
-      // Clear canvas
-      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-      // Apply dynamic transforms (makes automated extraction slightly harder)
-      if (this.opts.enableDynamicTransforms) {
-        this.ctx.save();
-
-        // Subtle random positioning (imperceptible to humans, confuses some bots)
-        const jitterX = Math.sin(Date.now() / 1000) * 0.5;
-        const jitterY = Math.cos(Date.now() / 1000) * 0.5;
-        this.ctx.translate(jitterX, jitterY);
-      }
-
-      // Draw video frame to canvas
-      this.ctx.drawImage(video, 0, 0, this.canvas.width, this.canvas.height);
-
-      // Apply noise layer (makes pixel-perfect extraction harder)
-      if (this.opts.enableNoise) {
-        this.applyNoiseLayer();
-      }
-
-      // Draw watermark overlay
-      if (this.opts.watermarkText) {
-        this.drawDynamicWatermark();
-      }
-
-      if (this.opts.enableDynamicTransforms) {
-        this.ctx.restore();
-      }
-    }
-
-    // Continue rendering loop
-    this.animationFrameId = requestAnimationFrame(this.renderFrame);
-  };
-
-  private applyNoiseLayer(): void {
-    // Create subtle noise that changes over time
-    const imageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
-    const data = imageData.data;
-
-    // Very subtle noise (imperceptible to humans, confuses some automated tools)
-    for (let i = 0; i < data.length; i += 4) {
-      const noise = (Math.random() - 0.5) * 2; // -1 to 1
-      data[i] += noise;     // R
-      data[i + 1] += noise; // G
-      data[i + 2] += noise; // B
-      // Alpha (i+3) unchanged
-    }
-
-    this.ctx.putImageData(imageData, 0, 0);
-  }
-
-  private drawDynamicWatermark(): void {
-    const text = this.opts.watermarkText!;
-    const fontSize = Math.floor(this.canvas.height / 30);
-
-    this.ctx.save();
-
-    // Configure text style
-    this.ctx.font = `${fontSize}px Arial, sans-serif`;
-    this.ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
-    this.ctx.strokeStyle = 'rgba(0, 0, 0, 0.3)';
-    this.ctx.lineWidth = 1;
-    this.ctx.textAlign = 'center';
-    this.ctx.textBaseline = 'middle';
-
-    // Rotating watermark (harder to crop out)
-    const time = Date.now() / 1000;
-    const positions = [
-      { x: this.canvas.width * 0.25, y: this.canvas.height * 0.25 },
-      { x: this.canvas.width * 0.75, y: this.canvas.height * 0.25 },
-      { x: this.canvas.width * 0.25, y: this.canvas.height * 0.75 },
-      { x: this.canvas.width * 0.75, y: this.canvas.height * 0.75 },
-      { x: this.canvas.width * 0.5, y: this.canvas.height * 0.5 }
-    ];
-
-    positions.forEach((pos, index) => {
-      this.ctx.save();
-      this.ctx.translate(pos.x, pos.y);
-
-      // Rotate each watermark slightly
-      const rotation = (Math.sin(time + index) * 15 * Math.PI) / 180;
-      this.ctx.rotate(rotation);
-
-      // Pulsing opacity
-      const opacity = 0.2 + Math.sin(time * 2 + index) * 0.1;
-      this.ctx.globalAlpha = opacity;
-
-      this.ctx.strokeText(text, 0, 0);
-      this.ctx.fillText(text, 0, 0);
-
-      this.ctx.restore();
-    });
-
-    this.ctx.restore();
-  }
-
-  /**
-   * Get the canvas element (for external manipulation if needed)
-   */
-  public getCanvas(): HTMLCanvasElement {
-    return this.canvas;
-  }
-
-  /**
-   * Check if rendering is active
-   */
-  public isRendering(): boolean {
-    return this.isActive;
-  }
-}

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

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