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

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

@@ -15,7 +15,12 @@ import {
   releaseVideoMemory,
   reserveVideoMemory,
 } from "./memory";
-import { blitYuvFrame, releaseYuvImports, yuvFrameOrigin } from "./yuvBlit";
+import {
+  blitNv12Frame,
+  blitYuvFrame,
+  releaseYuvImports,
+  yuvFrameRegion,
+} from "./yuvBlit";
 import type { YuvImport } from "./yuvBlit";
 
 type FrameTexture =
@@ -26,6 +31,8 @@ type FrameTexture =
        * this crop rectangle turned clockwise by `rotation` for display. */
       region?: { x: number; y: number; width: number; height: number };
       rotation?: number;
+      /** iOS: the decoder's NV12 buffer (`framePixelFormat: 'yuv'`), or BGRA. */
+      format?: "nv12" | "bgra8";
     }
   | {
       kind: "rgba";
@@ -109,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;
@@ -441,14 +447,22 @@ export const imageFromVideoFrame = (frame: VideoFrame): SkImage | null => {
         nativeSource = createNativeVideoGpuFrame(texture.nativeBuffer);
         const region = texture.region;
         const rotation = texture.rotation ?? 0;
-        let origin = { x: 0, y: 0 };
+        const nv12 = !region && texture.format === "nv12";
+        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 ||
+            nativeSource.height !== frame.height
+          )
+            throw new Error("Native video buffer dimensions mismatch");
         } else if (
           // RN WebGPU labels a single-plane Android RGBA AHB "bgra8". Dawn
           // reads the actual AHB format; the string distinguishes RGB from
@@ -473,11 +487,12 @@ export const imageFromVideoFrame = (frame: VideoFrame): SkImage | null => {
             key,
             nativeSource,
             rotation,
-            origin,
-            frame.width,
-            frame.height,
+            upright!,
             cache.uploadTexture!,
           );
+        } else if (nv12) {
+          // Decoded orientation, as below: drawVideoFrame applies rotation.
+          blitNv12Frame(device, nativeSource, cache.uploadTexture!);
         } else {
           // Keep decoded orientation: drawVideoFrame applies rotation once.
           device.queue.copyExternalImageToTexture(

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;

package/src/gpuDevice.ts

@@ -8,7 +8,7 @@ import {
   importDevice,
   installWebGPU,
 } from "react-native-webgpu";
-import type { NativeVideoFrame } from "react-native-webgpu";
+import type { NativeVideoFrame, RNCanvasContext } from "react-native-webgpu";
 import RNSkiaVideoModule from "./RNSkiaVideoModule";
 
 // Evaluate on the RN runtime. NativeObject serializers carry these objects to
@@ -61,11 +61,36 @@ export const createNativeVideoGpuFrame = (
   return nativeWebGPU.createVideoFrameFromNativeBuffer(pointer);
 };
 
+/** Android: a canvas context presenting to a native window that is not a
+ * view, such as an encoder's input Surface. */
+export const createNativeWindowGpuContext = (
+  window: bigint,
+  width: number,
+  height: number,
+): RNCanvasContext => {
+  "worklet";
+  if (
+    typeof nativeWebGPU?.MakeWebGPUCanvasContextFromNativeWindow !== "function"
+  )
+    throw new Error(
+      "React Native WebGPU cannot present to a native window; 0.19.0 or later is required",
+    );
+  return nativeWebGPU.MakeWebGPUCanvasContextFromNativeWindow(
+    window,
+    width,
+    height,
+  );
+};
+
 export const nativeVideoTextureUsage =
   GPUTextureUsage.RENDER_ATTACHMENT |
   GPUTextureUsage.TEXTURE_BINDING |
   GPUTextureUsage.COPY_SRC;
 
+// An encoder's input window only receives copies of the frames Skia drew.
+export const encoderWindowTextureUsage =
+  GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST;
+
 // CPU RGBA uploads additionally need COPY_DST. Keep the native-buffer blit's
 // descriptor unchanged: that path renders into its destination attachment.
 export const rgbaVideoTextureUsage =

package/src/previewLifecycle.ts

@@ -33,7 +33,6 @@ export const disposePreviewResources = (resources: PreviewResources) => {
       frame.dispose?.();
       resources.frames.shift();
     }
-    resources.canvas?.dispose();
     resources.canvas = null;
     resources.surface?.dispose();
     resources.surface = null;

package/src/types.ts

@@ -149,6 +149,26 @@ export type VideoPlayer = {
   on(name: "error", listener: (error: any) => void): () => void;
 };
 
+/**
+ * The pixel format decoded frames are handed over in, before they are drawn.
+ *
+ * - `yuv`: the decoder's own YUV 4:2:0 buffers, converted to RGB on the GPU
+ *   when a frame is drawn. A frame takes 1.5 bytes a pixel rather than 4
+ *   (12.4 MB rather than 33.2 MB in 4K), so the decoder holds more frames
+ *   ahead for the same memory. On Android only 8-bit SDR tracks decoded at
+ *   their own size; other tracks stay `rgba`.
+ * - `rgba`: frames converted to RGB as they are decoded (iOS: by VideoToolbox,
+ *   Android: by an OpenGL pass), which a GPU export samples in place.
+ * - `auto`: `yuv`, on both platforms.
+ *
+ * Camera footage (Rec.709, or HLG tone mapped to Rec.709) renders the same
+ * either way: both convert with the frame's YCbCr matrix and range. On iOS,
+ * `rgba` also converts a file tagged with other primaries or another SDR
+ * transfer function (Display P3, sRGB) to Rec.709; `yuv` takes its samples as
+ * Rec.709, as Android does in both formats.
+ */
+export type VideoFramePixelFormat = "auto" | "yuv" | "rgba";
+
 /**
  * Represents a video composition.
  */
@@ -171,6 +191,13 @@ export type VideoComposition = {
    * until its decoder has opened. The export always waits for it.
    */
   lazyDecoders?: boolean;
+  /**
+   * The pixel format the video items' frames are decoded into, for the
+   * preview and the export, see {@link VideoFramePixelFormat}.
+   *
+   * @default 'auto'
+   */
+  framePixelFormat?: VideoFramePixelFormat;
 };
 
 type VideoCompositionItemBase = {
@@ -394,14 +421,19 @@ export type VideoEncoder = {
    */
   encodeFrame(texture: unknown, time: number): void;
   /**
-   * Lends the next pool buffer to draw into on the GPU: a CVPixelBuffer on
-   * iOS, an RGBA AHardwareBuffer on Android. Pass it back as a native-buffer
-   * frame (on Android with the sync-fds ending its GPU access, in `fences`),
-   * or release it. One at a time.
+   * iOS: lends the next pool buffer (a CVPixelBuffer) to draw into on the
+   * GPU. Pass it back as a native-buffer frame, or release it. One at a time.
    */
   acquireFrameBuffer?(): bigint;
-  /** Returns a lent buffer that will not be encoded. */
+  /** iOS: returns a lent buffer that will not be encoded. */
   releaseFrameBuffer?(): void;
+  /**
+   * Android: the codec's input Surface, as an ANativeWindow pointer for a
+   * WebGPU canvas context to present to. Each frame is then encoded as
+   * `{ kind: "window", present }`: the encoder sets the frame's time on the
+   * window and calls `present`, which presents the context.
+   */
+  acquireInputWindow?(): bigint;
   /*
    * Finish writing the video to the output file.
    */

package/src/videoCompositionPlayer.ts

@@ -319,6 +319,8 @@ export const useVideoComposition = <T = undefined>({
   const lastImportedVersion = useSharedValue(-1);
   // Whether the previous vsync imported and left its draw to this one.
   const drawDeferred = useSharedValue(false);
+  // Whether the previous vsync brought new frames.
+  const importedLastVsync = useSharedValue(false);
   // A new drawFrame can draw something else from the same time and frames.
   useEffect(() => {
     lastDrawnTime.value = -1;
@@ -384,14 +386,22 @@ export const useVideoComposition = <T = undefined>({
       sourcesGeneration.value = generation;
       const currentTime = framesExtractor.currentTime;
       const framesVersion = framesExtractor.framesVersion;
-      if (splitImportAndDraw && framesVersion !== lastImportedVersion.value) {
+      const imported =
+        splitImportAndDraw && framesVersion !== lastImportedVersion.value;
+      const importedBefore = importedLastVsync.value;
+      // Version 0: no frame decoded yet.
+      importedLastVsync.value = imported && framesVersion > 0;
+      if (imported) {
         // ownVideoFrames above has just imported the new frames: leave the
-        // draw to the next vsync, which finds them in the import cache. Never
-        // twice running: a frame that lands on the vsync owed a draw would
-        // push it again, and the frame before it would never be shown.
+        // draw to the next vsync, which finds them in the import cache. Not
+        // when the previous vsync brought new frames too: frames arriving at
+        // every vsync (60 fps, or a display gone down to 30 Hz) leave no vsync
+        // free for the draw, and the next frame would replace this one before
+        // it is shown. Never twice running either, for the same reason.
         lastImportedVersion.value = framesVersion;
         if (
           !drawDeferred.value &&
+          !importedBefore &&
           currentFrame.value !== null &&
           frameGeneration.value === generation
         ) {

package/src/yuvBlit.ts

@@ -30,6 +30,8 @@ type YuvBlit = {
   sampler: GPUSampler;
   module: GPUShaderModule;
   pipelines: Map<GPUTextureFormat, GPURenderPipeline>;
+  /** The whole frame, as is: the uniforms of blitNv12Frame, written once. */
+  wholeFrame?: GPUBuffer;
 };
 
 // An ImageReader holds four buffers (GLFrameExtractor.READER_IMAGES); the
@@ -66,40 +68,52 @@ struct VsOut { @builtin(position) position: vec4f, @location(0) uv: vec2f };
 // primaries to sRGB, and every export brightens the midtones again.
 const sourceColorSpace = { primaries: "srgb", transfer: "srgb" } as const;
 
-/** The corner of a decoder buffer's crop rectangle once the buffer is turned
- * clockwise for display: the blit takes its source origin in that turned
- * space. Throws unless the rectangle lies in the buffer and turns into the
- * frame's display size. */
-export const yuvFrameOrigin = (
+/** A decoder buffer's crop rectangle once the buffer is turned clockwise for
+ * display: the blit samples that upright region, and draws it at the size of
+ * its target, which a capped or explicit frame size makes smaller. Throws
+ * unless the rectangle lies in the buffer. */
+export const yuvFrameRegion = (
   region: { x: number; y: number; width: number; height: number },
   rotation: number,
   buffer: { width: number; height: number },
-  frame: { width: number; height: number },
-): { x: number; y: number } => {
+): { x: number; y: number; width: number; height: number } => {
   "worklet";
   const turned = rotation === 90 || rotation === 270;
   if (
     (rotation !== 0 && !turned && rotation !== 180) ||
     region.x < 0 ||
     region.y < 0 ||
+    region.width <= 0 ||
+    region.height <= 0 ||
     region.x + region.width > buffer.width ||
-    region.y + region.height > buffer.height ||
-    (turned ? region.height : region.width) !== frame.width ||
-    (turned ? region.width : region.height) !== frame.height
+    region.y + region.height > buffer.height
   ) {
     throw new Error("Native video buffer region or YUV layout mismatch");
   }
-  const { width, height } = buffer;
+  const width = turned ? region.height : region.width;
+  const height = turned ? region.width : region.height;
   if (rotation === 90)
-    return { x: height - region.y - region.height, y: region.x };
+    return {
+      x: buffer.height - region.y - region.height,
+      y: region.x,
+      width,
+      height,
+    };
   if (rotation === 180)
     return {
-      x: width - region.x - region.width,
-      y: height - region.y - region.height,
+      x: buffer.width - region.x - region.width,
+      y: buffer.height - region.y - region.height,
+      width,
+      height,
     };
   if (rotation === 270)
-    return { x: region.y, y: width - region.x - region.width };
-  return { x: region.x, y: region.y };
+    return {
+      x: region.y,
+      y: buffer.width - region.x - region.width,
+      width,
+      height,
+    };
+  return { x: region.x, y: region.y, width, height };
 };
 
 const getYuvBlit = (device: GPUDevice): YuvBlit => {
@@ -249,10 +263,11 @@ const importYuvBuffer = (
 };
 
 /**
- * Draws the upright `width`×`height` region at `origin` of a decoder buffer
- * into `target`, converting YUV to RGB; the buffer is imported on its first
- * frame. Submits the draw: the caller waits for it before releasing the
- * frame's lease or `source`, as after copyExternalImageToTexture.
+ * Draws the upright `region` of a decoder buffer (see yuvFrameRegion) into
+ * the whole of `target`, converting YUV to RGB and scaling it to the target's
+ * size; the buffer is imported on its first frame. Submits the draw: the
+ * caller waits for it before releasing the frame's lease or `source`, as
+ * after copyExternalImageToTexture.
  */
 export const blitYuvFrame = (
   device: GPUDevice,
@@ -260,9 +275,7 @@ export const blitYuvFrame = (
   producer: number,
   source: NativeVideoFrame,
   rotation: number,
-  origin: { x: number; y: number },
-  width: number,
-  height: number,
+  region: { x: number; y: number; width: number; height: number },
   target: GPUTexture,
 ): void => {
   "worklet";
@@ -295,10 +308,10 @@ export const blitYuvFrame = (
   const frameWidth = turned ? source.height : source.width;
   const frameHeight = turned ? source.width : source.height;
   const mapping = [
-    width / frameWidth,
-    height / frameHeight,
-    origin.x / frameWidth,
-    origin.y / frameHeight,
+    region.width / frameWidth,
+    region.height / frameHeight,
+    region.x / frameWidth,
+    region.y / frameHeight,
   ];
   if (mapping.some((value, i) => value !== entry.mapping[i])) {
     device.queue.writeBuffer(entry.uniforms, 0, new Float32Array(mapping));
@@ -329,3 +342,71 @@ export const blitYuvFrame = (
     entry.wrapper.endAccess()?.fence.destroy();
   }
 };
+
+/**
+ * iOS: draws a whole NV12 decoder buffer into `target`, converting YUV to RGB
+ * with the buffer's YCbCr matrix and range, in its decoded orientation (the
+ * frame's rotation applies when it is drawn, as for BGRA frames). Submits the
+ * draw. AVAssetReader hands out buffers from a pool rather than a fixed few,
+ * so each frame is imported for this draw alone, unlike Android's: the import
+ * ends right after the submit (Dawn keeps the surface for the in-flight
+ * draw), while the caller holds the frame's lease until the draw completed.
+ */
+export const blitNv12Frame = (
+  device: GPUDevice,
+  source: NativeVideoFrame,
+  target: GPUTexture,
+): void => {
+  "worklet";
+  const blit = getYuvBlit(device);
+  const pipeline = getPipeline(device, blit, target.format);
+  if (!blit.wholeFrame) {
+    blit.wholeFrame = device.createBuffer({
+      label: "video NV12 blit uniforms",
+      size: 16,
+      usage: videoUniformBufferUsage,
+    });
+    device.queue.writeBuffer(
+      blit.wholeFrame,
+      0,
+      new Float32Array([1, 1, 0, 0]),
+    );
+  }
+  const external = device.importExternalTexture({
+    label: "video decoder buffer",
+    source,
+    sourceColorSpace,
+  });
+  try {
+    const encoder = device.createCommandEncoder({ label: "video NV12 blit" });
+    const pass = encoder.beginRenderPass({
+      label: "video NV12 blit",
+      colorAttachments: [
+        {
+          view: target.createView(),
+          loadOp: "clear",
+          clearValue: { r: 0, g: 0, b: 0, a: 1 },
+          storeOp: "store",
+        },
+      ],
+    });
+    pass.setPipeline(pipeline);
+    pass.setBindGroup(
+      0,
+      device.createBindGroup({
+        label: "video NV12 blit",
+        layout: blit.layout,
+        entries: [
+          { binding: 0, resource: external },
+          { binding: 1, resource: blit.sampler },
+          { binding: 2, resource: { buffer: blit.wholeFrame } },
+        ],
+      }),
+    );
+    pass.draw(3);
+    pass.end();
+    device.queue.submit([encoder.finish()]);
+  } finally {
+    (external as GPUExternalTexture & { destroy?: () => void }).destroy?.();
+  }
+};