unified-video-framework 1.4.376 → 1.4.378

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

@@ -0,0 +1,596 @@
+/**
+ * Web DRM Protection Implementation
+ *
+ * Implements Netflix-like content protection for web browsers using:
+ * - Encrypted Media Extensions (EME)
+ * - Widevine / PlayReady DRM
+ * - Screen recording detection
+ * - Tab capture blocking
+ * - Chromecast support
+ */
+
+import {
+  IDRMProtection,
+  IDRMProtectionConfig,
+  IDRMProtectionStatus,
+  CastDevice,
+  CastDeviceType,
+  DRMError,
+  DRMErrorCode,
+  DRMKeySystemConfig,
+} from '@unified-video/core';
+
+export class WebDRMProtection implements IDRMProtection {
+  private config: IDRMProtectionConfig;
+  private videoElement: HTMLVideoElement;
+  private mediaKeys: MediaKeys | null = null;
+  private status: IDRMProtectionStatus;
+  private screenRecordingCheckInterval: number | null = null;
+  private castSession: any = null;
+  private castContext: any = null;
+
+  // Key Systems in preference order
+  private readonly KEY_SYSTEMS = {
+    widevine: 'com.widevine.alpha',
+    playready: 'com.microsoft.playready',
+    clearkey: 'org.w3.clearkey', // Fallback for testing
+  };
+
+  constructor(videoElement: HTMLVideoElement) {
+    this.videoElement = videoElement;
+    this.config = { enabled: false };
+    this.status = {
+      isProtected: false,
+      drmSystem: 'none',
+      isScreenRecordingBlocked: false,
+      isAudioCaptureBlocked: false,
+      isScreenshotBlocked: false,
+      isCasting: false,
+      screenRecordingDetected: false,
+      mirroringDetected: false,
+    };
+  }
+
+  /**
+   * Initialize DRM protection
+   */
+  async initialize(config: IDRMProtectionConfig): Promise<void> {
+    this.config = {
+      blockScreenRecording: true,
+      blockAudioCapture: true,
+      blockScreenshots: true,
+      allowCasting: true,
+      blockMirroring: true,
+      widevineSecurityLevel: 'L1',
+      ...config,
+    };
+
+    if (!this.config.enabled) {
+      console.log('[DRM] Protection disabled by configuration');
+      return;
+    }
+
+    console.log('[DRM] Initializing web DRM protection...', this.config);
+
+    try {
+      // Check if EME is supported
+      if (!this.isEMESupported()) {
+        throw this.createError(
+          DRMErrorCode.DEVICE_NOT_SUPPORTED,
+          'Encrypted Media Extensions (EME) not supported'
+        );
+      }
+
+      // Initialize DRM key system
+      if (this.config.licenseServerUrl) {
+        await this.initializeDRMKeySystem();
+      }
+
+      // Start screen recording detection
+      if (this.config.blockScreenRecording) {
+        this.startScreenRecordingDetection();
+      }
+
+      // Initialize casting support
+      if (this.config.allowCasting) {
+        await this.initializeCastSupport();
+      }
+
+      // Block screenshot capture
+      if (this.config.blockScreenshots) {
+        this.blockScreenshots();
+      }
+
+      // Prevent tab capture
+      if (this.config.blockMirroring) {
+        this.preventTabCapture();
+      }
+
+      this.status.isProtected = true;
+      console.log('[DRM] Protection initialized successfully');
+    } catch (error) {
+      console.error('[DRM] Initialization failed:', error);
+      this.config.onDRMError?.(error as DRMError);
+      throw error;
+    }
+  }
+
+  /**
+   * Check if EME is supported
+   */
+  private isEMESupported(): boolean {
+    return !!(
+      window.navigator &&
+      (window.navigator as any).requestMediaKeySystemAccess &&
+      window.MediaKeys
+    );
+  }
+
+  /**
+   * Initialize DRM Key System (Widevine/PlayReady)
+   */
+  private async initializeDRMKeySystem(): Promise<void> {
+    console.log('[DRM] Initializing key system...');
+
+    // Try Widevine first, then PlayReady
+    const keySystemConfigs: DRMKeySystemConfig[] = [
+      {
+        keySystem: this.KEY_SYSTEMS.widevine,
+        licenseServerUrl: this.config.licenseServerUrl!,
+        certificateUrl: this.config.certificateUrl,
+        headers: this.config.licenseHeaders,
+        // Widevine robustness levels
+        videoRobustness: this.config.widevineSecurityLevel === 'L1' ? 'HW_SECURE_ALL' : 'SW_SECURE_CRYPTO',
+        audioRobustness: this.config.widevineSecurityLevel === 'L1' ? 'HW_SECURE_ALL' : 'SW_SECURE_CRYPTO',
+        persistentState: 'optional',
+        distinctiveIdentifier: 'optional',
+      },
+      {
+        keySystem: this.KEY_SYSTEMS.playready,
+        licenseServerUrl: this.config.licenseServerUrl!,
+        headers: this.config.licenseHeaders,
+        videoRobustness: '3000', // PlayReady SL3000
+        audioRobustness: '3000',
+        persistentState: 'optional',
+        distinctiveIdentifier: 'optional',
+      },
+    ];
+
+    for (const config of keySystemConfigs) {
+      try {
+        await this.requestMediaKeySystemAccess(config);
+        console.log(`[DRM] Successfully initialized ${config.keySystem}`);
+        return;
+      } catch (error) {
+        console.warn(`[DRM] ${config.keySystem} not available:`, error);
+      }
+    }
+
+    throw this.createError(
+      DRMErrorCode.WIDEVINE_NOT_AVAILABLE,
+      'No supported DRM system available (tried Widevine and PlayReady)'
+    );
+  }
+
+  /**
+   * Request Media Key System Access
+   */
+  private async requestMediaKeySystemAccess(config: DRMKeySystemConfig): Promise<void> {
+    const keySystemConfig = [
+      {
+        initDataTypes: ['cenc', 'keyids', 'webm'],
+        audioCapabilities: [
+          {
+            contentType: 'audio/mp4; codecs="mp4a.40.2"',
+            robustness: config.audioRobustness || '',
+          },
+        ],
+        videoCapabilities: [
+          {
+            contentType: 'video/mp4; codecs="avc1.42E01E"',
+            robustness: config.videoRobustness || '',
+          },
+          {
+            contentType: 'video/webm; codecs="vp9"',
+            robustness: config.videoRobustness || '',
+          },
+        ],
+        distinctiveIdentifier: config.distinctiveIdentifier || 'optional',
+        persistentState: config.persistentState || 'optional',
+      },
+    ];
+
+    const keySystemAccess = await navigator.requestMediaKeySystemAccess(
+      config.keySystem,
+      keySystemConfig
+    );
+
+    this.mediaKeys = await keySystemAccess.createMediaKeys();
+    await this.videoElement.setMediaKeys(this.mediaKeys);
+
+    // Set up license acquisition
+    this.setupLicenseAcquisition(config);
+
+    // Update status
+    if (config.keySystem === this.KEY_SYSTEMS.widevine) {
+      this.status.drmSystem = 'widevine';
+      this.status.securityLevel = config.videoRobustness === 'HW_SECURE_ALL' ? 'L1' : 'L3';
+    } else if (config.keySystem === this.KEY_SYSTEMS.playready) {
+      this.status.drmSystem = 'playready';
+    }
+  }
+
+  /**
+   * Setup license acquisition from license server
+   */
+  private setupLicenseAcquisition(config: DRMKeySystemConfig): void {
+    this.videoElement.addEventListener('encrypted', async (event: any) => {
+      console.log('[DRM] Encrypted event received, requesting license...');
+
+      try {
+        if (!this.mediaKeys) {
+          throw new Error('MediaKeys not initialized');
+        }
+
+        const session = this.mediaKeys.createSession();
+
+        // Listen for license messages
+        session.addEventListener('message', async (messageEvent: any) => {
+          console.log('[DRM] License request message received');
+
+          try {
+            const response = await fetch(config.licenseServerUrl, {
+              method: 'POST',
+              headers: {
+                'Content-Type': 'application/octet-stream',
+                ...config.headers,
+              },
+              body: messageEvent.message,
+            });
+
+            if (!response.ok) {
+              throw this.createError(
+                DRMErrorCode.LICENSE_REQUEST_FAILED,
+                `License server returned ${response.status}`
+              );
+            }
+
+            const license = await response.arrayBuffer();
+            await session.update(license);
+
+            console.log('[DRM] License acquired successfully');
+            this.config.onLicenseAcquired?.();
+          } catch (error) {
+            console.error('[DRM] License acquisition failed:', error);
+            this.config.onDRMError?.(error as DRMError);
+          }
+        });
+
+        // Generate license request
+        await session.generateRequest(event.initDataType, event.initData);
+      } catch (error) {
+        console.error('[DRM] Failed to generate license request:', error);
+        this.config.onDRMError?.(error as DRMError);
+      }
+    });
+  }
+
+  /**
+   * Start screen recording detection
+   * Uses multiple detection methods
+   */
+  private startScreenRecordingDetection(): void {
+    console.log('[DRM] Starting screen recording detection...');
+
+    // Method 1: getDisplayMedia API detection
+    this.detectGetDisplayMedia();
+
+    // Method 2: Canvas fingerprinting detection
+    this.detectCanvasCapture();
+
+    // Method 3: Tab capture detection (Chrome)
+    this.detectTabCapture();
+
+    // Method 4: Periodic frame analysis
+    this.screenRecordingCheckInterval = window.setInterval(() => {
+      this.analyzeScreenRecordingSignals();
+    }, 1000);
+
+    this.status.isScreenRecordingBlocked = true;
+  }
+
+  /**
+   * Detect getDisplayMedia screen capture
+   */
+  private detectGetDisplayMedia(): void {
+    if (!navigator.mediaDevices || !navigator.mediaDevices.getDisplayMedia) {
+      return;
+    }
+
+    // Override getDisplayMedia to detect screen capture attempts
+    const originalGetDisplayMedia = navigator.mediaDevices.getDisplayMedia.bind(
+      navigator.mediaDevices
+    );
+
+    navigator.mediaDevices.getDisplayMedia = async function (constraints?: any) {
+      console.warn('[DRM] Screen capture attempt detected via getDisplayMedia');
+      // Block the request or notify
+      throw new DOMException('Screen capture blocked by DRM protection', 'NotAllowedError');
+    };
+  }
+
+  /**
+   * Detect canvas-based capture
+   */
+  private detectCanvasCapture(): void {
+    // Monitor canvas operations on the video
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'childList') {
+          mutation.addedNodes.forEach((node) => {
+            if (node.nodeName === 'CANVAS') {
+              console.warn('[DRM] Canvas element detected - potential screen capture');
+              this.handleScreenRecordingDetected();
+            }
+          });
+        }
+      });
+    });
+
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  }
+
+  /**
+   * Detect tab capture (Chrome-specific)
+   */
+  private detectTabCapture(): void {
+    // Chrome exposes tab capture status
+    if ('mediaSession' in navigator) {
+      document.addEventListener('visibilitychange', () => {
+        if (document.hidden) {
+          console.log('[DRM] Tab hidden - checking for capture...');
+        }
+      });
+    }
+  }
+
+  /**
+   * Analyze various signals for screen recording
+   */
+  private analyzeScreenRecordingSignals(): void {
+    // Check if video is playing in background tab
+    if (document.hidden && !this.videoElement.paused) {
+      console.warn('[DRM] Video playing in hidden tab - possible screen recording');
+    }
+
+    // Check for unusual video element states
+    if ((this.videoElement as any).captureStream) {
+      console.warn('[DRM] captureStream API available - monitoring...');
+    }
+  }
+
+  /**
+   * Handle screen recording detection
+   */
+  private handleScreenRecordingDetected(): void {
+    console.error('[DRM] ⚠️ SCREEN RECORDING DETECTED!');
+    this.status.screenRecordingDetected = true;
+
+    // Black out video
+    this.videoElement.style.filter = 'brightness(0)';
+    this.videoElement.pause();
+
+    // Notify callback
+    this.config.onScreenRecordingDetected?.();
+
+    // Show warning overlay
+    this.showProtectionWarning('Screen recording detected. Playback blocked.');
+  }
+
+  /**
+   * Block screenshots
+   */
+  private blockScreenshots(): void {
+    // CSS-based screenshot prevention
+    this.videoElement.style.webkitUserSelect = 'none';
+    this.videoElement.style.userSelect = 'none';
+    this.videoElement.setAttribute('oncontextmenu', 'return false');
+
+    // Prevent drag-and-drop
+    this.videoElement.addEventListener('dragstart', (e) => e.preventDefault());
+
+    // Detect PrintScreen key
+    document.addEventListener('keyup', (e) => {
+      if (e.key === 'PrintScreen') {
+        console.warn('[DRM] Screenshot attempt detected (PrintScreen key)');
+        this.config.onScreenshotAttempted?.();
+      }
+    });
+
+    this.status.isScreenshotBlocked = true;
+    console.log('[DRM] Screenshot blocking enabled');
+  }
+
+  /**
+   * Prevent tab capture and mirroring
+   */
+  private preventTabCapture(): void {
+    // Detect mirroring via multiple screens
+    if (window.screen && (window.screen as any).isExtended) {
+      console.warn('[DRM] Extended display detected');
+      this.status.mirroringDetected = true;
+      this.config.onMirroringDetected?.();
+    }
+
+    // Monitor presentation API
+    if ('presentation' in navigator) {
+      console.log('[DRM] Monitoring presentation API for mirroring...');
+    }
+  }
+
+  /**
+   * Initialize Chromecast support
+   */
+  private async initializeCastSupport(): Promise<void> {
+    if (!(window as any).chrome || !(window as any).chrome.cast) {
+      console.warn('[DRM] Google Cast API not available');
+      return;
+    }
+
+    console.log('[DRM] Initializing Chromecast support...');
+
+    // Load Cast SDK
+    const script = document.createElement('script');
+    script.src = 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1';
+    document.head.appendChild(script);
+
+    await new Promise((resolve) => {
+      script.onload = resolve;
+    });
+
+    // Initialize Cast API
+    (window as any).__onGCastApiAvailable = (isAvailable: boolean) => {
+      if (isAvailable) {
+        this.castContext = (window as any).cast.framework.CastContext.getInstance();
+        this.castContext.setOptions({
+          receiverApplicationId: (window as any).chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID,
+          autoJoinPolicy: (window as any).chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED,
+        });
+
+        console.log('[DRM] Chromecast initialized');
+      }
+    };
+  }
+
+  /**
+   * Get current protection status
+   */
+  getStatus(): IDRMProtectionStatus {
+    return { ...this.status };
+  }
+
+  /**
+   * Enable/disable DRM protection
+   */
+  setEnabled(enabled: boolean): void {
+    this.config.enabled = enabled;
+    if (!enabled) {
+      this.dispose();
+    }
+  }
+
+  /**
+   * Enable/disable specific feature
+   */
+  setFeature(feature: keyof IDRMProtectionConfig, enabled: boolean): void {
+    (this.config as any)[feature] = enabled;
+
+    // Re-apply feature if changing during playback
+    switch (feature) {
+      case 'blockScreenRecording':
+        if (enabled) {
+          this.startScreenRecordingDetection();
+        } else if (this.screenRecordingCheckInterval) {
+          clearInterval(this.screenRecordingCheckInterval);
+        }
+        break;
+      case 'blockScreenshots':
+        this.status.isScreenshotBlocked = enabled;
+        break;
+    }
+  }
+
+  /**
+   * Start casting
+   */
+  async startCasting(deviceId: string): Promise<void> {
+    if (!this.castContext) {
+      throw new Error('Cast not initialized');
+    }
+
+    // Cast implementation
+    console.log('[DRM] Starting cast to device:', deviceId);
+    this.status.isCasting = true;
+  }
+
+  /**
+   * Stop casting
+   */
+  async stopCasting(): Promise<void> {
+    if (this.castSession) {
+      this.castSession.endSession(true);
+      this.castSession = null;
+    }
+    this.status.isCasting = false;
+  }
+
+  /**
+   * Get available cast devices
+   */
+  async getAvailableCastDevices(): Promise<CastDevice[]> {
+    // Return available Chromecast devices
+    return [];
+  }
+
+  /**
+   * Renew DRM license
+   */
+  async renewLicense(): Promise<void> {
+    console.log('[DRM] Renewing license...');
+    // Re-trigger license acquisition
+  }
+
+  /**
+   * Show protection warning overlay
+   */
+  private showProtectionWarning(message: string): void {
+    const overlay = document.createElement('div');
+    overlay.style.cssText = `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: #000;
+      color: #fff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+      z-index: 9999999;
+    `;
+    overlay.textContent = message;
+    this.videoElement.parentElement?.appendChild(overlay);
+  }
+
+  /**
+   * Create DRM error
+   */
+  private createError(code: DRMErrorCode, message: string): DRMError {
+    return {
+      code,
+      message,
+      platform: 'web',
+      recoverable: false,
+    };
+  }
+
+  /**
+   * Cleanup resources
+   */
+  dispose(): void {
+    if (this.screenRecordingCheckInterval) {
+      clearInterval(this.screenRecordingCheckInterval);
+    }
+
+    if (this.castSession) {
+      this.stopCasting();
+    }
+
+    this.status.isProtected = false;
+    console.log('[DRM] Protection disposed');
+  }
+}

