react-native-skia-webgpu-video 0.1.0-beta.3 → 0.1.0-beta.4

package/src/exportFrames.ts

@@ -22,7 +22,7 @@ import {
   blitNv12Frame,
   blitYuvFrame,
   releaseYuvImports,
-  yuvFrameOrigin,
+  yuvFrameRegion,
 } from "./yuvBlit";
 import type { YuvImport } from "./yuvBlit";
 
@@ -174,9 +174,9 @@ const importYuvExportFrame = (
         entry.nativeFrame.height !== frame.height)
     )
       throw new Error("Native video buffer dimensions mismatch");
-    const origin = nv12
-      ? { x: 0, y: 0 }
-      : yuvFrameOrigin(source.region!, rotation, entry.nativeFrame, frame);
+    const region = nv12
+      ? null
+      : yuvFrameRegion(source.region!, rotation, entry.nativeFrame);
     const device = getVideoGpuDevice();
     target = imports.textures.get(producer);
     if (
@@ -220,9 +220,7 @@ const importYuvExportFrame = (
         producer,
         entry.nativeFrame,
         rotation,
-        origin,
-        frame.width,
-        frame.height,
+        region!,
         target.texture,
       );
     entry.image = Skia.Image.MakeImageFromGPUTexture(target.texture);
@@ -329,8 +327,9 @@ export const releaseExportFrames = (imports: ExportFrameImports): void => {
 
 /** The export counterpart of ownVideoFrames on iOS: decoded frames are drawn
  * in place, and a producer's previous frame is released once its next one is
- * imported, since every exported frame ends with a checked GPU wait. Other
- * frames, or every frame after a first failed import, use `fallback`. */
+ * imported, since the export waits for the GPU to complete a frame before it
+ * imports the next one. Other frames, or every frame after a first failed
+ * import, use `fallback`. */
 export const ownExportFrames = (
   imports: ExportFrameImports,
   decoded: Record<string, VideoFrame>,

package/src/exportTarget.ts

@@ -1,21 +1,33 @@
 /// <reference types="@webgpu/types" />
-import { Platform } from "react-native";
 import { BlendMode, Skia } from "react-native-skia";
 import type { SkCanvas, SkSurface } from "react-native-skia";
 import type {
   GPUSharedTextureMemory,
   GPUSharedTextureMemoryDescriptor,
   NativeVideoFrame,
+  RNCanvasContext,
 } from "react-native-webgpu";
 import { getVideoCanvas } from "./canvas";
-import { createNativeVideoGpuFrame, getVideoGpuDevice } from "./gpuDevice";
+import {
+  createNativeVideoGpuFrame,
+  createNativeWindowGpuContext,
+  encoderWindowTextureUsage,
+  getVideoGpuDevice,
+  nativeVideoTextureUsage,
+} from "./gpuDevice";
+import {
+  frameByteSize,
+  releaseVideoMemory,
+  reserveVideoMemory,
+} from "./memory";
 import type { VideoEncoder } from "./types";
 
-/** An encoder pool buffer that Skia draws into through WebGPU. */
+/** A texture Skia draws an exported frame into through WebGPU: a lent
+ * encoder pool buffer on iOS, one of the encoder window's own textures on
+ * Android. */
 export type EncoderTarget = {
-  pointer: bigint;
-  /** Android: sync-fds ending the GPU access, handed over to the encoder. */
-  fences: bigint[];
+  /** iOS: the lent CVPixelBuffer. */
+  pointer: bigint | null;
   frame: NativeVideoFrame | null;
   memory: GPUSharedTextureMemory | null;
   texture: GPUTexture | null;
@@ -24,9 +36,25 @@ export type EncoderTarget = {
   canvas: SkCanvas | null;
 };
 
-// Captured on the RN runtime. iOS lends CVPixelBuffers, imported through
-// their IOSurface; Android lends the AHardwareBuffer itself.
-const lendsPixelBuffers = Platform.OS === "ios";
+/** Android: a canvas context presenting to the codec's input Surface. Skia
+ * draws each frame into one of two textures of our own, which a GPU copy then
+ * puts into the window's texture. The window's textures are the codec's
+ * input buffers: the copy waits on the GPU for the codec to hand one back,
+ * while the export goes on with the next frame, rather than the frame's
+ * checked wait. */
+export type EncoderWindow = {
+  context: RNCanvasContext;
+  device: GPUDevice;
+  configured: boolean;
+  /** Drawn into in turn, each copied into the window after its frame. */
+  slots: EncoderTarget[];
+  next: number;
+  reservations: number[];
+  /** The window texture the probe acquired, the first frame's copy target. */
+  pending: GPUTexture | null;
+};
+
+const windowSlots = 2;
 
 type SharedMemoryDevice = GPUDevice & {
   importSharedTextureMemory?: (
@@ -43,38 +71,19 @@ export const supportsEncoderTargets = (encoder: VideoEncoder): boolean => {
 };
 
 // Declared before its callers: worklets capture their closure on creation.
-/** Ends GPU access; the lent buffer stays with the caller, to encode or
- * release. Call only after a checked flush(true) of its surface. With
- * `encoding`, Android keeps the access's sync-fds in `target.fences` for the
- * encoder, which owns and closes them: ending an AHB access submits a
- * release that flush(true) has not waited for. */
-export const closeEncoderTarget = (
-  target: EncoderTarget,
-  encoding = false,
-): void => {
+/** iOS: ends GPU access; the lent buffer stays with the caller, to encode or
+ * release. Call only after a checked flush(true) of its surface. */
+export const closeEncoderTarget = (target: EncoderTarget): void => {
   "worklet";
-  target.canvas?.dispose();
+  // Disposing the surface detaches its canvas.
   target.canvas = null;
   target.surface?.dispose();
   target.surface = null;
   if (target.accessing && target.memory && target.texture) {
     const ended = target.memory.endAccess(target.texture);
     target.accessing = false;
-    for (const state of ended?.fences ?? []) {
-      try {
-        if (encoding && !lendsPixelBuffers) {
-          const exported = state.fence.export();
-          // Unreachable when negotiated: AHB interop requires the device's
-          // only shared-fence feature to be sync-fd (see gpuDevice.ts).
-          if (exported.type !== "sync-fd")
-            throw new Error("GPU export needs sync-fd fences");
-          target.fences.push(exported.handle);
-        }
-      } finally {
-        // iOS: already waited for. The wrapper is released either way.
-        state.fence.destroy();
-      }
-    }
+    // Already waited for. The wrappers are released either way.
+    for (const state of ended?.fences ?? []) state.fence.destroy();
   }
   target.accessing = false;
   target.texture?.destroy();
@@ -88,7 +97,7 @@ export const closeEncoderTarget = (
   target.frame = null;
 };
 
-/** Lends the next pool buffer and wraps it as a Skia surface. */
+/** iOS: lends the next pool buffer and wraps it as a Skia surface. */
 export const acquireEncoderTarget = (
   encoder: VideoEncoder,
   width: number,
@@ -97,7 +106,6 @@ export const acquireEncoderTarget = (
   "worklet";
   const target: EncoderTarget = {
     pointer: encoder.acquireFrameBuffer!(),
-    fences: [],
     frame: null,
     memory: null,
     texture: null,
@@ -106,33 +114,23 @@ export const acquireEncoderTarget = (
     canvas: null,
   };
   try {
-    if (lendsPixelBuffers) {
-      target.frame = createNativeVideoGpuFrame(target.pointer);
-      if (
-        target.frame.width !== width ||
-        target.frame.height !== height ||
-        target.frame.pixelFormat !== "bgra8"
-      ) {
-        throw new Error("Encoder buffer dimensions or BGRA layout mismatch");
-      }
+    target.frame = createNativeVideoGpuFrame(target.pointer!);
+    if (
+      target.frame.width !== width ||
+      target.frame.height !== height ||
+      target.frame.pixelFormat !== "bgra8"
+    ) {
+      throw new Error("Encoder buffer dimensions or BGRA layout mismatch");
     }
     const device = getVideoGpuDevice() as SharedMemoryDevice;
     if (typeof device.importSharedTextureMemory !== "function") {
       throw new Error("WebGPU shared texture memory is unavailable");
     }
     target.memory = device.importSharedTextureMemory({
-      handle: target.frame ? target.frame.handle : target.pointer,
+      handle: target.frame.handle,
       label: "video export frame",
     });
     target.texture = target.memory.createTexture();
-    if (
-      !lendsPixelBuffers &&
-      (target.texture.width !== width ||
-        target.texture.height !== height ||
-        target.texture.format !== "rgba8unorm")
-    ) {
-      throw new Error("Encoder buffer dimensions or RGBA layout mismatch");
-    }
     // Uninitialized: every frame starts with a full clear.
     target.memory.beginAccess(target.texture, false);
     target.accessing = true;
@@ -151,8 +149,9 @@ export const acquireEncoderTarget = (
   }
 };
 
-/** Clears one lent buffer on the GPU, then returns it unencoded. Returns the
- * failure, or null when this device can export through encoder targets. */
+/** iOS: clears one lent buffer on the GPU, then returns it unencoded.
+ * Returns the failure, or null when this device can export through encoder
+ * targets. */
 export const probeEncoderTarget = (
   encoder: VideoEncoder,
   width: number,
@@ -177,3 +176,165 @@ export const probeEncoderTarget = (
   encoder.releaseFrameBuffer!();
   return failure;
 };
+
+/** Android: the window's next texture, checked against the export size. */
+const windowTexture = (
+  window: EncoderWindow,
+  width: number,
+  height: number,
+): GPUTexture => {
+  "worklet";
+  const texture = window.pending ?? window.context.getCurrentTexture();
+  window.pending = null;
+  if (
+    texture.width !== width ||
+    texture.height !== height ||
+    texture.format !== "rgba8unorm"
+  ) {
+    throw new Error("Encoder window dimensions or RGBA layout mismatch");
+  }
+  return texture;
+};
+
+/** Android: the slot the next frame draws into. Its previous copy completed:
+ * the checked wait the export makes before each frame's import covers the
+ * queue before it. */
+export const acquireWindowTarget = (window: EncoderWindow): EncoderTarget => {
+  "worklet";
+  return window.slots[window.next]!;
+};
+
+/** Android: copies the slot Skia drew into to the window's next texture and
+ * hands it to the encoder, with its time. Call once the slot's surface was
+ * flushed: the copy follows the drawing on the same queue. */
+export const presentWindowTarget = (
+  encoder: VideoEncoder,
+  window: EncoderWindow,
+  target: EncoderTarget,
+  time: number,
+): void => {
+  "worklet";
+  const source = target.texture!;
+  const destination = windowTexture(window, source.width, source.height);
+  const commands = window.device.createCommandEncoder({
+    label: "video export window copy",
+  });
+  commands.copyTextureToTexture(
+    { texture: source },
+    { texture: destination },
+    { width: source.width, height: source.height },
+  );
+  window.device.queue.submit([commands.finish()]);
+  window.next = (window.next + 1) % window.slots.length;
+  // The encoder sets the frame's time on the window, then presents.
+  encoder.encodeFrame(
+    { kind: "window", present: () => window.context.present() },
+    time,
+  );
+};
+
+/** Android: the swapchain gives the codec its buffers back at once, rather
+ * than once the context is collected. Call before disposing the encoder. */
+export const closeEncoderWindow = (window: EncoderWindow): void => {
+  "worklet";
+  window.pending = null;
+  if (!window.configured) return;
+  window.context.unconfigure();
+  window.configured = false;
+};
+
+/** Android: frees the window's own textures. Call once their last recording
+ * was submitted: a copy still in flight keeps its source alive. */
+export const releaseEncoderWindow = (window: EncoderWindow): void => {
+  "worklet";
+  while (window.slots.length) {
+    const slot = window.slots[window.slots.length - 1]!;
+    // Disposing the surface detaches its canvas.
+    slot.canvas = null;
+    slot.surface?.dispose();
+    slot.surface = null;
+    slot.texture?.destroy();
+    slot.texture = null;
+    window.slots.pop();
+  }
+  while (window.reservations.length) {
+    releaseVideoMemory(window.reservations[window.reservations.length - 1]!);
+    window.reservations.pop();
+  }
+};
+
+/** Android: opens a canvas context on the encoder's input window with its
+ * slots, acquires the window's first texture and draws a clear into the
+ * first slot: nothing reaches the encoder. Returns the window, or the
+ * failure, after which the window is closed and the export can fall back to
+ * readback. */
+export const probeEncoderWindow = (
+  encoder: VideoEncoder,
+  width: number,
+  height: number,
+): { window: EncoderWindow | null; failure: unknown } => {
+  "worklet";
+  let window: EncoderWindow | null = null;
+  let failure: unknown = null;
+  try {
+    if (typeof encoder.acquireInputWindow !== "function")
+      throw new Error("Encoder cannot present through its input window");
+    const device = getVideoGpuDevice();
+    window = {
+      context: createNativeWindowGpuContext(
+        encoder.acquireInputWindow(),
+        width,
+        height,
+      ),
+      device,
+      configured: false,
+      slots: [],
+      next: 0,
+      reservations: [],
+      pending: null,
+    };
+    // Presented in FIFO order, opaque: every frame reaches the codec.
+    window.context.configure({
+      device,
+      format: "rgba8unorm",
+      usage: encoderWindowTextureUsage,
+    });
+    window.configured = true;
+    for (let i = 0; i < windowSlots; i++) {
+      window.reservations.push(
+        reserveVideoMemory(frameByteSize(width, height), "export window slot"),
+      );
+      const slot: EncoderTarget = {
+        pointer: null,
+        frame: null,
+        memory: null,
+        texture: device.createTexture({
+          label: "video export window slot",
+          size: { width, height },
+          format: "rgba8unorm",
+          usage: nativeVideoTextureUsage,
+        }),
+        accessing: false,
+        surface: null,
+        canvas: null,
+      };
+      window.slots.push(slot);
+      slot.surface = Skia.Surface.MakeFromGPUTexture(slot.texture!);
+      if (!slot.surface) throw new Error("Cannot wrap the export frame");
+      slot.canvas = getVideoCanvas(slot.surface);
+    }
+    window.pending = windowTexture(window, width, height);
+    const target = acquireWindowTarget(window);
+    target.canvas!.drawColor(Skia.Color("#00000000"), BlendMode.Clear);
+    target.surface!.flush(true);
+  } catch (error) {
+    failure = error ?? new Error("GPU export probe failed");
+  }
+  if (failure === null) return { window, failure };
+  if (window) {
+    // Not caught: a window still drawn by WebGPU cannot fall back to EGL.
+    closeEncoderWindow(window);
+    releaseEncoderWindow(window);
+  }
+  return { window: null, failure };
+};

package/src/exportVideoComposition.ts

@@ -35,10 +35,16 @@ import {
 import { enqueueExport, exportAbortError } from "./exportQueue";
 import {
   acquireEncoderTarget,
+  acquireWindowTarget,
   closeEncoderTarget,
+  closeEncoderWindow,
+  presentWindowTarget,
   probeEncoderTarget,
+  probeEncoderWindow,
+  releaseEncoderWindow,
   supportsEncoderTargets,
   type EncoderTarget,
+  type EncoderWindow,
 } from "./exportTarget";
 import { yieldToRuntime } from "./runtimeYield";
 import {
@@ -82,7 +88,8 @@ export type ExportProfile = {
   targetMs: number;
   /** drawFrame, before/afterDrawFrame and progress scheduling. */
   drawMs: number;
-  /** The checked flush(true): waiting for the GPU to complete the frame. */
+  /** The checked flush(true): waiting for the GPU to complete the frame,
+   * which Android's window export does once it decoded the next frame. */
   gpuMs: number;
   /** Readback when used, submission to the encoder including its
    * backpressure, and the final file write. */
@@ -136,11 +143,16 @@ type ExportState = {
   /** Draw into a lent encoder buffer instead of reading pixels back. */
   gpu: boolean;
   target: EncoderTarget | null;
+  /** Android GPU export: the encoder's input window, drawn into directly. */
+  window: EncoderWindow | null;
   /** iOS GPU export: decoded frames sampled in place, by producer. */
   imports: ExportFrameImports | null;
   frames: Record<string, VideoFrame>;
   processor: VideoFrameProcessor | null;
   pendingAfterDraw: (() => void) | null;
+  /** Android window: the last frame was submitted without its checked GPU
+   * wait, which comes before anything it sampled is released. */
+  unchecked?: boolean;
   reservations: number[];
   index: number;
   setupError?: unknown;
@@ -290,6 +302,16 @@ const executeExport = <T>(args: VideoExportArguments<T>): Promise<void> =>
         if (clock.last >= 0) profile[stage] += now - clock.last;
         clock.last = now;
       };
+      /** Android window: the checked GPU wait the last frame left for later,
+       * so that the GPU converted and drew it while the CPU presented it and
+       * decoded the next one. An empty recording: Graphite still waits for
+       * every command submitted so far. */
+      const checkWindowFrame = () => {
+        "worklet";
+        if (!state.unchecked) return;
+        state.window!.slots[state.window!.next]!.surface!.flush(true);
+        state.unchecked = false;
+      };
       const finish = async (
         error: unknown,
         aborted = false,
@@ -313,6 +335,7 @@ const executeExport = <T>(args: VideoExportArguments<T>): Promise<void> =>
         };
         // Submit any recording left by a drawing exception before an
         // adapter is allowed to destroy textures referenced by that canvas.
+        clean(checkWindowFrame);
         clean(() => state.surface?.flush(true));
         clean(() => state.target?.surface?.flush(true));
         if (cleanup.safeToRelease && state.pendingAfterDraw) {
@@ -329,6 +352,10 @@ const executeExport = <T>(args: VideoExportArguments<T>): Promise<void> =>
           }
         }
         if (clean(() => state.extractor?.dispose())) state.extractor = null;
+        // Android: the window's swapchain lets go of the codec's buffers
+        // before the encoder goes. Its own textures are freed further down.
+        const window = state.window;
+        if (window) clean(() => closeEncoderWindow(window));
         if (clean(() => state.encoder?.dispose())) state.encoder = null;
         if (cleanup.safeToRelease) {
           clean(() => state.surface?.flush(true));
@@ -341,10 +368,20 @@ const executeExport = <T>(args: VideoExportArguments<T>): Promise<void> =>
               state.imports = null;
             clean(() => clearVideoFrameImages(true));
           }
-          if (cleanup.safeToRelease && clean(() => state.canvas?.dispose()))
-            state.canvas = null;
-          if (cleanup.safeToRelease && clean(() => state.surface?.dispose()))
+          // Disposing the surface detaches its canvas.
+          if (cleanup.safeToRelease && clean(() => state.surface?.dispose())) {
             state.surface = null;
+            state.canvas = null;
+          }
+          // The target, if any, is one of the window's slots.
+          if (
+            cleanup.safeToRelease &&
+            window &&
+            clean(() => releaseEncoderWindow(window))
+          ) {
+            state.window = null;
+            state.target = null;
+          }
           const target = state.target;
           if (cleanup.safeToRelease && target) {
             if (clean(() => closeEncoderTarget(target))) state.target = null;
@@ -394,6 +431,8 @@ const executeExport = <T>(args: VideoExportArguments<T>): Promise<void> =>
           const owned = runWithVideoAutoreleasePool(() => {
             const decoded = state.extractor!.decodeCompositionFrames(time);
             lap("decodeMs");
+            checkWindowFrame();
+            lap("gpuMs");
             const imports = state.imports;
             // In place, a producer's frame is released by its next import.
             const imported = imports
@@ -427,11 +466,13 @@ const executeExport = <T>(args: VideoExportArguments<T>): Promise<void> =>
           const draw = () => {
             "worklet";
             if (state.gpu)
-              state.target = acquireEncoderTarget(
-                state.encoder!,
-                options.width,
-                options.height,
-              );
+              state.target = state.window
+                ? acquireWindowTarget(state.window)
+                : acquireEncoderTarget(
+                    state.encoder!,
+                    options.width,
+                    options.height,
+                  );
             lap("targetMs");
             const target = state.target;
             const surface = target ? target.surface! : state.surface!;
@@ -454,18 +495,25 @@ const executeExport = <T>(args: VideoExportArguments<T>): Promise<void> =>
                 height: options.height,
               });
               lap("drawMs");
-              surface.flush(true);
+              // Android window, no context to release: the next frame waits
+              // for this one (see checkWindowFrame).
+              const unchecked =
+                !!state.window &&
+                !!target &&
+                !afterDrawFrame &&
+                !state.processor;
+              surface.flush(!unchecked);
+              state.unchecked = unchecked;
               drawn.drained = true;
               lap("gpuMs");
-              if (target) {
-                closeEncoderTarget(target, true);
+              if (target && state.window) {
+                state.target = null;
+                presentWindowTarget(state.encoder!, state.window, target, time);
+              } else if (target) {
+                closeEncoderTarget(target);
                 state.target = null;
                 state.encoder!.encodeFrame(
-                  {
-                    kind: "native-buffer",
-                    nativeBuffer: target.pointer,
-                    fences: target.fences,
-                  },
+                  { kind: "native-buffer", nativeBuffer: target.pointer },
                   time,
                 );
               } else {
@@ -615,6 +663,7 @@ const executeExport = <T>(args: VideoExportArguments<T>): Promise<void> =>
           readback: null,
           gpu: false,
           target: null,
+          window: null,
           imports: null,
           frames: {},
           processor: null,
@@ -666,16 +715,28 @@ const executeExport = <T>(args: VideoExportArguments<T>): Promise<void> =>
               );
               state.encoder.prepare();
               if (gpuExport) {
-                // Skia draws straight into the encoder's buffers; the probe
-                // keeps devices without IOSurface interop on the readback path.
+                // Skia draws straight into the encoder's buffers: lent pool
+                // buffers on iOS, the input window on Android. The probe keeps
+                // devices where that fails on the readback path.
                 state.hasRecorder = true;
-                const failure = supportsEncoderTargets(state.encoder)
-                  ? probeEncoderTarget(
-                      state.encoder,
-                      options.width,
-                      options.height,
-                    )
-                  : new Error("Encoder cannot lend frame buffers");
+                let failure: unknown;
+                if (bgra) {
+                  failure = supportsEncoderTargets(state.encoder)
+                    ? probeEncoderTarget(
+                        state.encoder,
+                        options.width,
+                        options.height,
+                      )
+                    : new Error("Encoder cannot lend frame buffers");
+                } else {
+                  const probe = probeEncoderWindow(
+                    state.encoder,
+                    options.width,
+                    options.height,
+                  );
+                  state.window = probe.window;
+                  failure = probe.failure;
+                }
                 state.gpu = failure === null;
                 // Decoded frames are sampled in place too: on iOS through the
                 // same IOSurface import, on Android once converted from YUV.

package/src/frameInterop.ts

@@ -19,7 +19,7 @@ import {
   blitNv12Frame,
   blitYuvFrame,
   releaseYuvImports,
-  yuvFrameOrigin,
+  yuvFrameRegion,
 } from "./yuvBlit";
 import type { YuvImport } from "./yuvBlit";
 
@@ -116,7 +116,6 @@ const clearEntry = (cache: Cache, producer: number) => {
  * The caller has either not submitted a copy or has completed its GPU fence. */
 const clearSurfaceView = (cache: Cache) => {
   "worklet";
-  cache.canvas?.dispose();
   cache.canvas = null;
   cache.stage?.dispose();
   cache.stage = null;
@@ -449,14 +448,15 @@ export const imageFromVideoFrame = (frame: VideoFrame): SkImage | null => {
         const region = texture.region;
         const rotation = texture.rotation ?? 0;
         const nv12 = !region && texture.format === "nv12";
-        let origin = { x: 0, y: 0 };
+        let upright: ReturnType<typeof yuvFrameRegion> | null = null;
         if (region) {
           // An Android codec buffer: padded, YUV, in encoded orientation. The
-          // blit converts, crops and turns it into the display-sized scratch,
-          // as the GL path's SurfaceTexture transform did. RN WebGPU labels
-          // driver-defined YUV formats "bgra8", yet Dawn imports them as YUV:
-          // the native side checked the format, so the label is not read.
-          origin = yuvFrameOrigin(region, rotation, nativeSource, frame);
+          // blit converts, crops, turns and scales it into the frame-sized
+          // scratch, as the GL path's SurfaceTexture transform did. RN WebGPU
+          // labels driver-defined YUV formats "bgra8", yet Dawn imports them
+          // as YUV: the native side checked the format, so the label is not
+          // read.
+          upright = yuvFrameRegion(region, rotation, nativeSource);
         } else if (nv12) {
           if (
             nativeSource.width !== frame.width ||
@@ -487,9 +487,7 @@ export const imageFromVideoFrame = (frame: VideoFrame): SkImage | null => {
             key,
             nativeSource,
             rotation,
-            origin,
-            frame.width,
-            frame.height,
+            upright!,
             cache.uploadTexture!,
           );
         } else if (nv12) {

package/src/gpu.ts

@@ -178,7 +178,6 @@ export const createVideoGpuScope = (options?: {
     } catch (error) {
       // No texture has been exposed or submitted to any consumer yet.
       try {
-        resource.canvas?.dispose();
         resource.canvas = null;
         resource.surface?.dispose();
         resource.surface = null;
@@ -265,7 +264,6 @@ export const createVideoGpuScope = (options?: {
         try {
           resource.image?.dispose();
           resource.image = null;
-          resource.canvas?.dispose();
           resource.canvas = null;
           resource.surface?.dispose();
           resource.surface = null;