Add a call-out to Web Codecs API

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

@@ -0,0 +1,26 @@
+import { drawableToImageData } from 'client/lazy-app/util';
+
+const hasImageDecoder = typeof ImageDecoder !== 'undefined';
+export async function isTypeSupported(mimeType: string): Promise<boolean> {
+  if (!hasImageDecoder) {
+    return false;
+  }
+  return ImageDecoder.isTypeSupported(mimeType);
+}
+export async function decode(
+  blob: Blob | File,
+  mimeType: string,
+): Promise<ImageData> {
+  if (!hasImageDecoder) {
+    throw Error(
+      `This browser does not support ImageDecoder. This function should not have been called.`,
+    );
+  }
+  const decoder = new ImageDecoder({
+    type: mimeType,
+    // Non-obvious way to turn an Blob into a ReadableStream
+    data: new Response(blob).body!,
+  });
+  const result = await decoder.decode();
+  return drawableToImageData(result.image);
+}

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

@@ -0,0 +1,28 @@
+interface ImageDecoderInit {
+  type: string;
+  data: BufferSource | ReadableStream;
+  premultiplyAlpha?: PremultiplyAlpha;
+  colorSpaceConversion?: ColorSpaceConversion;
+  desiredWidth?: number;
+  desiredHeight?: number;
+  preferAnimation?: boolean;
+}
+
+interface ImageDecodeOptions {
+  frameIndex: number;
+  completeFramesOnly: boolean;
+}
+
+interface ImageDecodeResult {
+  image: VideoFrame;
+  complete: boolean;
+}
+
+// Absolutely not correct, but it’s all we need and I’m lazy.
+type VideoFrame = ImageBitmap;
+
+declare class ImageDecoder {
+  static isTypeSupported(type: string): Promise<boolean>;
+  constructor(desc: ImageDecoderInit);
+  decode(opts?: Partial<ImageDecodeOptions>): Promise<ImageDecodeResult>;
+}