webcodecs-utils 0.2.4 → 0.2.6

package/dist/video/get-codec-string.js

@@ -0,0 +1,195 @@
+function s(a, m, c, o) {
+  const S = [
+    { maxMacroblocks: 99, maxBitrate: 64e3, level: 10 },
+    // Level 1
+    { maxMacroblocks: 396, maxBitrate: 192e3, level: 11 },
+    // Level 1.1
+    { maxMacroblocks: 396, maxBitrate: 384e3, level: 12 },
+    // Level 1.2
+    { maxMacroblocks: 396, maxBitrate: 768e3, level: 13 },
+    // Level 1.3
+    { maxMacroblocks: 396, maxBitrate: 2e6, level: 20 },
+    // Level 2
+    { maxMacroblocks: 792, maxBitrate: 4e6, level: 21 },
+    // Level 2.1
+    { maxMacroblocks: 1620, maxBitrate: 4e6, level: 22 },
+    // Level 2.2
+    { maxMacroblocks: 1620, maxBitrate: 1e7, level: 30 },
+    // Level 3
+    { maxMacroblocks: 3600, maxBitrate: 14e6, level: 31 },
+    // Level 3.1
+    { maxMacroblocks: 5120, maxBitrate: 2e7, level: 32 },
+    // Level 3.2
+    { maxMacroblocks: 8192, maxBitrate: 2e7, level: 40 },
+    // Level 4
+    { maxMacroblocks: 8192, maxBitrate: 5e7, level: 41 },
+    // Level 4.1
+    { maxMacroblocks: 8704, maxBitrate: 5e7, level: 42 },
+    // Level 4.2
+    { maxMacroblocks: 22080, maxBitrate: 135e6, level: 50 },
+    // Level 5
+    { maxMacroblocks: 36864, maxBitrate: 24e7, level: 51 },
+    // Level 5.1
+    { maxMacroblocks: 36864, maxBitrate: 24e7, level: 52 },
+    // Level 5.2
+    { maxMacroblocks: 139264, maxBitrate: 24e7, level: 60 },
+    // Level 6
+    { maxMacroblocks: 139264, maxBitrate: 48e7, level: 61 },
+    // Level 6.1
+    { maxMacroblocks: 139264, maxBitrate: 8e8, level: 62 }
+    // Level 6.2
+  ], u = [
+    { maxPictureSize: 36864, maxBitrate: 128e3, tier: "L", level: 30 },
+    // Level 1 (Low Tier)
+    { maxPictureSize: 122880, maxBitrate: 15e5, tier: "L", level: 60 },
+    // Level 2 (Low Tier)
+    { maxPictureSize: 245760, maxBitrate: 3e6, tier: "L", level: 63 },
+    // Level 2.1 (Low Tier)
+    { maxPictureSize: 552960, maxBitrate: 6e6, tier: "L", level: 90 },
+    // Level 3 (Low Tier)
+    { maxPictureSize: 983040, maxBitrate: 1e7, tier: "L", level: 93 },
+    // Level 3.1 (Low Tier)
+    { maxPictureSize: 2228224, maxBitrate: 12e6, tier: "L", level: 120 },
+    // Level 4 (Low Tier)
+    { maxPictureSize: 2228224, maxBitrate: 3e7, tier: "H", level: 120 },
+    // Level 4 (High Tier)
+    { maxPictureSize: 2228224, maxBitrate: 2e7, tier: "L", level: 123 },
+    // Level 4.1 (Low Tier)
+    { maxPictureSize: 2228224, maxBitrate: 5e7, tier: "H", level: 123 },
+    // Level 4.1 (High Tier)
+    { maxPictureSize: 8912896, maxBitrate: 25e6, tier: "L", level: 150 },
+    // Level 5 (Low Tier)
+    { maxPictureSize: 8912896, maxBitrate: 1e8, tier: "H", level: 150 },
+    // Level 5 (High Tier)
+    { maxPictureSize: 8912896, maxBitrate: 4e7, tier: "L", level: 153 },
+    // Level 5.1 (Low Tier)
+    { maxPictureSize: 8912896, maxBitrate: 16e7, tier: "H", level: 153 },
+    // Level 5.1 (High Tier)
+    { maxPictureSize: 8912896, maxBitrate: 6e7, tier: "L", level: 156 },
+    // Level 5.2 (Low Tier)
+    { maxPictureSize: 8912896, maxBitrate: 24e7, tier: "H", level: 156 },
+    // Level 5.2 (High Tier)
+    { maxPictureSize: 35651584, maxBitrate: 6e7, tier: "L", level: 180 },
+    // Level 6 (Low Tier)
+    { maxPictureSize: 35651584, maxBitrate: 24e7, tier: "H", level: 180 },
+    // Level 6 (High Tier)
+    { maxPictureSize: 35651584, maxBitrate: 12e7, tier: "L", level: 183 },
+    // Level 6.1 (Low Tier)
+    { maxPictureSize: 35651584, maxBitrate: 48e7, tier: "H", level: 183 },
+    // Level 6.1 (High Tier)
+    { maxPictureSize: 35651584, maxBitrate: 24e7, tier: "L", level: 186 },
+    // Level 6.2 (Low Tier)
+    { maxPictureSize: 35651584, maxBitrate: 8e8, tier: "H", level: 186 }
+    // Level 6.2 (High Tier)
+  ], n = [
+    { maxPictureSize: 36864, maxBitrate: 2e5, level: 10 },
+    // Level 1
+    { maxPictureSize: 73728, maxBitrate: 8e5, level: 11 },
+    // Level 1.1
+    { maxPictureSize: 122880, maxBitrate: 18e5, level: 20 },
+    // Level 2
+    { maxPictureSize: 245760, maxBitrate: 36e5, level: 21 },
+    // Level 2.1
+    { maxPictureSize: 552960, maxBitrate: 72e5, level: 30 },
+    // Level 3
+    { maxPictureSize: 983040, maxBitrate: 12e6, level: 31 },
+    // Level 3.1
+    { maxPictureSize: 2228224, maxBitrate: 18e6, level: 40 },
+    // Level 4
+    { maxPictureSize: 2228224, maxBitrate: 3e7, level: 41 },
+    // Level 4.1
+    { maxPictureSize: 8912896, maxBitrate: 6e7, level: 50 },
+    // Level 5
+    { maxPictureSize: 8912896, maxBitrate: 12e7, level: 51 },
+    // Level 5.1
+    { maxPictureSize: 8912896, maxBitrate: 18e7, level: 52 },
+    // Level 5.2
+    { maxPictureSize: 35651584, maxBitrate: 18e7, level: 60 },
+    // Level 6
+    { maxPictureSize: 35651584, maxBitrate: 24e7, level: 61 },
+    // Level 6.1
+    { maxPictureSize: 35651584, maxBitrate: 48e7, level: 62 }
+    // Level 6.2
+  ], P = [
+    { maxPictureSize: 147456, maxBitrate: 15e5, tier: "M", level: 0 },
+    // Level 2.0 (Main Tier)
+    { maxPictureSize: 278784, maxBitrate: 3e6, tier: "M", level: 1 },
+    // Level 2.1 (Main Tier)
+    { maxPictureSize: 665856, maxBitrate: 6e6, tier: "M", level: 4 },
+    // Level 3.0 (Main Tier)
+    { maxPictureSize: 1065024, maxBitrate: 1e7, tier: "M", level: 5 },
+    // Level 3.1 (Main Tier)
+    { maxPictureSize: 2359296, maxBitrate: 12e6, tier: "M", level: 8 },
+    // Level 4.0 (Main Tier)
+    { maxPictureSize: 2359296, maxBitrate: 3e7, tier: "H", level: 8 },
+    // Level 4.0 (High Tier)
+    { maxPictureSize: 2359296, maxBitrate: 2e7, tier: "M", level: 9 },
+    // Level 4.1 (Main Tier)
+    { maxPictureSize: 2359296, maxBitrate: 5e7, tier: "H", level: 9 },
+    // Level 4.1 (High Tier)
+    { maxPictureSize: 8912896, maxBitrate: 3e7, tier: "M", level: 12 },
+    // Level 5.0 (Main Tier)
+    { maxPictureSize: 8912896, maxBitrate: 1e8, tier: "H", level: 12 },
+    // Level 5.0 (High Tier)
+    { maxPictureSize: 8912896, maxBitrate: 4e7, tier: "M", level: 13 },
+    // Level 5.1 (Main Tier)
+    { maxPictureSize: 8912896, maxBitrate: 16e7, tier: "H", level: 13 },
+    // Level 5.1 (High Tier)
+    { maxPictureSize: 8912896, maxBitrate: 6e7, tier: "M", level: 14 },
+    // Level 5.2 (Main Tier)
+    { maxPictureSize: 8912896, maxBitrate: 24e7, tier: "H", level: 14 },
+    // Level 5.2 (High Tier)
+    { maxPictureSize: 35651584, maxBitrate: 6e7, tier: "M", level: 15 },
+    // Level 5.3 (Main Tier)
+    { maxPictureSize: 35651584, maxBitrate: 24e7, tier: "H", level: 15 },
+    // Level 5.3 (High Tier)
+    { maxPictureSize: 35651584, maxBitrate: 6e7, tier: "M", level: 16 },
+    // Level 6.0 (Main Tier)
+    { maxPictureSize: 35651584, maxBitrate: 24e7, tier: "H", level: 16 },
+    // Level 6.0 (High Tier)
+    { maxPictureSize: 35651584, maxBitrate: 1e8, tier: "M", level: 17 },
+    // Level 6.1 (Main Tier)
+    { maxPictureSize: 35651584, maxBitrate: 48e7, tier: "H", level: 17 },
+    // Level 6.1 (High Tier)
+    { maxPictureSize: 35651584, maxBitrate: 16e7, tier: "M", level: 18 },
+    // Level 6.2 (Main Tier)
+    { maxPictureSize: 35651584, maxBitrate: 8e8, tier: "H", level: 18 },
+    // Level 6.2 (High Tier)
+    { maxPictureSize: 35651584, maxBitrate: 16e7, tier: "M", level: 19 },
+    // Level 6.3 (Main Tier)
+    { maxPictureSize: 35651584, maxBitrate: 8e8, tier: "H", level: 19 }
+    // Level 6.3 (High Tier)
+  ];
+  function v(e) {
+    return e ? e[e.length - 1] : void 0;
+  }
+  if (a === "avc") {
+    const r = Math.ceil(m / 16) * Math.ceil(c / 16), t = S.find(
+      (z) => r <= z.maxMacroblocks && o <= z.maxBitrate
+    ) ?? v(S), l = t ? t.level : 0, i = "64".padStart(2, "0"), x = "00", B = l.toString(16).padStart(2, "0");
+    return `avc1.${i}${x}${B}`;
+  } else if (a === "hevc") {
+    const e = "", t = "6", l = m * c, i = u.find(
+      (B) => l <= B.maxPictureSize && o <= B.maxBitrate
+    ) ?? v(u);
+    return `hev1.${e}1.${t}.${i.tier}${i.level}.B0`;
+  } else {
+    if (a === "vp8")
+      return "vp8";
+    if (a === "vp9") {
+      const e = "00", r = m * c, t = n.find(
+        (i) => r <= i.maxPictureSize && o <= i.maxBitrate
+      ) ?? v(n);
+      return `vp09.${e}.${t.level.toString().padStart(2, "0")}.08`;
+    } else if (a === "av1") {
+      const r = m * c, t = P.find(
+        (x) => r <= x.maxPictureSize && o <= x.maxBitrate
+      ) ?? v(P);
+      return `av01.0.${t.level.toString().padStart(2, "0")}${t.tier}.08`;
+    }
+  }
+  throw new TypeError(`Unhandled codec '${a}'.`);
+}
+export {
+  s as getCodecString
+};

