unified-video-framework 1.4.410 → 1.4.412

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

@@ -0,0 +1,246 @@
+/**
+ * Widevine DRM Handler
+ * Implements DRM for Chrome, Edge, Firefox using Encrypted Media Extensions (EME)
+ */
+
+import { IDRMHandler, WebDRMConfig, DRM_KEY_SYSTEMS, DRMError } from './types/DRMTypes';
+import { BunnyCDNDRMProvider } from './BunnyCDNDRMProvider';
+
+export class WidevineDRMHandler implements IDRMHandler {
+  private mediaKeys: MediaKeys | null = null;
+  private config: WebDRMConfig;
+  private bunnyProvider: BunnyCDNDRMProvider | null = null;
+  private videoElement: HTMLVideoElement | null = null;
+  private pendingLicenseRequests: Map<string, (license: ArrayBuffer) => void> = new Map();
+
+  constructor(config: WebDRMConfig) {
+    this.config = config;
+
+    if (config.provider === 'bunny' && config.bunny) {
+      this.bunnyProvider = new BunnyCDNDRMProvider(config.bunny);
+    }
+  }
+
+  /**
+   * Check if Widevine is supported in current browser
+   */
+  isSupported(): boolean {
+    return !!(
+      typeof navigator.requestMediaKeySystemAccess === 'function' &&
+      typeof window.MediaKeySystemAccess !== 'undefined'
+    );
+  }
+
+  /**
+   * Initialize Widevine DRM system
+   */
+  async initialize(): Promise<void> {
+    if (!this.isSupported()) {
+      throw new DRMError(
+        'Widevine DRM is not supported in this browser',
+        'WIDEVINE_NOT_SUPPORTED'
+      );
+    }
+
+    console.log('[Widevine] Initializing DRM system...');
+
+    try {
+      // Request access to Widevine key system
+      const keySystemAccess = await navigator.requestMediaKeySystemAccess(
+        DRM_KEY_SYSTEMS.WIDEVINE,
+        this.getKeySystemConfiguration()
+      );
+
+      // Create MediaKeys instance
+      this.mediaKeys = await keySystemAccess.createMediaKeys();
+
+      console.log('[Widevine] MediaKeys created successfully');
+    } catch (error) {
+      console.error('[Widevine] Failed to initialize:', error);
+      throw new DRMError(
+        'Failed to initialize Widevine DRM',
+        'WIDEVINE_INIT_ERROR',
+        error
+      );
+    }
+  }
+
+  /**
+   * Get key system configuration for Widevine
+   */
+  private getKeySystemConfiguration(): MediaKeySystemConfiguration[] {
+    return [{
+      initDataTypes: ['cenc', 'webm'],
+      audioCapabilities: [
+        { contentType: 'audio/mp4; codecs="mp4a.40.2"' },
+        { contentType: 'audio/webm; codecs="opus"' }
+      ],
+      videoCapabilities: [
+        { contentType: 'video/mp4; codecs="avc1.42E01E"' },
+        { contentType: 'video/mp4; codecs="avc1.4D401E"' },
+        { contentType: 'video/mp4; codecs="avc1.640028"' },
+        { contentType: 'video/webm; codecs="vp9"' }
+      ],
+      distinctiveIdentifier: 'optional',
+      persistentState: 'optional',
+      sessionTypes: ['temporary']
+    }];
+  }
+
+  /**
+   * Setup DRM for video element
+   */
+  async setupDRM(videoElement: HTMLVideoElement, manifestUrl: string): Promise<void> {
+    if (!this.mediaKeys) {
+      throw new DRMError('MediaKeys not initialized', 'MEDIAKEYS_NOT_INITIALIZED');
+    }
+
+    this.videoElement = videoElement;
+
+    // Attach MediaKeys to video element
+    await videoElement.setMediaKeys(this.mediaKeys);
+    console.log('[Widevine] MediaKeys attached to video element');
+
+    // Listen for encrypted events
+    videoElement.addEventListener('encrypted', this.onEncrypted.bind(this));
+  }
+
+  /**
+   * Handle 'encrypted' event from video element
+   */
+  private async onEncrypted(event: MediaEncryptedEvent): Promise<void> {
+    console.log('[Widevine] Encrypted event received:', event.initDataType);
+
+    try {
+      if (!this.mediaKeys) {
+        throw new DRMError('MediaKeys not available', 'MEDIAKEYS_NOT_AVAILABLE');
+      }
+
+      // Create media key session
+      const session = this.mediaKeys.createSession();
+
+      // Listen for message event (license request)
+      session.addEventListener('message', async (messageEvent: MediaKeyMessageEvent) => {
+        await this.onMessage(session, messageEvent);
+      });
+
+      // Generate license request
+      await session.generateRequest(event.initDataType!, event.initData!);
+      console.log('[Widevine] License request generated');
+
+    } catch (error) {
+      console.error('[Widevine] Failed to handle encrypted event:', error);
+      throw new DRMError(
+        'Failed to process encrypted media',
+        'ENCRYPTED_EVENT_ERROR',
+        error
+      );
+    }
+  }
+
+  /**
+   * Handle license request message
+   */
+  private async onMessage(
+    session: MediaKeySession,
+    event: MediaKeyMessageEvent
+  ): Promise<void> {
+    console.log('[Widevine] License request message:', event.messageType);
+
+    try {
+      // Get license from server
+      const license = await this.requestLicense(event.message);
+
+      // Update session with license
+      await session.update(license);
+      console.log('[Widevine] License applied successfully');
+
+    } catch (error) {
+      console.error('[Widevine] Failed to process license:', error);
+      throw new DRMError(
+        'Failed to process DRM license',
+        'LICENSE_REQUEST_ERROR',
+        error
+      );
+    }
+  }
+
+  /**
+   * Request license from license server
+   */
+  private async requestLicense(challenge: ArrayBuffer): Promise<ArrayBuffer> {
+    const licenseUrl = this.getLicenseUrl();
+    const headers = await this.getLicenseHeaders();
+
+    console.log('[Widevine] Requesting license from:', licenseUrl);
+
+    try {
+      const response = await fetch(licenseUrl, {
+        method: 'POST',
+        headers,
+        body: challenge
+      });
+
+      if (!response.ok) {
+        throw new Error(`License request failed: ${response.status} ${response.statusText}`);
+      }
+
+      const license = await response.arrayBuffer();
+      console.log('[Widevine] License received:', license.byteLength, 'bytes');
+
+      return license;
+
+    } catch (error) {
+      console.error('[Widevine] License request failed:', error);
+      throw new DRMError(
+        'Failed to retrieve DRM license',
+        'LICENSE_FETCH_ERROR',
+        error
+      );
+    }
+  }
+
+  /**
+   * Get license URL based on provider
+   */
+  private getLicenseUrl(): string {
+    if (this.config.provider === 'bunny' && this.bunnyProvider) {
+      return this.bunnyProvider.getWidevineLicenseUrl();
+    } else if (this.config.provider === 'generic' && this.config.generic) {
+      return this.config.generic.licenseUrl;
+    }
+    throw new DRMError('No license URL configured', 'NO_LICENSE_URL');
+  }
+
+  /**
+   * Get headers for license request
+   */
+  private async getLicenseHeaders(): Promise<Record<string, string>> {
+    if (this.config.provider === 'bunny' && this.bunnyProvider) {
+      return await this.bunnyProvider.getLicenseHeaders();
+    } else if (this.config.provider === 'generic' && this.config.generic) {
+      return this.config.generic.headers || { 'Content-Type': 'application/octet-stream' };
+    }
+    return { 'Content-Type': 'application/octet-stream' };
+  }
+
+  /**
+   * Handle license request (called by DRM manager)
+   */
+  async onLicenseRequest(licenseRequest: ArrayBuffer): Promise<ArrayBuffer> {
+    return await this.requestLicense(licenseRequest);
+  }
+
+  /**
+   * Cleanup resources
+   */
+  destroy(): void {
+    if (this.videoElement) {
+      this.videoElement.removeEventListener('encrypted', this.onEncrypted.bind(this));
+      this.videoElement = null;
+    }
+    this.mediaKeys = null;
+    this.bunnyProvider = null;
+    this.pendingLicenseRequests.clear();
+  }
+}

