unified-video-framework 1.4.383 → 1.4.384

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

@@ -0,0 +1,246 @@
+/**
+ * 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,16 +1,20 @@
-import { ScreenCaptureEvent } from '@unified-video/core';
+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;
@@ -29,8 +33,13 @@ export class ScreenProtectionController {
     // Apply video element protection
     this.applyVideoProtection();
 
-    // Create interference overlay
-    this.createInterferenceOverlay();
+    // 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();
@@ -43,6 +52,12 @@ export class ScreenProtectionController {
 
     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);
@@ -72,6 +87,34 @@ export class ScreenProtectionController {
     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;
 
@@ -272,5 +315,77 @@ export class ScreenProtectionController {
     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);
   }
 }