unified-video-framework 1.4.382 → 1.4.384

package/packages/web/src/drm/DRMHelper.ts

@@ -0,0 +1,203 @@
+/**
+ * DRM Helper Utility
+ *
+ * Simplifies DRM configuration for users who need maximum security (true black screen protection).
+ * This is Option B - for advanced users who can encrypt their videos and set up license servers.
+ */
+
+import { DRMConfig, DRMType } from '../../../core/dist';
+
+export interface DRMHelperOptions {
+  licenseServerUrl: string;
+  certificateUrl?: string;  // Required for FairPlay (Safari)
+  headers?: Record<string, string>;
+  preferredDRM?: 'widevine' | 'playready' | 'fairplay' | 'auto';
+}
+
+export class DRMHelper {
+  /**
+   * Detect the best DRM system for the current browser
+   */
+  static detectBestDRM(): DRMType {
+    const ua = navigator.userAgent.toLowerCase();
+
+    // Safari - use FairPlay
+    if (ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1) {
+      return DRMType.FAIRPLAY;
+    }
+
+    // Edge - prefer PlayReady, fallback to Widevine
+    if (ua.indexOf('edg') !== -1) {
+      return DRMType.PLAYREADY;
+    }
+
+    // Chrome, Firefox, Opera - use Widevine
+    return DRMType.WIDEVINE;
+  }
+
+  /**
+   * Create a simple DRM configuration
+   *
+   * @example
+   * const drmConfig = DRMHelper.createConfig({
+   *   licenseServerUrl: 'https://your-license-server.com/license',
+   *   certificateUrl: 'https://your-license-server.com/cert', // FairPlay only
+   *   headers: {
+   *     'Authorization': 'Bearer your-token'
+   *   }
+   * });
+   */
+  static createConfig(options: DRMHelperOptions): DRMConfig {
+    const preferredDRMMap: Record<string, DRMType> = {
+      'widevine': DRMType.WIDEVINE,
+      'playready': DRMType.PLAYREADY,
+      'fairplay': DRMType.FAIRPLAY
+    };
+
+    const drmType = options.preferredDRM === 'auto' || !options.preferredDRM
+      ? this.detectBestDRM()
+      : preferredDRMMap[options.preferredDRM];
+
+    return {
+      type: drmType,
+      licenseUrl: options.licenseServerUrl,
+      certificateUrl: options.certificateUrl,
+      headers: options.headers || {},
+      // Widevine security level (L1 = hardware-backed, most secure)
+      ...(drmType === DRMType.WIDEVINE && { securityLevel: 'L1' as any })
+    };
+  }
+
+  /**
+   * Check if browser supports DRM
+   */
+  static async checkDRMSupport(): Promise<{
+    widevine: boolean;
+    playready: boolean;
+    fairplay: boolean;
+    recommended: DRMType;
+  }> {
+    const keySystemMap = {
+      widevine: 'com.widevine.alpha',
+      playready: 'com.microsoft.playready',
+      fairplay: 'com.apple.fps'
+    };
+
+    const support = {
+      widevine: false,
+      playready: false,
+      fairplay: false,
+      recommended: 'widevine' as DRMType
+    };
+
+    if (!navigator.requestMediaKeySystemAccess) {
+      return support;
+    }
+
+    // Check Widevine
+    try {
+      await navigator.requestMediaKeySystemAccess(keySystemMap.widevine, [{
+        initDataTypes: ['cenc'],
+        videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.42E01E"' }]
+      }]);
+      support.widevine = true;
+    } catch (e) {}
+
+    // Check PlayReady
+    try {
+      await navigator.requestMediaKeySystemAccess(keySystemMap.playready, [{
+        initDataTypes: ['cenc'],
+        videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.42E01E"' }]
+      }]);
+      support.playready = true;
+    } catch (e) {}
+
+    // Check FairPlay
+    try {
+      await navigator.requestMediaKeySystemAccess(keySystemMap.fairplay, [{
+        initDataTypes: ['skd'],
+        videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.42E01E"' }]
+      }]);
+      support.fairplay = true;
+    } catch (e) {}
+
+    // Set recommended based on what's supported
+    support.recommended = this.detectBestDRM();
+
+    return support;
+  }
+
+  /**
+   * Validate DRM configuration
+   */
+  static validateConfig(config: DRMConfig): { valid: boolean; errors: string[] } {
+    const errors: string[] = [];
+
+    if (!config.type) {
+      errors.push('DRM type is required');
+    }
+
+    if (!config.licenseUrl) {
+      errors.push('License server URL is required');
+    }
+
+    if (config.type === 'fairplay' && !config.certificateUrl) {
+      errors.push('Certificate URL is required for FairPlay DRM');
+    }
+
+    try {
+      new URL(config.licenseUrl || '');
+    } catch (e) {
+      errors.push('License URL must be a valid URL');
+    }
+
+    return {
+      valid: errors.length === 0,
+      errors
+    };
+  }
+}
+
+/**
+ * Quick start examples for common DRM providers
+ */
+export const DRMProviderExamples = {
+  /**
+   * BuyDRM KeyOS
+   * https://www.buydrm.com/
+   */
+  BuyDRM: (customerId: string, videoId: string): DRMHelperOptions => ({
+    licenseServerUrl: `https://wv.service.expressplay.com/hms/wv/rights/?ExpressPlayToken=${customerId}`,
+    preferredDRM: 'auto'
+  }),
+
+  /**
+   * Irdeto
+   * https://irdeto.com/
+   */
+  Irdeto: (licenseUrl: string): DRMHelperOptions => ({
+    licenseServerUrl: licenseUrl,
+    preferredDRM: 'auto'
+  }),
+
+  /**
+   * Verimatrix
+   * https://www.verimatrix.com/
+   */
+  Verimatrix: (licenseUrl: string, token: string): DRMHelperOptions => ({
+    licenseServerUrl: licenseUrl,
+    headers: {
+      'Authorization': `Bearer ${token}`
+    },
+    preferredDRM: 'auto'
+  }),
+
+  /**
+   * Custom DRM server
+   */
+  Custom: (licenseUrl: string, certificateUrl?: string): DRMHelperOptions => ({
+    licenseServerUrl: licenseUrl,
+    certificateUrl: certificateUrl,
+    preferredDRM: 'auto'
+  })
+};