package/packages/web/src/index.ts

@@ -11,6 +11,9 @@ 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

@@ -534,45 +534,6 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
   const adContainerRef = useRef<HTMLDivElement | null>(null);
   const [isAdPlaying, setIsAdPlaying] = useState(false);
 
-  // Create ad container element programmatically
-  useEffect(() => {
-    if (!props.googleAds || adContainerRef.current) return;
-
-    const adContainer = document.createElement('div');
-    adContainer.className = 'uvf-ad-container';
-    adContainer.style.cssText = `
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      z-index: 999999999;
-      pointer-events: none;
-      visibility: hidden;
-      opacity: 0;
-      transition: opacity 0.2s ease, visibility 0.2s ease;
-    `;
-
-    adContainerRef.current = adContainer;
-    console.log('✅ Ad container element created (will be injected into player wrapper)');
-
-    return () => {
-      // Cleanup: remove ad container on unmount
-      if (adContainer.parentElement) {
-        adContainer.parentElement.removeChild(adContainer);
-      }
-    };
-  }, [props.googleAds]);
-
-  // Update ad container visibility when isAdPlaying changes
-  useEffect(() => {
-    if (!adContainerRef.current) return;
-
-    adContainerRef.current.style.pointerEvents = isAdPlaying ? 'auto' : 'none';
-    adContainerRef.current.style.visibility = isAdPlaying ? 'visible' : 'hidden';
-    adContainerRef.current.style.opacity = isAdPlaying ? '1' : '0';
-  }, [isAdPlaying]);
-
   /**
    * Generate ad chapter segments from googleAds cue points
    * Handles pre-roll (0), mid-rolls, and post-roll (-1)
@@ -1287,21 +1248,9 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
                   return;
                 }
 
-                // First, inject ad container into player wrapper before initializing Google Ads
-                const playerWrapper = containerRef.current?.querySelector('.uvf-player-wrapper');
-                if (playerWrapper) {
-                  // Add ad container to player wrapper
-                  playerWrapper.appendChild(adContainer);
-                  console.log('✅ Ad container injected into player wrapper before IMA SDK initialization');
-                } else {
-                  console.error('❌ Player wrapper not found - cannot inject ad container');
-                  return;
-                }
-
                 console.log('✅ Initializing Google Ads...', {
                   adContainer: adContainer.className,
                   videoElement: videoElement.tagName,
-                  adContainerParent: adContainer.parentElement?.className,
                   adContainerInDOM: document.body.contains(adContainer)
                 });
 
@@ -1359,6 +1308,14 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
 
                 console.log('✅ Google Ads initialized successfully');
 
+                // Move ad container into player wrapper for fullscreen support
+                const playerWrapper = containerRef.current?.querySelector('.uvf-player-wrapper');
+                if (playerWrapper && adContainerRef.current && adContainerRef.current.parentElement) {
+                  // Move ad container from player-container to player-wrapper
+                  playerWrapper.appendChild(adContainerRef.current);
+                  console.log('✅ Ad container moved into player wrapper for fullscreen support');
+                }
+
                 // Initialize ad display container on first user interaction
                 // Chrome requires this to be called on a user gesture
                 let adContainerInitialized = false;
@@ -1731,7 +1688,25 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
         style={responsiveStyle}
       />
 
-      {/* Ad container will be programmatically injected into player wrapper */}
+      {/* Google Ads Container - positioned over the video player */}
+      {props.googleAds && (
+        <div
+          ref={adContainerRef}
+          className="uvf-ad-container"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999999999,
+            pointerEvents: isAdPlaying ? 'auto' : 'none',
+            visibility: isAdPlaying ? 'visible' : 'hidden',
+            opacity: isAdPlaying ? 1 : 0,
+            transition: 'opacity 0.2s ease, visibility 0.2s ease',
+          }}
+        />
+      )}
 
 
       {/* EPG Overlay - Full-screen glassmorphic overlay */}