Its working now

src/client/lazy-app/util/index.ts

@@ -192,17 +192,35 @@ interface DrawableToImageDataOptions {
   sh?: number;
 }
 
+function getWidth(
+  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
+): number {
+  if ('displayWidth' in drawable) {
+    return drawable.displayWidth;
+  }
+  return drawable.width;
+}
+
+function getHeight(
+  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
+): number {
+  if ('displayHeight' in drawable) {
+    return drawable.displayHeight;
+  }
+  return drawable.height;
+}
+
 export function drawableToImageData(
-  drawable: ImageBitmap | HTMLImageElement,
+  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
   opts: DrawableToImageDataOptions = {},
 ): ImageData {
   const {
-    width = drawable.width,
+    width = getWidth(drawable),
-    height = drawable.height,
+    height = getHeight(drawable),
     sx = 0,
     sy = 0,
-    sw = drawable.width,
+    sw = getWidth(drawable),
-    sh = drawable.height,
+    sh = getHeight(drawable),
   } = opts;
 
   // Make canvas same size as image

src/client/lazy-app/util/web-codecs/index.ts

@@ -21,6 +21,6 @@ export async function decode(
     // Non-obvious way to turn an Blob into a ReadableStream
     data: new Response(blob).body!,
   });
-  const result = await decoder.decode();
+  const { image } = await decoder.decode();
-  return drawableToImageData(result.image);
+  return drawableToImageData(image);
 }

src/client/lazy-app/util/web-codecs/missing-types.d.ts

@@ -18,8 +18,47 @@ interface ImageDecodeResult {
   complete: boolean;
 }
 
-// Absolutely not correct, but it’s all we need and I’m lazy.
+// I didn’t do all the types because the class is kinda complex.
-type VideoFrame = ImageBitmap;
+// I focused on what we need.
+declare class VideoFrame {
+  codedWidth: number;
+  codedHeight: number;
+  cropLeft: number;
+  cropTop: number;
+  cropWidth: number;
+  cropHeight: number;
+  displayWidth: number;
+  displayHeight: number;
+
+  clone(): VideoFrame;
+  close(): void;
+}
+
+interface CanvasDrawImage {
+  drawImage(
+    image: CanvasImageSource | VideoFrame,
+    dx: number,
+    dy: number,
+  ): void;
+  drawImage(
+    image: CanvasImageSource | VideoFrame,
+    dx: number,
+    dy: number,
+    dw: number,
+    dh: number,
+  ): void;
+  drawImage(
+    image: CanvasImageSource | VideoFrame,
+    sx: number,
+    sy: number,
+    sw: number,
+    sh: number,
+    dx: number,
+    dy: number,
+    dw: number,
+    dh: number,
+  ): void;
+}
 
 declare class ImageDecoder {
   static isTypeSupported(type: string): Promise<boolean>;