package/packages/web/src/index.ts

@@ -11,9 +11,6 @@ export { WebPlayer } from './WebPlayer';
 export { WebPlayerView } from './react/WebPlayerView';
 export { SecureVideoPlayer } from './SecureVideoPlayer';
 
-// Export DRM Protection
-export { WebDRMProtection } from './drm/WebDRMProtection';
-
 // Export EPG (Electronic Program Guide) components
 export * from './react/EPG';
 

package/packages/web/src/react/WebPlayerView.tsx

@@ -432,6 +432,30 @@ export type WebPlayerViewProps = {
 
   // Flash News Ticker
   flashNewsTicker?: FlashNewsTickerConfig;                                         // Flash news ticker configuration
+
+  // Screen Protection (Simple: boolean | Advanced: config object)
+  screenProtection?: boolean | {
+    enabled: boolean;
+    forensicWatermark?: {
+      userId?: string;
+      sessionId?: string;
+      invisible?: boolean;
+    };
+    canvasRendering?: {
+      enabled: boolean;
+      enableNoise?: boolean;
+      enableDynamicTransforms?: boolean;
+    };
+    aggressiveMode?: boolean;
+    onDetection?: 'warn' | 'pause' | 'degrade';
+    warningMessage?: string;
+    trackingEndpoint?: string;
+    onScreenCaptureDetected?: (event: any) => void;
+    onDevToolsDetected?: () => void;
+  };
+  // Legacy callbacks (deprecated)
+  onScreenCaptureDetected?: (event: any) => void;
+  onDevToolsDetected?: () => void;
 };
 
 export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {

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;
+  }
+}