@yume-chan/scrcpy-decoder-webcodecs 0.0.24 → 1.0.0

package/esm/video/render/canvas.js

@@ -0,0 +1,22 @@
+import { createCanvas } from "@yume-chan/scrcpy-decoder-tinyh264";
+export class CanvasWebCodecsDecoderRenderer {
+    #canvas;
+    get canvas() {
+        return this.#canvas;
+    }
+    constructor(canvas) {
+        if (canvas) {
+            this.#canvas = canvas;
+        }
+        else {
+            this.#canvas = createCanvas();
+        }
+    }
+    setSize(width, height) {
+        if (this.#canvas.width !== width || this.#canvas.height !== height) {
+            this.#canvas.width = width;
+            this.#canvas.height = height;
+        }
+    }
+}
+//# sourceMappingURL=canvas.js.map

package/esm/video/render/canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.js","sourceRoot":"","sources":["../../../src/video/render/canvas.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAIlE,MAAM,OAAgB,8BAA8B;IAGhD,OAAO,CAAsC;IAC7C,IAAI,MAAM;QACN,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,YAAY,MAA4C;QACpD,IAAI,MAAM,EAAE,CAAC;YACT,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC;QAC1B,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,OAAO,GAAG,YAAY,EAAE,CAAC;QAClC,CAAC;IACL,CAAC;IAED,OAAO,CAAC,KAAa,EAAE,MAAc;QACjC,IAAI,IAAI,CAAC,OAAO,CAAC,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YACjE,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;YAC3B,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,MAAM,CAAC;QACjC,CAAC;IACL,CAAC;CAGJ"}

package/esm/video/render/index.d.ts

@@ -1,4 +1,6 @@
 export * from "./bitmap.js";
+export * from "./canvas.js";
+export * from "./insertable-stream.js";
 export * from "./type.js";
 export * from "./webgl.js";
 //# sourceMappingURL=index.d.ts.map

package/esm/video/render/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/video/render/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/video/render/index.ts"],"names":[],"mappings":"AAEA,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}

package/esm/video/render/index.js

@@ -1,4 +1,7 @@
+// cspell: ignore insertable
 export * from "./bitmap.js";
+export * from "./canvas.js";
+export * from "./insertable-stream.js";
 export * from "./type.js";
 export * from "./webgl.js";
 //# sourceMappingURL=index.js.map

package/esm/video/render/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/video/render/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/video/render/index.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAE5B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,wBAAwB,CAAC;AACvC,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC"}

package/esm/video/render/insertable-stream.d.ts

@@ -0,0 +1,10 @@
+import type { WebCodecsVideoDecoderRenderer } from "./type.js";
+export declare class InsertableStreamWebCodecsDecoderRenderer implements WebCodecsVideoDecoderRenderer {
+    #private;
+    static get isSupported(): boolean;
+    get element(): HTMLVideoElement;
+    constructor(element?: HTMLVideoElement);
+    setSize(width: number, height: number): void;
+    draw(frame: VideoFrame): Promise<void>;
+}
+//# sourceMappingURL=insertable-stream.d.ts.map

package/esm/video/render/insertable-stream.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"insertable-stream.d.ts","sourceRoot":"","sources":["../../../src/video/render/insertable-stream.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,WAAW,CAAC;AAQ/D,qBAAa,wCACT,YAAW,6BAA6B;;IAExC,MAAM,KAAK,WAAW,YAErB;IAGD,IAAI,OAAO,qBAEV;gBAMW,OAAO,CAAC,EAAE,gBAAgB;IAyBtC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAOtC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;CAG/C"}

package/esm/video/render/insertable-stream.js