package/packages/web/src/drm/types/DRMTypes.ts

@@ -0,0 +1,97 @@
+/**
+ * DRM Types and Interfaces
+ * Core types for the web DRM system supporting Bunny CDN and generic DRM providers
+ */
+
+// Token provider interface - allows flexible token injection strategies
+export interface DRMTokenProvider {
+  // Get token for manifest/playlist requests
+  getManifestToken(): Promise<DRMToken | null>;
+
+  // Get token for media segment requests
+  getSegmentToken(): Promise<DRMToken | null>;
+
+  // Get token for license server requests
+  getLicenseToken(): Promise<DRMToken | null>;
+
+  // Check if token needs renewal
+  shouldRenewToken(token: DRMToken): boolean;
+
+  // Refresh/renew token
+  renewToken(token: DRMToken): Promise<DRMToken>;
+}
+
+// Token structure
+export interface DRMToken {
+  token: string;          // The actual token value
+  expires: number;        // Unix timestamp (seconds)
+  tokenVer?: string;      // Optional token version
+}
+
+// Bunny CDN specific configuration
+export interface BunnyCDNDRMConfig {
+  libraryId: string;                    // Bunny CDN library ID
+  videoId: string;                       // Video ID on Bunny CDN
+  pullZoneUrl: string;                   // e.g., "stream.example.com"
+  tokenProvider: DRMTokenProvider;       // Token provider implementation
+  certificateUrl?: string;               // Override default FairPlay certificate URL
+  licenseUrl?: string;                   // Override default license URL
+  enableReferrerProtection?: boolean;    // Enable referrer header validation
+}
+
+// Generic DRM configuration (for non-Bunny providers)
+export interface GenericDRMConfig {
+  type: 'widevine' | 'fairplay';
+  licenseUrl: string;
+  certificateUrl?: string;               // Required for FairPlay
+  headers?: Record<string, string>;      // Custom headers for license requests
+  certificateHeaders?: Record<string, string>; // Custom headers for certificate requests
+}
+
+// Unified DRM configuration
+export interface WebDRMConfig {
+  // Provider type
+  provider: 'bunny' | 'generic';
+
+  // Provider-specific config
+  bunny?: BunnyCDNDRMConfig;
+  generic?: GenericDRMConfig;
+}
+
+// DRM Handler interface (implemented by Widevine and FairPlay handlers)
+export interface IDRMHandler {
+  // Initialize DRM system
+  initialize(): Promise<void>;
+
+  // Setup DRM for video element
+  setupDRM(videoElement: HTMLVideoElement, manifestUrl: string): Promise<void>;
+
+  // Handle license requests
+  onLicenseRequest(licenseRequest: ArrayBuffer): Promise<ArrayBuffer>;
+
+  // Cleanup resources
+  destroy(): void;
+
+  // Check if DRM is supported in current browser
+  isSupported(): boolean;
+}
+
+// EME key system identifiers
+export const DRM_KEY_SYSTEMS = {
+  WIDEVINE: 'com.widevine.alpha',
+  FAIRPLAY: 'com.apple.fps.1_0',
+  PLAYREADY: 'com.microsoft.playready',
+  CLEARKEY: 'org.w3.clearkey'
+} as const;
+
+// Error types
+export class DRMError extends Error {
+  constructor(
+    message: string,
+    public code: string,
+    public details?: any
+  ) {
+    super(message);
+    this.name = 'DRMError';
+  }
+}

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

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import type { CSSProperties } from 'react';
-import type { VideoSource, SubtitleTrack, VideoMetadata, PlayerConfig } from '../../core/dist';
+import type { VideoSource, SubtitleTrack, VideoMetadata, PlayerConfig, DRMTokenProvider, DRMToken, BunnyCDNDRMConfig } from '../../core/dist';
 import { WebPlayer } from '../WebPlayer';
 import { GoogleAdsManager } from '../ads/GoogleAdsManager';
 // EPG imports - conditionally loaded