package/dist/video/gpu-renderer.d.ts

@@ -0,0 +1,108 @@
+/**
+ * Zero-copy VideoFrame rendering using WebGPU with ImageBitmap fallback.
+ *
+ * This class provides high-performance video rendering by using WebGPU's
+ * `importExternalTexture()` for zero-copy rendering when available, or falling
+ * back to ImageBitmapRenderer for compatibility.
+ *
+ * Features:
+ * - **Zero-copy rendering** via WebGPU (no pixel copying between GPU and CPU)
+ * - **Two filter modes**: Linear (hardware accelerated) and Bicubic (high quality)
+ * - **Automatic fallback** to ImageBitmapRenderer if WebGPU is unavailable
+ * - **Works with VideoFrame** objects from VideoDecoder
+ *
+ * @example
+ * ```typescript
+ * const canvas = document.getElementById('canvas');
+ * const renderer = new GPUFrameRenderer(canvas, { filterMode: 'linear' });
+ * await renderer.init();
+ *
+ * // In VideoDecoder output callback:
+ * decoder.configure({
+ *   output: (frame) => {
+ *     renderer.drawImage(frame);
+ *     frame.close();
+ *   },
+ *   error: (e) => console.error(e)
+ * });
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Switch to high-quality bicubic filtering
+ * renderer.setFilterMode('bicubic');
+ *
+ * // Check current mode
+ * if (renderer.getMode() === 'webgpu') {
+ *   console.log('Using WebGPU zero-copy rendering');
+ * }
+ * ```
+ */
+export declare class GPUFrameRenderer {
+    canvas: HTMLCanvasElement | OffscreenCanvas;
+    mode: 'webgpu' | 'bitmap' | null;
+    filterMode: 'linear' | 'bicubic';
+    device: GPUDevice | null;
+    context: GPUCanvasContext | null;
+    linearPipeline: GPURenderPipeline | null;
+    bicubicPipeline: GPURenderPipeline | null;
+    sampler: GPUSampler | null;
+    uniformBuffer: GPUBuffer | null;
+    bitmapCtx: ImageBitmapRenderingContext | null;
+    /**
+     * Create a new GPUFrameRenderer.
+     *
+     * @param canvas - The canvas element to render to (HTMLCanvasElement or OffscreenCanvas)
+     * @param options - Configuration options
+     * @param options.filterMode - Scaling filter: 'linear' (default) or 'bicubic' (higher quality)
+     */
+    constructor(canvas: HTMLCanvasElement | OffscreenCanvas, options?: {
+        filterMode?: 'linear' | 'bicubic';
+    });
+    /**
+     * Initialize the renderer. Must be called before drawImage().
+     *
+     * Attempts to initialize WebGPU first for zero-copy rendering. If WebGPU
+     * is unavailable or initialization fails, automatically falls back to
+     * ImageBitmapRenderer.
+     *
+     * @returns Promise that resolves when initialization is complete
+     *
+     * @example
+     * ```typescript
+     * const renderer = new GPUFrameRenderer(canvas);
+     * await renderer.init();
+     * // Ready to render
+     * ```
+     */
+    init(): Promise<void>;
+    initWebGPU(): Promise<boolean>;
+    initBitmapRenderer(): void;
+    /**
+     * Draw a VideoFrame to the canvas
+     * @param {VideoFrame} source - The VideoFrame to draw
+     */
+    drawImage(source: VideoFrame): void;
+    drawImageWebGPU(videoFrame: VideoFrame): void;
+    drawImageBitmap(videoFrame: VideoFrame): Promise<void>;
+    /**
+     * Get the current rendering mode
+     * @returns {'webgpu'|'bitmap'|null}
+     */
+    getMode(): "webgpu" | "bitmap" | null;
+    /**
+     * Get the current filter mode
+     * @returns {'linear'|'bicubic'}
+     */
+    getFilterMode(): "linear" | "bicubic";
+    /**
+     * Set the filter mode (only applies to WebGPU mode)
+     * @param {'linear'|'bicubic'} mode
+     */
+    setFilterMode(mode: 'linear' | 'bicubic'): void;
+    /**
+     * Clean up resources
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=gpu-renderer.d.ts.map

package/dist/video/gpu-renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gpu-renderer.d.ts","sourceRoot":"","sources":["../../src/video/gpu-renderer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,qBAAa,gBAAgB;IAEzB,MAAM,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC5C,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,IAAI,CAAC;IACjC,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC,MAAM,EAAE,SAAS,GAAG,IAAI,CAAC;IACzB,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,eAAe,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC1C,OAAO,EAAE,UAAU,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,SAAS,GAAG,IAAI,CAAC;IAChC,SAAS,EAAE,2BAA2B,GAAG,IAAI,CAAC;IAE9C;;;;;;OAMG;gBACS,MAAM,EAAE,iBAAiB,GAAG,eAAe,EAAE,OAAO,GAAE;QAAE,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;KAAO;IAiB5G;;;;;;;;;;;;;;;OAeG;IACG,IAAI;IA8BJ,UAAU,IAAI,OAAO,CAAC,OAAO,CAAC;IAmKpC,kBAAkB;IAIlB;;;OAGG;IACH,SAAS,CAAC,MAAM,EAAE,UAAU;IAU5B,eAAe,CAAC,UAAU,EAAE,UAAU;IA2DhC,eAAe,CAAC,UAAU,EAAE,UAAU;IAM5C;;;OAGG;IACH,OAAO;IAIP;;;OAGG;IACH,aAAa;IAIb;;;OAGG;IACH,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS;IAOxC;;OAEG;IACH,OAAO;CAKR"}

package/dist/video/gpu-renderer.js

@@ -0,0 +1,266 @@
+class l {
+  /**
+   * Create a new GPUFrameRenderer.
+   *
+   * @param canvas - The canvas element to render to (HTMLCanvasElement or OffscreenCanvas)
+   * @param options - Configuration options
+   * @param options.filterMode - Scaling filter: 'linear' (default) or 'bicubic' (higher quality)
+   */
+  constructor(e, t = {}) {
+    this.canvas = e, this.mode = "webgpu", this.filterMode = t.filterMode || "linear", this.device = null, this.context = null, this.linearPipeline = null, this.bicubicPipeline = null, this.sampler = null, this.uniformBuffer = null, this.bitmapCtx = null;
+  }
+  /**
+   * Initialize the renderer. Must be called before drawImage().
+   *
+   * Attempts to initialize WebGPU first for zero-copy rendering. If WebGPU
+   * is unavailable or initialization fails, automatically falls back to
+   * ImageBitmapRenderer.
+   *
+   * @returns Promise that resolves when initialization is complete
+   *
+   * @example
+   * ```typescript
+   * const renderer = new GPUFrameRenderer(canvas);
+   * await renderer.init();
+   * // Ready to render
+   * ```
+   */
+  async init() {
+    const e = navigator.platform.toLowerCase().includes("linux"), t = navigator.userAgent.toLowerCase().includes("firefox");
+    if (e && t) {
+      console.log("GPUDrawImage: Linux + Firefox detected, using ImageBitmapRenderer"), this.initBitmapRenderer(), this.mode = "bitmap";
+      return;
+    }
+    if (navigator.gpu)
+      try {
+        await this.initWebGPU(), this.mode = "webgpu", console.log("GPUDrawImage: Using WebGPU (zero-copy)");
+        return;
+      } catch (i) {
+        console.warn("GPUDrawImage: WebGPU initialization failed, falling back to ImageBitmap", i);
+      }
+    this.initBitmapRenderer(), this.mode = "bitmap", console.log("GPUDrawImage: Using ImageBitmapRenderer (fallback)");
+  }
+  async initWebGPU() {
+    const e = await navigator.gpu.requestAdapter();
+    if (!e || (this.device = await e.requestDevice(), !this.device) || (this.context = this.canvas.getContext("webgpu"), !this.context)) return !1;
+    const t = navigator.gpu.getPreferredCanvasFormat();
+    this.context.configure({
+      device: this.device,
+      format: t,
+      alphaMode: "opaque"
+    }), this.sampler = this.device.createSampler({
+      magFilter: "linear",
+      minFilter: "linear"
+    }), this.uniformBuffer = this.device.createBuffer({
+      size: 8,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST
+    });
+    const i = `
+        struct VertexOutput {
+          @builtin(position) position: vec4f,
+          @location(0) texCoord: vec2f,
+        }
+  
+        @vertex
+        fn vertexMain(@builtin(vertex_index) vertexIndex: u32) -> VertexOutput {
+          var pos = array<vec2f, 6>(
+            vec2f(-1.0, -1.0),
+            vec2f(1.0, -1.0),
+            vec2f(-1.0, 1.0),
+            vec2f(-1.0, 1.0),
+            vec2f(1.0, -1.0),
+            vec2f(1.0, 1.0)
+          );
+  
+          var texCoord = array<vec2f, 6>(
+            vec2f(0.0, 1.0),
+            vec2f(1.0, 1.0),
+            vec2f(0.0, 0.0),
+            vec2f(0.0, 0.0),
+            vec2f(1.0, 1.0),
+            vec2f(1.0, 0.0)
+          );
+  
+          var output: VertexOutput;
+          output.position = vec4f(pos[vertexIndex], 0.0, 1.0);
+          output.texCoord = texCoord[vertexIndex];
+          return output;
+        }
+      `, r = this.device.createShaderModule({
+      code: i + `
+          @group(0) @binding(0) var videoTexture: texture_external;
+          @group(0) @binding(1) var texSampler: sampler;
+  
+          @fragment
+          fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
+            return textureSampleBaseClampToEdge(videoTexture, texSampler, input.texCoord);
+          }
+        `
+    }), a = this.device.createShaderModule({
+      code: i + `
+          @group(0) @binding(0) var videoTexture: texture_external;
+          @group(0) @binding(1) var<uniform> texSize: vec2f;
+  
+          // Bicubic weight function (Catmull-Rom)
+          fn cubic(x: f32) -> f32 {
+            let x_abs = abs(x);
+            if (x_abs <= 1.0) {
+              return 1.5 * x_abs * x_abs * x_abs - 2.5 * x_abs * x_abs + 1.0;
+            } else if (x_abs < 2.0) {
+              return -0.5 * x_abs * x_abs * x_abs + 2.5 * x_abs * x_abs - 4.0 * x_abs + 2.0;
+            }
+            return 0.0;
+          }
+  
+          @fragment
+          fn fragmentMain(input: VertexOutput) -> @location(0) vec4f {
+            let texCoord = input.texCoord;
+  
+            let coord = texCoord * texSize;
+            let coordFloor = floor(coord);
+            let f = coord - coordFloor;
+  
+            var result = vec4f(0.0, 0.0, 0.0, 0.0);
+            var weightSum = 0.0;
+  
+            // Read exact pixel values from 4x4 neighborhood using textureLoad
+            for (var y = -1; y <= 2; y++) {
+              for (var x = -1; x <= 2; x++) {
+                let pixelCoord = vec2i(i32(coordFloor.x) + x, i32(coordFloor.y) + y);
+  
+                // Clamp to valid texture coordinates
+                let clampedCoord = clamp(pixelCoord, vec2i(0, 0), vec2i(i32(texSize.x) - 1, i32(texSize.y) - 1));
+  
+                let weight = cubic(f.x - f32(x)) * cubic(f.y - f32(y));
+                result += textureLoad(videoTexture, clampedCoord) * weight;
+                weightSum += weight;
+              }
+            }
+  
+            return result / weightSum;
+          }
+        `
+    });
+    return this.linearPipeline = this.device.createRenderPipeline({
+      layout: "auto",
+      vertex: {
+        module: r,
+        entryPoint: "vertexMain"
+      },
+      fragment: {
+        module: r,
+        entryPoint: "fragmentMain",
+        targets: [{
+          format: t
+        }]
+      },
+      primitive: {
+        topology: "triangle-list"
+      }
+    }), this.bicubicPipeline = this.device.createRenderPipeline({
+      layout: "auto",
+      vertex: {
+        module: a,
+        entryPoint: "vertexMain"
+      },
+      fragment: {
+        module: a,
+        entryPoint: "fragmentMain",
+        targets: [{
+          format: t
+        }]
+      },
+      primitive: {
+        topology: "triangle-list"
+      }
+    }), !0;
+  }
+  initBitmapRenderer() {
+    this.bitmapCtx = this.canvas.getContext("bitmaprenderer");
+  }
+  /**
+   * Draw a VideoFrame to the canvas
+   * @param {VideoFrame} source - The VideoFrame to draw
+   */
+  drawImage(e) {
+    if (this.mode === "webgpu")
+      this.drawImageWebGPU(e);
+    else if (this.mode === "bitmap")
+      this.drawImageBitmap(e);
+    else
+      throw new Error("GPUDrawImage not initialized. Call init() first.");
+  }
+  drawImageWebGPU(e) {
+    const t = this.filterMode === "bicubic" ? this.bicubicPipeline : this.linearPipeline, i = this.filterMode === "bicubic", r = [
+      {
+        binding: 0,
+        resource: this.device.importExternalTexture({
+          source: e
+        })
+      }
+    ];
+    if (i) {
+      const u = new Float32Array([e.displayWidth, e.displayHeight]);
+      this.device.queue.writeBuffer(this.uniformBuffer, 0, u), r.push({
+        binding: 1,
+        resource: {
+          //@ts-expect-error
+          buffer: this.uniformBuffer
+        }
+      });
+    } else
+      r.push({
+        binding: 1,
+        //@ts-expect-error
+        resource: this.sampler
+      });
+    const a = this.device.createBindGroup({
+      layout: t.getBindGroupLayout(0),
+      entries: r
+    }), n = this.device.createCommandEncoder(), s = this.context.getCurrentTexture().createView(), o = n.beginRenderPass({
+      colorAttachments: [{
+        view: s,
+        clearValue: { r: 0, g: 0, b: 0, a: 1 },
+        loadOp: "clear",
+        storeOp: "store"
+      }]
+    });
+    o.setPipeline(t), o.setBindGroup(0, a), o.draw(6), o.end(), this.device.queue.submit([n.finish()]);
+  }
+  async drawImageBitmap(e) {
+    const t = await createImageBitmap(e);
+    this.bitmapCtx.transferFromImageBitmap(t);
+  }
+  /**
+   * Get the current rendering mode
+   * @returns {'webgpu'|'bitmap'|null}
+   */
+  getMode() {
+    return this.mode;
+  }
+  /**
+   * Get the current filter mode
+   * @returns {'linear'|'bicubic'}
+   */
+  getFilterMode() {
+    return this.filterMode;
+  }
+  /**
+   * Set the filter mode (only applies to WebGPU mode)
+   * @param {'linear'|'bicubic'} mode
+   */
+  setFilterMode(e) {
+    if (e !== "linear" && e !== "bicubic")
+      throw new Error('Filter mode must be "linear" or "bicubic"');
+    this.filterMode = e;
+  }
+  /**
+   * Clean up resources
+   */
+  destroy() {
+    this.device && this.device.destroy();
+  }
+}
+export {
+  l as GPUFrameRenderer
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "webcodecs-utils",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Utility functions for working with WebCodecs API",
   "homepage": "https://webcodecsfundamentals.org",
   "repository": {