@@ -0,0 +1,45 @@
+// cspell: ignore insertable
+export class InsertableStreamWebCodecsDecoderRenderer {
+    static get isSupported() {
+        return typeof MediaStreamTrackGenerator !== "undefined";
+    }
+    #element;
+    get element() {
+        return this.#element;
+    }
+    #generator;
+    #writer;
+    #stream;
+    constructor(element) {
+        if (element) {
+            this.#element = element;
+        }
+        else if (typeof document !== "undefined") {
+            this.#element = document.createElement("video");
+        }
+        else {
+            throw new Error("no video element input found nor any video element can be created");
+        }
+        this.#element.muted = true;
+        this.#element.autoplay = true;
+        this.#element.disablePictureInPicture = true;
+        this.#element.disableRemotePlayback = true;
+        // The spec replaced `MediaStreamTrackGenerator` with `VideoTrackGenerator`.
+        // But Chrome has not implemented it yet.
+        // https://issues.chromium.org/issues/40058895
+        this.#generator = new MediaStreamTrackGenerator({ kind: "video" });
+        this.#writer = this.#generator.writable.getWriter();
+        this.#stream = new MediaStream([this.#generator]);
+        this.#element.srcObject = this.#stream;
+    }
+    setSize(width, height) {
+        if (this.#element.width !== width || this.#element.height !== height) {
+            this.#element.width = width;
+            this.#element.height = height;
+        }
+    }
+    async draw(frame) {
+        await this.#writer.write(frame);
+    }
+}
+//# sourceMappingURL=insertable-stream.js.map

package/esm/video/render/insertable-stream.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insertable-stream.js","sourceRoot":"","sources":["../../../src/video/render/insertable-stream.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAU5B,MAAM,OAAO,wCAAwC;IAGjD,MAAM,KAAK,WAAW;QAClB,OAAO,OAAO,yBAAyB,KAAK,WAAW,CAAC;IAC5D,CAAC;IAED,QAAQ,CAAmB;IAC3B,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,UAAU,CAA4B;IACtC,OAAO,CAA0C;IACjD,OAAO,CAAc;IAErB,YAAY,OAA0B;QAClC,IAAI,OAAO,EAAE,CAAC;YACV,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QAC5B,CAAC;aAAM,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,CAAC;YACzC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QACpD,CAAC;aAAM,CAAC;YACJ,MAAM,IAAI,KAAK,CACX,mEAAmE,CACtE,CAAC;QACN,CAAC;QACD,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC;QAC3B,IAAI,CAAC,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC9B,IAAI,CAAC,QAAQ,CAAC,uBAAuB,GAAG,IAAI,CAAC;QAC7C,IAAI,CAAC,QAAQ,CAAC,qBAAqB,GAAG,IAAI,CAAC;QAE3C,4EAA4E;QAC5E,yCAAyC;QACzC,8CAA8C;QAC9C,IAAI,CAAC,UAAU,GAAG,IAAI,yBAAyB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QACnE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,SAAS,EAAE,CAAC;QAEpD,IAAI,CAAC,OAAO,GAAG,IAAI,WAAW,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;QAClD,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC,OAAO,CAAC;IAC3C,CAAC;IAED,OAAO,CAAC,KAAa,EAAE,MAAc;QACjC,IAAI,IAAI,CAAC,QAAQ,CAAC,KAAK,KAAK,KAAK,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,KAAK,MAAM,EAAE,CAAC;YACnE,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAC;YAC5B,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,MAAM,CAAC;QAClC,CAAC;IACL,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,KAAiB;QACxB,MAAM,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACpC,CAAC;CACJ"}

package/esm/video/render/type.d.ts

@@ -1,4 +1,6 @@
-export interface FrameRenderer {
-    draw(frame: VideoFrame): void;
+import type { MaybePromiseLike } from "@yume-chan/async";
+export interface WebCodecsVideoDecoderRenderer {
+    setSize(width: number, height: number): void;
+    draw(frame: VideoFrame): MaybePromiseLike<void>;
 }
 //# sourceMappingURL=type.d.ts.map

package/esm/video/render/type.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../src/video/render/type.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC1B,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAAC;CACjC"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../src/video/render/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,6BAA6B;IAC1C,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAE7C,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;CACnD"}

package/esm/video/render/webgl.d.ts