@@ -224,6 +224,26 @@ export type WebPlayerViewProps = {
   // Source config
   url: string;
   type?: 'mp4' | 'hls' | 'dash' | 'webm' | 'auto';
+
+  // DRM configuration (optional)
+  drm?: {
+    bunny?: {
+      libraryId: string;
+      videoId: string;
+      pullZoneUrl: string;
+      tokenProvider: DRMTokenProvider;
+      certificateUrl?: string;
+      licenseUrl?: string;
+      enableReferrerProtection?: boolean;
+    };
+    generic?: {
+      type: 'widevine' | 'fairplay';
+      licenseUrl: string;
+      certificateUrl?: string;
+      headers?: Record<string, string>;
+    };
+  };
+
   subtitles?: SubtitleTrack[];
   metadata?: VideoMetadata;
 
@@ -1020,6 +1040,13 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
           fallbackRetryDelay: props.fallbackRetryDelay,
           fallbackRetryAttempts: props.fallbackRetryAttempts,
           onAllSourcesFailed: props.onAllSourcesFailed,
+
+          // Pass DRM config if provided
+          drm: props.drm ? {
+            type: props.drm.bunny ? 'widevine' : (props.drm.generic?.type || 'widevine'),
+            licenseUrl: props.drm.bunny ? '' : (props.drm.generic?.licenseUrl || ''),
+            bunny: props.drm.bunny
+          } as any : undefined
         };
 
         await player.load(source);
