@mediafox/core 1.2.9 → 1.2.10

package/src/playback/renderers/canvas2d.ts

@@ -0,0 +1,128 @@
+import type { IRenderer, Rotation } from './types';
+
+export interface Canvas2DRendererOptions {
+  canvas: HTMLCanvasElement | OffscreenCanvas;
+  rotation?: Rotation;
+}
+
+export class Canvas2DRenderer implements IRenderer {
+  private canvas: HTMLCanvasElement | OffscreenCanvas;
+  private ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null = null;
+  private isInitialized = false;
+  private rotation: Rotation = 0;
+
+  constructor(options: Canvas2DRendererOptions) {
+    this.canvas = options.canvas;
+    this.rotation = options.rotation ?? 0;
+    this.initialize();
+  }
+
+  private initialize(): boolean {
+    try {
+      this.ctx = this.canvas.getContext('2d', {
+        alpha: false,
+        desynchronized: true,
+      }) as CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D | null;
+
+      if (!this.ctx) {
+        return false;
+      }
+
+      this.ctx.imageSmoothingEnabled = true;
+      this.ctx.imageSmoothingQuality = 'high';
+
+      this.isInitialized = true;
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  public isReady(): boolean {
+    return this.isInitialized && this.ctx !== null;
+  }
+
+  public render(source: HTMLCanvasElement | OffscreenCanvas): boolean {
+    if (!this.isReady() || !this.ctx) {
+      return false;
+    }
+
+    try {
+      const sourceWidth = source.width;
+      const sourceHeight = source.height;
+
+      if (sourceWidth === 0 || sourceHeight === 0) {
+        return false;
+      }
+
+      const canvasWidth = this.canvas.width;
+      const canvasHeight = this.canvas.height;
+
+      if (canvasWidth === 0 || canvasHeight === 0) {
+        return false;
+      }
+
+      // For 90/270 rotation, swap source dimensions for aspect ratio calculation
+      const isRotated90or270 = this.rotation === 90 || this.rotation === 270;
+      const effectiveSourceWidth = isRotated90or270 ? sourceHeight : sourceWidth;
+      const effectiveSourceHeight = isRotated90or270 ? sourceWidth : sourceHeight;
+
+      // Calculate letterbox dimensions to preserve aspect ratio
+      const scale = Math.min(canvasWidth / effectiveSourceWidth, canvasHeight / effectiveSourceHeight);
+      const destW = Math.round(effectiveSourceWidth * scale);
+      const destH = Math.round(effectiveSourceHeight * scale);
+      const dx = Math.round((canvasWidth - destW) / 2);
+      const dy = Math.round((canvasHeight - destH) / 2);
+
+      // Clear and fill with black for letterboxing
+      this.ctx.fillStyle = 'black';
+      this.ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+
+      // Save context state
+      this.ctx.save();
+
+      // Move to center of destination area
+      this.ctx.translate(dx + destW / 2, dy + destH / 2);
+
+      // Apply rotation
+      if (this.rotation !== 0) {
+        this.ctx.rotate((this.rotation * Math.PI) / 180);
+      }
+
+      // Draw the video frame (swap dimensions for 90/270 rotation)
+      if (isRotated90or270) {
+        this.ctx.drawImage(source, 0, 0, sourceWidth, sourceHeight, -destH / 2, -destW / 2, destH, destW);
+      } else {
+        this.ctx.drawImage(source, 0, 0, sourceWidth, sourceHeight, -destW / 2, -destH / 2, destW, destH);
+      }
+
+      // Restore context state
+      this.ctx.restore();
+
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  public clear(): void {
+    if (!this.isReady() || !this.ctx) {
+      return;
+    }
+    this.ctx.fillStyle = 'black';
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+  }
+
+  public setRotation(rotation: Rotation): void {
+    this.rotation = rotation;
+  }
+
+  public getRotation(): Rotation {
+    return this.rotation;
+  }
+
+  public dispose(): void {
+    this.ctx = null;
+    this.isInitialized = false;
+  }
+}

package/src/playback/renderers/factory.ts

@@ -0,0 +1,172 @@
+import { Canvas2DRenderer } from './canvas2d';
+import type { IRenderer, RendererCreationResult, RendererOptions, RendererType } from './types';
+import { WebGLRenderer } from './webgl';
+import { WebGPURenderer } from './webgpu';
+
+export class RendererFactory {
+  private canvas: HTMLCanvasElement | OffscreenCanvas;
+  private powerPreference: 'high-performance' | 'low-power';
+
+  constructor(options: RendererOptions) {
+    this.canvas = options.canvas;
+    this.powerPreference = options.powerPreference || 'high-performance';
+  }
+
+  public async createRenderer(type: RendererType): Promise<IRenderer | null> {
+    try {
+      switch (type) {
+        case 'webgpu':
+          return await this.createWebGPURenderer();
+        case 'webgl':
+          return this.createWebGLRenderer();
+        case 'canvas2d':
+          return this.createCanvas2DRenderer();
+        default:
+          return null;
+      }
+    } catch {
+      return null;
+    }
+  }
+
+  public async createRendererWithFallback(preferredType: RendererType): Promise<RendererCreationResult> {
+    // Determine fallback order based on preference
+    // Always try the preferred type first, then fall back to others
+    const fallbackOrder: RendererType[] = [preferredType];
+    if (preferredType !== 'webgl') fallbackOrder.push('webgl');
+    if (preferredType !== 'canvas2d') fallbackOrder.push('canvas2d');
+
+    for (const type of fallbackOrder) {
+      const renderer = await this.createRenderer(type);
+      if (renderer?.isReady()) {
+        return { renderer, actualType: type };
+      }
+
+      // Clean up failed renderer
+      if (renderer) {
+        renderer.dispose();
+      }
+    }
+
+    // Last resort: canvas2d always works
+    const fallbackRenderer = this.createCanvas2DRenderer();
+    return { renderer: fallbackRenderer, actualType: 'canvas2d' };
+  }
+
+  private async createWebGPURenderer(): Promise<IRenderer | null> {
+    const nav = navigator as Navigator & { gpu?: GPU };
+    if (!nav.gpu) return null;
+
+    // WebGPU only works with HTMLCanvasElement, not OffscreenCanvas
+    if (!('getContext' in this.canvas)) {
+      console.log('WebGPU requires HTMLCanvasElement, not OffscreenCanvas');
+      return null;
+    }
+
+    const renderer = new WebGPURenderer({
+      canvas: this.canvas,
+      powerPreference: this.powerPreference,
+    });
+
+    // Wait for async initialization with proper timeout
+    const timeout = 1000; // 1 second timeout
+    const startTime = performance.now();
+
+    // Create a promise that resolves when renderer is ready
+    const waitForReady = async (): Promise<boolean> => {
+      while (!renderer.isReady()) {
+        if (performance.now() - startTime > timeout) {
+          console.log('WebGPU renderer initialization timed out');
+          return false;
+        }
+        // Use requestIdleCallback if available for better performance
+        if ('requestIdleCallback' in window) {
+          await new Promise((resolve) => requestIdleCallback(() => resolve(undefined)));
+        } else {
+          await new Promise((resolve) => requestAnimationFrame(() => resolve(undefined)));
+        }
+      }
+      return true;
+    };
+
+    const ready = await waitForReady();
+    if (ready) {
+      console.log('WebGPU renderer initialized successfully');
+      return renderer;
+    }
+
+    return renderer.isReady() ? renderer : null;
+  }
+
+  private createWebGLRenderer(): IRenderer | null {
+    try {
+      const renderer = new WebGLRenderer({
+        canvas: this.canvas,
+        powerPreference: this.powerPreference,
+        preserveDrawingBuffer: false,
+        antialias: false,
+        alpha: false,
+      });
+
+      return renderer.isReady() ? renderer : null;
+    } catch {
+      return null;
+    }
+  }
+
+  private createCanvas2DRenderer(): IRenderer {
+    return new Canvas2DRenderer({ canvas: this.canvas });
+  }
+
+  /**
+   * Get all available renderer types for the current environment
+   * Returns in priority order: WebGPU, WebGL, Canvas2D
+   */
+  public static getSupportedRenderers(): RendererType[] {
+    const available: RendererType[] = [];
+
+    // Check WebGPU support (highest priority)
+    const nav = navigator as Navigator & { gpu?: GPU };
+    if (nav.gpu) {
+      available.push('webgpu');
+    }
+
+    // Check WebGL support (medium priority)
+    try {
+      const canvas = document.createElement('canvas');
+      const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+      if (gl) available.push('webgl');
+    } catch {}
+
+    // Canvas2D is always available (fallback)
+    available.push('canvas2d');
+
+    return available;
+  }
+
+  /**
+   * Get display name for renderer type
+   */
+  public static getRendererDisplayName(type: RendererType): string {
+    switch (type) {
+      case 'canvas2d':
+        return 'Canvas 2D';
+      case 'webgl':
+        return 'WebGL';
+      case 'webgpu':
+        return 'WebGPU';
+      default:
+        return 'Unknown';
+    }
+  }
+
+  /**
+   * Check if a specific renderer type is supported
+   */
+  public static isRendererSupported(type: RendererType): boolean {
+    if (type === 'canvas2d') return true;
+
+    const supported = RendererFactory.getSupportedRenderers();
+    return supported.includes(type);
+  }
+}

package/src/playback/renderers/index.ts

@@ -0,0 +1,5 @@
+export * from './canvas2d';
+export * from './factory';
+export * from './types';
+export * from './webgl';
+export * from './webgpu';

package/src/playback/renderers/types.ts

@@ -0,0 +1,57 @@
+export type RendererType = 'webgpu' | 'webgl' | 'canvas2d';
+export type Rotation = 0 | 90 | 180 | 270;
+
+/**
+ * Base interface for video renderers.
+ * All renderers must implement this interface.
+ */
+export interface IRenderer {
+  /**
+   * Check if the renderer is ready to render frames
+   */
+  isReady(): boolean;
+
+  /**
+   * Render a frame from source canvas
+   * @param source - Source canvas containing the video frame
+   * @returns true if rendering succeeded, false otherwise
+   */
+  render(source: HTMLCanvasElement | OffscreenCanvas): boolean;
+
+  /**
+   * Clear the target canvas
+   */
+  clear(): void;
+
+  /**
+   * Dispose and clean up renderer resources
+   */
+  dispose(): void;
+
+  /**
+   * Set the rotation angle for rendering
+   * @param rotation - Rotation angle in degrees (0, 90, 180, 270)
+   */
+  setRotation(rotation: Rotation): void;
+
+  /**
+   * Get the current rotation angle
+   */
+  getRotation(): Rotation;
+}
+
+/**
+ * Options for creating a renderer
+ */
+export interface RendererOptions {
+  canvas: HTMLCanvasElement | OffscreenCanvas;
+  powerPreference?: 'high-performance' | 'low-power';
+}
+
+/**
+ * Result of renderer creation with fallback
+ */
+export interface RendererCreationResult {
+  renderer: IRenderer;
+  actualType: RendererType;
+}