@@ -1,8 +1,9 @@
-import type { FrameRenderer } from "./type.js";
-export declare class WebGLFrameRenderer implements FrameRenderer {
+import { CanvasWebCodecsDecoderRenderer } from "./canvas.js";
+export declare class WebGLWebCodecsDecoderRenderer extends CanvasWebCodecsDecoderRenderer {
     #private;
     static vertexShaderSource: string;
     static fragmentShaderSource: string;
+    static get isSupported(): boolean;
     /**
      * Create a new WebGL frame renderer.
      * @param canvas The canvas to render frames to.
@@ -10,7 +11,7 @@ export declare class WebGLFrameRenderer implements FrameRenderer {
      * Whether to allow capturing the canvas content using APIs like `readPixels` and `toDataURL`.
      * Enable this option may reduce performance.
      */
-    constructor(canvas: HTMLCanvasElement, enableCapture: boolean);
-    draw(frame: VideoFrame): void;
+    constructor(canvas?: HTMLCanvasElement | OffscreenCanvas, enableCapture?: boolean);
+    draw(frame: VideoFrame): Promise<void>;
 }
 //# sourceMappingURL=webgl.d.ts.map

package/esm/video/render/webgl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"webgl.d.ts","sourceRoot":"","sources":["../../../src/video/render/webgl.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,qBAAa,kBAAmB,YAAW,aAAa;;IACpD,MAAM,CAAC,kBAAkB,SAW3B;IAEE,MAAM,CAAC,oBAAoB,SAQ7B;IAIE;;;;;;OAMG;gBACS,MAAM,EAAE,iBAAiB,EAAE,aAAa,EAAE,OAAO;IAiE7D,IAAI,CAAC,KAAK,EAAE,UAAU;CAezB"}
+{"version":3,"file":"webgl.d.ts","sourceRoot":"","sources":["../../../src/video/render/webgl.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAwB7D,qBAAa,6BAA8B,SAAQ,8BAA8B;;IAC7E,MAAM,CAAC,kBAAkB,SAW3B;IAEE,MAAM,CAAC,oBAAoB,SAQ7B;IAEE,MAAM,KAAK,WAAW,YAGrB;IAID;;;;;;OAMG;gBAEC,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,EAC5C,aAAa,CAAC,EAAE,OAAO;IA6D3B,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;CAgBzC"}

package/esm/video/render/webgl.js

@@ -1,4 +1,20 @@
-export class WebGLFrameRenderer {
+import { createCanvas } from "@yume-chan/scrcpy-decoder-tinyh264";
+import { CanvasWebCodecsDecoderRenderer } from "./canvas.js";
+const Resolved = Promise.resolve();
+function createContext(canvas, enableCapture) {
+    const attributes = {
+        // Low-power GPU should be enough for video rendering.
+        powerPreference: "low-power",
+        alpha: false,
+        // Disallow software rendering.
+        // Other rendering methods are faster than software-based WebGL.
+        failIfMajorPerformanceCaveat: true,
+        preserveDrawingBuffer: !!enableCapture,
+    };
+    return (canvas.getContext("webgl2", attributes) ||
+        canvas.getContext("webgl", attributes));
+}
+export class WebGLWebCodecsDecoderRenderer extends CanvasWebCodecsDecoderRenderer {
     static vertexShaderSource = `
         attribute vec2 xy;
 
@@ -20,6 +36,10 @@ export class WebGLFrameRenderer {
             gl_FragColor = texture2D(texture, uv);
         }
 `;
+    static get isSupported() {
+        const canvas = createCanvas();
+        return !!createContext(canvas);
+    }
     #context;
     /**
      * Create a new WebGL frame renderer.
@@ -29,28 +49,20 @@ export class WebGLFrameRenderer {
      * Enable this option may reduce performance.
      */
     constructor(canvas, enableCapture) {
-        const gl = canvas.getContext("webgl2", {
-            alpha: false,
-            failIfMajorPerformanceCaveat: true,
-            preserveDrawingBuffer: enableCapture,
-        }) ||
-            canvas.getContext("webgl", {
-                alpha: false,
-                failIfMajorPerformanceCaveat: true,
-                preserveDrawingBuffer: enableCapture,
-            });
+        super(canvas);
+        const gl = createContext(this.canvas, enableCapture);
         if (!gl) {
             throw new Error("WebGL not supported");
         }
         this.#context = gl;
         const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, WebGLFrameRenderer.vertexShaderSource);
+        gl.shaderSource(vertexShader, WebGLWebCodecsDecoderRenderer.vertexShaderSource);
         gl.compileShader(vertexShader);
         if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
             throw new Error(gl.getShaderInfoLog(vertexShader));
         }
         const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
-        gl.shaderSource(fragmentShader, WebGLFrameRenderer.fragmentShaderSource);
+        gl.shaderSource(fragmentShader, WebGLWebCodecsDecoderRenderer.fragmentShaderSource);
         gl.compileShader(fragmentShader);
         if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
             throw new Error(gl.getShaderInfoLog(fragmentShader));
@@ -81,9 +93,9 @@ export class WebGLFrameRenderer {
     draw(frame) {
         const gl = this.#context;
         gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frame);
-        frame.close();
         gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
         gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
+        return Resolved;
     }
 }
 //# sourceMappingURL=webgl.js.map

package/esm/video/render/webgl.js.map

@@ -1 +1 @@
-{"version":3,"file":"webgl.js","sourceRoot":"","sources":["../../../src/video/render/webgl.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"webgl.js","sourceRoot":"","sources":["../../../src/video/render/webgl.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yume-chan/scrcpy-decoder-webcodecs",
-  "version": "0.0.24",
+  "version": "1.0.0",
   "description": "Raw H.264 stream decoder and renderer using WebCodecs API (requires modern browser).",
   "keywords": [
     "adb",
@@ -26,26 +26,23 @@
   "type": "module",
   "main": "esm/index.js",
   "types": "esm/index.d.ts",
+  "sideEffects": false,
   "dependencies": {
-    "@yume-chan/event": "^0.0.24",
-    "@yume-chan/no-data-view": "^0.0.24",
-    "@yume-chan/scrcpy": "^0.0.24",
-    "@yume-chan/scrcpy-decoder-tinyh264": "^0.0.24",
-    "@yume-chan/stream-extra": "^0.0.24"
+    "@yume-chan/async": "^4.0.2",
+    "@yume-chan/no-data-view": "^1.0.0",
+    "@yume-chan/stream-extra": "^1.0.0",
+    "@yume-chan/scrcpy": "^1.0.0",
+    "@yume-chan/scrcpy-decoder-tinyh264": "^1.0.0",
+    "@yume-chan/event": "^1.0.0"
   },
   "devDependencies": {
-    "@jest/globals": "^30.0.0-alpha.4",
+    "prettier": "^3.4.1",
+    "typescript": "^5.7.2",
     "@yume-chan/eslint-config": "^1.0.0",
-    "@yume-chan/tsconfig": "^1.0.0",
-    "cross-env": "^7.0.3",
-    "jest": "^30.0.0-alpha.4",
-    "prettier": "^3.3.2",
-    "ts-jest": "^29.1.4",
-    "typescript": "^5.4.5"
+    "@yume-chan/tsconfig": "^1.0.0"
   },
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
-    "build:watch": "tsc -b tsconfig.build.json",
     "lint": "run-eslint && prettier src/**/*.ts --write --tab-width 4"
   }
 }

package/src/video/codec/h265.ts

@@ -41,6 +41,9 @@ export class H265Decoder extends H26xDecoder {
         ].join(".");
         this.#decoder.configure({
             codec,
+            // Microsoft Edge requires explicit size to work
+            codedWidth: croppedWidth,
+            codedHeight: croppedHeight,
             optimizeForLatency: true,
         });
     }