@@ -1049,17 +1076,40 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
           // Helper function to inject ad markers
           const injectAdMarkersFromTimes = (adTimes: number[]) => {
             if (!adTimes || adTimes.length === 0) return;
-            
+
             const duration = (player as any).getDuration?.() || 0;
+
+            // If duration is available, inject immediately
             if (duration > 0) {
               const adMarkers = generateAdMarkers(adTimes, duration);
               const mergedChapters = mergeAdMarkersWithChapters(props.chapters, adMarkers, duration);
-              
+
               // Inject ad markers into the chapter system
               if (typeof (player as any).loadChapters === 'function' && mergedChapters.data) {
                 (player as any).loadChapters(mergedChapters.data);
                 console.log('✅ Ad markers injected:', adMarkers.length, 'markers at times:', adTimes);
               }
+            } else {
+              // Duration not available yet - wait for loadedmetadata event
+              console.log('⏳ Duration not available yet, waiting for metadata to inject ad markers...');
+              const videoElement = (player as any).video || (player as any).getVideoElement?.();
+              if (videoElement) {
+                const retryInject = () => {
+                  const retryDuration = (player as any).getDuration?.() || 0;
+                  if (retryDuration > 0) {
+                    const adMarkers = generateAdMarkers(adTimes, retryDuration);
+                    const mergedChapters = mergeAdMarkersWithChapters(props.chapters, adMarkers, retryDuration);
+
+                    if (typeof (player as any).loadChapters === 'function' && mergedChapters.data) {
+                      (player as any).loadChapters(mergedChapters.data);
+                      console.log('✅ Ad markers injected (after metadata):', adMarkers.length, 'markers at times:', adTimes);
+                    }
+                  } else {
+                    console.warn('⚠️ Duration still not available after metadata loaded');
+                  }
+                };
+                videoElement.addEventListener('loadedmetadata', retryInject, { once: true });
+              }
             }
           };
           
@@ -1373,7 +1423,9 @@ export const WebPlayerView: React.FC<WebPlayerViewProps> = (props) => {
 
                       // Inject markers from VMAP cue points (if midrollTimes not provided)
                       if (!props.googleAds?.midrollTimes || props.googleAds.midrollTimes.length === 0) {
+                        const currentDuration = (player as any).getDuration?.() || 0;
                         console.log('🔵 Using VMAP cue points for ad markers:', cuePoints);
+                        console.log('📊 Current video duration:', currentDuration, 'seconds');
                         injectAdMarkersFromTimes(cuePoints);
                       }
                     },