package/src/video/decoder.ts

@@ -10,11 +10,94 @@ import { WritableStream } from "@yume-chan/stream-extra";
 
 import { Av1Codec, H264Decoder, H265Decoder } from "./codec/index.js";
 import type { CodecDecoder } from "./codec/type.js";
-import type { FrameRenderer } from "./render/index.js";
-import { BitmapFrameRenderer, WebGLFrameRenderer } from "./render/index.js";
+import type { WebCodecsVideoDecoderRenderer } from "./render/index.js";
+
+class Pool<T> {
+    #controller!: ReadableStreamDefaultController<T>;
+    #readable = new ReadableStream<T>(
+        {
+            start: (controller) => {
+                this.#controller = controller;
+            },
+            pull: (controller) => {
+                controller.enqueue(this.#initializer());
+            },
+        },
+        { highWaterMark: 0 },
+    );
+    #reader = this.#readable.getReader();
+
+    #initializer: () => T;
+
+    #size = 0;
+    #capacity: number;
+
+    constructor(initializer: () => T, capacity: number) {
+        this.#initializer = initializer;
+        this.#capacity = capacity;
+    }
+
+    async borrow() {
+        const result = await this.#reader.read();
+        return result.value!;
+    }
+
+    return(value: T) {
+        if (this.#size < this.#capacity) {
+            this.#controller.enqueue(value);
+            this.#size += 1;
+        }
+    }
+}
+
+class VideoFrameCapturer {
+    #canvas: OffscreenCanvas | HTMLCanvasElement;
+    #context: ImageBitmapRenderingContext;
+
+    constructor() {
+        if (typeof OffscreenCanvas !== "undefined") {
+            this.#canvas = new OffscreenCanvas(1, 1);
+        } else {
+            this.#canvas = document.createElement("canvas");
+            this.#canvas.width = 1;
+            this.#canvas.height = 1;
+        }
+        this.#context = this.#canvas.getContext("bitmaprenderer", {
+            alpha: false,
+        })!;
+    }
+
+    async capture(frame: VideoFrame): Promise<Blob> {
+        this.#canvas.width = frame.displayWidth;
+        this.#canvas.height = frame.displayHeight;
+
+        const bitmap = await createImageBitmap(frame);
+        this.#context.transferFromImageBitmap(bitmap);
+
+        if (this.#canvas instanceof OffscreenCanvas) {
+            return await this.#canvas.convertToBlob({
+                type: "image/png",
+            });
+        } else {
+            return new Promise((resolve, reject) => {
+                (this.#canvas as HTMLCanvasElement).toBlob((blob) => {
+                    if (!blob) {
+                        reject(new Error("Failed to convert canvas to blob"));
+                    } else {
+                        resolve(blob);
+                    }
+                }, "image/png");
+            });
+        }
+    }
+}
+
+const VideoFrameCapturerPool =
+    /* #__PURE__ */
+    new Pool(() => new VideoFrameCapturer(), 4);
 
 export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
-    static isSupported() {
+    static get isSupported() {
         return typeof globalThis.VideoDecoder !== "undefined";
     }
 
@@ -22,6 +105,7 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
         {
             h264: {},
             h265: {},
+            av1: {},
         };
 
     #codec: ScrcpyVideoCodecId;
@@ -36,19 +120,23 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
         return this.#writable;
     }
 
-    #canvas: HTMLCanvasElement;
+    #error: Error | undefined;
+    #controller!: WritableStreamDefaultController;
+
+    #renderer: WebCodecsVideoDecoderRenderer;
     get renderer() {
-        return this.#canvas;
+        return this.#renderer;
     }
 
-    #frameRendered = 0;
+    #framesDraw = 0;
+    #framesPresented = 0;
     get framesRendered() {
-        return this.#frameRendered;
+        return this.#framesPresented;
     }
 
-    #frameSkipped = 0;
+    #framesSkipped = 0;
     get framesSkipped() {
-        return this.#frameSkipped;
+        return this.#framesSkipped;
     }
 
     #sizeChanged = new EventEmitter<{ width: number; height: number }>();
@@ -57,61 +145,40 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
     }
 
     #decoder: VideoDecoder;
-    #renderer: FrameRenderer;
 
-    #currentFrameRendered = false;
+    #drawing = false;
+    #nextFrame: VideoFrame | undefined;
+    #captureFrame: VideoFrame | undefined;
+
     #animationFrameId = 0;
 
     /**
      * Create a new WebCodecs video decoder.
-     * @param codec The video codec to decode
-     * @param enableCapture
-     * Whether to allow capturing the canvas content using APIs like `readPixels` and `toDataURL`.
-     * Enable this option may reduce performance.
      */
-    constructor(codec: ScrcpyVideoCodecId, enableCapture: boolean) {
+    constructor({ codec, renderer }: WebCodecsVideoDecoder.Options) {
         this.#codec = codec;
 
-        this.#canvas = document.createElement("canvas");
-
-        try {
-            this.#renderer = new WebGLFrameRenderer(
-                this.#canvas,
-                enableCapture,
-            );
-        } catch {
-            this.#renderer = new BitmapFrameRenderer(this.#canvas);
-        }
+        this.#renderer = renderer;
 
         this.#decoder = new VideoDecoder({
             output: (frame) => {
-                if (this.#currentFrameRendered) {
-                    this.#frameRendered += 1;
-                } else {
-                    this.#frameSkipped += 1;
-                }
-                this.#currentFrameRendered = false;
-
-                // PERF: Draw every frame to minimize latency at cost of performance.
-                // When multiple frames are drawn in one vertical sync interval,
-                // only the last one is visible to users.
-                // But this ensures users can always see the most up-to-date screen.
-                // This is also the behavior of official Scrcpy client.
-                // https://github.com/Genymobile/scrcpy/issues/3679
-                this.#updateSize(frame.displayWidth, frame.displayHeight);
-                this.#renderer.draw(frame);
-            },
-            error(e) {
-                if (controller) {
-                    try {
-                        controller.error(e);
-                    } catch {
-                        // ignore
-                        // `controller` may already in error state
+                this.#captureFrame?.close();
+                // PERF: `VideoFrame#clone` is cheap
+                this.#captureFrame = frame.clone();
+
+                if (this.#drawing) {
+                    if (this.#nextFrame) {
+                        this.#nextFrame.close();
+                        this.#framesSkipped += 1;
                     }
-                } else {
-                    error = e;
+                    this.#nextFrame = frame;
+                    return;
                 }
+
+                void this.#draw(frame);
+            },
+            error: (error) => {
+                this.#setError(error);
             },
         });
 
@@ -134,16 +201,16 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
                     this.#updateSize,
                 );
                 break;
+            default:
+                throw new Error(`Unsupported codec: ${this.#codec as number}`);
         }
 
-        let error: Error | undefined;
-        let controller: WritableStreamDefaultController | undefined;
         this.#writable = new WritableStream<ScrcpyMediaStreamPacket>({
-            start: (_controller) => {
-                if (error) {
-                    _controller.error(error);
+            start: (controller) => {
+                if (this.#error) {
+                    controller.error(this.#error);
                 } else {
-                    controller = _controller;
+                    this.#controller = controller;
                 }
             },
             write: (packet) => {
@@ -151,29 +218,90 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
             },
         });
 
-        this.#onFramePresented();
+        this.#onVerticalSync();
     }
 
-    #updateSize = (width: number, height: number) => {
-        if (width !== this.#canvas.width || height !== this.#canvas.height) {
-            this.#canvas.width = width;
-            this.#canvas.height = height;
-            this.#sizeChanged.fire({
-                width: width,
-                height: height,
-            });
+    #setError(error: Error) {
+        if (this.#controller) {
+            try {
+                this.#controller.error(error);
+            } catch {
+                // ignore
+            }
+        } else {
+            this.#error = error;
+        }
+    }
+
+    async #draw(frame: VideoFrame) {
+        try {
+            this.#drawing = true;
+            // PERF: Draw every frame to minimize latency at cost of performance.
+            // When multiple frames are drawn in one vertical sync interval,
+            // only the last one is visible to users.
+            // But this ensures users can always see the most up-to-date screen.
+            // This is also the behavior of official Scrcpy client.
+            // https://github.com/Genymobile/scrcpy/issues/3679
+            this.#updateSize(frame.displayWidth, frame.displayHeight);
+            await this.#renderer.draw(frame);
+            this.#framesDraw += 1;
+            frame.close();
+
+            if (this.#nextFrame) {
+                const frame = this.#nextFrame;
+                this.#nextFrame = undefined;
+                await this.#draw(frame);
+            }
+
+            this.#drawing = false;
+        } catch (error) {
+            this.#setError(error as Error);
         }
+    }
+
+    #updateSize = (width: number, height: number) => {
+        this.#renderer.setSize(width, height);
+        this.#sizeChanged.fire({ width, height });
     };
 
-    #onFramePresented = () => {
-        this.#currentFrameRendered = true;
-        this.#animationFrameId = requestAnimationFrame(this.#onFramePresented);
+    #onVerticalSync = () => {
+        if (this.#framesDraw > 0) {
+            this.#framesPresented += 1;
+            this.#framesSkipped += this.#framesDraw - 1;
+            this.#framesDraw = 0;
+        }
+        this.#animationFrameId = requestAnimationFrame(this.#onVerticalSync);
     };
 
+    async snapshot() {
+        const frame = this.#captureFrame;
+        if (!frame) {
+            return undefined;
+        }
+
+        const capturer = await VideoFrameCapturerPool.borrow();
+        const result = await capturer.capture(frame);
+        VideoFrameCapturerPool.return(capturer);
+        return result;
+    }
+
     dispose() {
         cancelAnimationFrame(this.#animationFrameId);
         if (this.#decoder.state !== "closed") {
             this.#decoder.close();
         }
+        this.#nextFrame?.close();
+        this.#captureFrame?.close();
+    }
+}
+
+export namespace WebCodecsVideoDecoder {
+    export interface Options {
+        /**
+         * The video codec to decode
+         */
+        codec: ScrcpyVideoCodecId;
+
+        renderer: WebCodecsVideoDecoderRenderer;
     }
 }