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

package/CHANGELOG.md

@@ -1,8 +1,32 @@
 # Change Log - @yume-chan/scrcpy-decoder-webcodecs
 
+## 1.0.1
+
+### Patch Changes
+
+- 53688d3: Use PNPM workspace and Changesets to manage the monorepo.
+
+    Because Changesets doesn't support alpha versions (`0.x.x`), this version is `1.0.0`. Future versions will follow SemVer rules, for example, breaking API changes will introduce a new major version.
+
+- db8466f: Fix H.265 rendering in Microsoft Edge
+- 8e4c1ef: Add a renderer based on Insertable Stream API
+- db8466f: Add a `snapshot` method to convert the last rendered frame into PNG
+- Updated dependencies [53688d3]
+- Updated dependencies [db8466f]
+- Updated dependencies [db8466f]
+- Updated dependencies [ea5002b]
+- Updated dependencies [ea5002b]
+- Updated dependencies [db8466f]
+    - @yume-chan/scrcpy-decoder-tinyh264@1.0.1
+    - @yume-chan/no-data-view@1.0.1
+    - @yume-chan/stream-extra@1.0.1
+    - @yume-chan/scrcpy@1.0.1
+    - @yume-chan/event@1.0.1
+
 This log was last generated on Tue, 18 Jun 2024 02:49:43 GMT and should not be manually modified.
 
 ## 0.0.24
+
 Tue, 18 Jun 2024 02:49:43 GMT
 
 ### Updates
@@ -11,6 +35,7 @@ Tue, 18 Jun 2024 02:49:43 GMT
 - Add `enableCapture` option to `WebCodecsVideoDecoder` which allows `renderer.readPixels` and `renderer.toDataURL` to work. The performance will be slightly affected when enabled.
 
 ## 0.0.23
+
 Thu, 21 Mar 2024 03:15:10 GMT
 
 ### Updates
@@ -19,16 +44,19 @@ Thu, 21 Mar 2024 03:15:10 GMT
 - Add WebGL and Bitmap based video renderers, which are 1.5 to 3 times faster on Android devices
 
 ## 0.0.22
+
 Wed, 13 Dec 2023 05:57:27 GMT
 
 _Version update only_
 
 ## 0.0.21
+
 Fri, 25 Aug 2023 14:05:18 GMT
 
 _Version update only_
 
 ## 0.0.20
+
 Mon, 05 Jun 2023 02:51:41 GMT
 
 ### Updates
@@ -36,11 +64,13 @@ Mon, 05 Jun 2023 02:51:41 GMT
 - Add support for decoding H.265 on supported browsers (Chrome works, Microsoft Edge with HEVC Video Extension from Microsoft Store doesn't decode H.265 correctly).
 
 ## 0.0.19
+
 Sun, 09 Apr 2023 05:55:33 GMT
 
 _Version update only_
 
 ## 0.0.18
+
 Wed, 25 Jan 2023 21:33:49 GMT
 
 ### Updates
@@ -48,9 +78,9 @@ Wed, 25 Jan 2023 21:33:49 GMT
 - Change to not use vertical sync to minimize latency
 
 ## 0.0.17
+
 Tue, 18 Oct 2022 09:32:30 GMT
 
 ### Updates
 
 - Separated from `@yume-chan/scrcpy` for simpler dependency management.
-

package/README.md

@@ -1,29 +1,49 @@
-# @yume-chan/scrcpy-decoder-webcodecs
-
-Decode and render H.264 streams using the [WebCodecs API](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API).
-
-It has no dependencies and high performance, but is only available on recent versions of Chrome.
-
-**WARNING:** The public API is UNSTABLE. Open a GitHub discussion if you have any questions.
-
--   [Compatibility](#compatibility)
--   [Usage](#usage)
-
-## Compatibility
-
-| Chrome | Firefox | Safari | Performance                     | Supported H.264 profile/level |
-| ------ | ------- | ------ | ------------------------------- | ----------------------------- |
-| 94     | No      | No     | High with hardware acceleration | High level 5                  |
-
-## Usage
-
-It draws frames onto `decoder.renderer` (a `<canvas>` element), you can insert it anywhere you want to display the video.
-
-```ts
-const decoder = new WebCodecsDecoder();
-document.body.appendChild(decoder.renderer);
-
-videoPacketStream // from `@yume-chan/scrcpy`
-    .pipeTo(decoder.writable)
-    .catch(() => {});
-```
+<p align="center">
+    <img alt="Tango" src="https://raw.githubusercontent.com/yume-chan/ya-webadb/main/.github/logo.svg" width="200">
+</p>
+
+<h1 align="center">@yume-chan/scrcpy-decoder-webcodecs</h1>
+
+<p align="center">
+    Raw H.264 stream decoder and renderer using WebCodecs API (requires modern browser).
+</p>
+
+<p align="center">
+    <a href="https://github.com/yume-chan/ya-webadb/blob/main/LICENSE">
+        <img alt="MIT License" src="https://img.shields.io/github/license/yume-chan/ya-webadb">
+    </a>
+    <a href="https://github.com/yume-chan/ya-webadb/releases">
+        <img alt="GitHub release" src="https://img.shields.io/github/v/release/yume-chan/ya-webadb?logo=github">
+    </a>
+    <a href="https://bundlephobia.com/package/@yume-chan/scrcpy-decoder-webcodecs">
+        <img alt="Package Size" src="https://img.shields.io/bundlephobia/minzip/%40yume-chan%2Fscrcpy-decoder-webcodecs">
+    </a>
+    <a href="https://www.npmjs.com/package/@yume-chan/scrcpy-decoder-webcodecs">
+        <img alt="npm" src="https://img.shields.io/npm/dm/%40yume-chan/scrcpy-decoder-webcodecs?logo=npm">
+    </a>
+    <a href="https://discord.gg/26k3ttC2PN">
+        <img alt="Discord" src="https://img.shields.io/discord/1120215514732564502?logo=discord&logoColor=%23ffffff&label=Discord">
+    </a>
+</p>
+
+This package is part of [Tango ADB](https://github.com/yume-chan/ya-webadb). Generally you need multiple packages to build a complete ADB client that can run on Web browsers and Node.js. Read the documentation for more information.
+
+## Documentation
+
+Check the latest documentation at https://docs.tangoapp.dev/scrcpy/video/web-codecs/
+
+## Sponsors
+
+[Become a backer](https://opencollective.com/ya-webadb) and get your image on our README on Github with a link to your site.
+
+<a href="https://opencollective.com/ya-webadb/backer/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/0/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/1/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/2/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/3/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/4/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/5/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/6/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/7/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/8/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/9/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/9/avatar.svg?requireActive=false"></a>
+<a href="https://opencollective.com/ya-webadb/backer/10/website?requireActive=false" target="_blank"><img src="https://opencollective.com/ya-webadb/backer/10/avatar.svg?requireActive=false"></a>

package/esm/video/codec/h265.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"h265.d.ts","sourceRoot":"","sources":["../../../src/video/codec/h265.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,qBAAa,WAAY,SAAQ,WAAW;;gBAKpC,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI;IAO9C,SAAS,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;CA2B7C"}
+{"version":3,"file":"h265.d.ts","sourceRoot":"","sources":["../../../src/video/codec/h265.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,qBAAa,WAAY,SAAQ,WAAW;;gBAKpC,OAAO,EAAE,YAAY,EACrB,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI;IAO9C,SAAS,CAAC,IAAI,EAAE,UAAU,GAAG,IAAI;CA8B7C"}

package/esm/video/codec/h265.js

@@ -23,6 +23,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/esm/video/codec/h265.js.map

@@ -1 +1 @@
-{"version":3,"file":"h265.js","sourceRoot":"","sources":["../../../src/video/codec/h265.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,OAAO,WAAY,SAAQ,WAAW;IACxC,QAAQ,CAAe;IACvB,WAAW,CAA0C;IAErD,YACI,OAAqB,EACrB,UAAmD;QAEnD,KAAK,CAAC,OAAO,CAAC,CAAC;QACf,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;IAClC,CAAC;IAEQ,SAAS,CAAC,IAAgB;QAC/B,MAAM,EACF,mBAAmB,EACnB,mBAAmB,EACnB,8BAA8B,EAC9B,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,aAAa,GAChB,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAEjC,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;QAE9C,MAAM,KAAK,GAAG;YACV,MAAM;YACN,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,mBAAmB,CAAE;gBACrC,mBAAmB,CAAC,QAAQ,EAAE;YAClC,SAAS,CAAC,qBAAqB,CAAC,8BAA8B,EAAE,CAAC,CAAC,CAAC;YACnE,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,iBAAiB,CAAC,QAAQ,EAAE;YAC5D,GAAG,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC;SACjD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACZ,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;YACpB,KAAK;YACL,kBAAkB,EAAE,IAAI;SAC3B,CAAC,CAAC;IACP,CAAC;CACJ"}
+{"version":3,"file":"h265.js","sourceRoot":"","sources":["../../../src/video/codec/h265.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAEvC,MAAM,OAAO,WAAY,SAAQ,WAAW;IACxC,QAAQ,CAAe;IACvB,WAAW,CAA0C;IAErD,YACI,OAAqB,EACrB,UAAmD;QAEnD,KAAK,CAAC,OAAO,CAAC,CAAC;QACf,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC;IAClC,CAAC;IAEQ,SAAS,CAAC,IAAgB;QAC/B,MAAM,EACF,mBAAmB,EACnB,mBAAmB,EACnB,8BAA8B,EAC9B,eAAe,EACf,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,aAAa,GAChB,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;QAEjC,IAAI,CAAC,WAAW,CAAC,YAAY,EAAE,aAAa,CAAC,CAAC;QAE9C,MAAM,KAAK,GAAG;YACV,MAAM;YACN,CAAC,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,mBAAmB,CAAE;gBACrC,mBAAmB,CAAC,QAAQ,EAAE;YAClC,SAAS,CAAC,qBAAqB,CAAC,8BAA8B,EAAE,CAAC,CAAC,CAAC;YACnE,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,iBAAiB,CAAC,QAAQ,EAAE;YAC5D,GAAG,KAAK,CAAC,IAAI,CAAC,oBAAoB,EAAE,SAAS,CAAC;SACjD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACZ,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC;YACpB,KAAK;YACL,gDAAgD;YAChD,UAAU,EAAE,YAAY;YACxB,WAAW,EAAE,aAAa;YAC1B,kBAAkB,EAAE,IAAI;SAC3B,CAAC,CAAC;IACP,CAAC;CACJ"}

package/esm/video/decoder.d.ts

@@ -2,13 +2,14 @@ import type { ScrcpyMediaStreamPacket } from "@yume-chan/scrcpy";
 import { ScrcpyVideoCodecId } from "@yume-chan/scrcpy";
 import type { ScrcpyVideoDecoder, ScrcpyVideoDecoderCapability } from "@yume-chan/scrcpy-decoder-tinyh264";
 import { WritableStream } from "@yume-chan/stream-extra";
+import type { WebCodecsVideoDecoderRenderer } from "./render/index.js";
 export declare class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
     #private;
-    static isSupported(): boolean;
+    static get isSupported(): boolean;
     static readonly capabilities: Record<string, ScrcpyVideoDecoderCapability>;
     get codec(): ScrcpyVideoCodecId;
     get writable(): WritableStream<ScrcpyMediaStreamPacket>;
-    get renderer(): HTMLCanvasElement;
+    get renderer(): WebCodecsVideoDecoderRenderer;
     get framesRendered(): number;
     get framesSkipped(): number;
     get sizeChanged(): import("@yume-chan/event").AddEventListener<{
@@ -17,12 +18,18 @@ export declare class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
     }, unknown>;
     /**
      * 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);
+    snapshot(): Promise<Blob | undefined>;
     dispose(): void;
 }
+export declare namespace WebCodecsVideoDecoder {
+    interface Options {
+        /**
+         * The video codec to decode
+         */
+        codec: ScrcpyVideoCodecId;
+        renderer: WebCodecsVideoDecoderRenderer;
+    }
+}
 //# sourceMappingURL=decoder.d.ts.map

package/esm/video/decoder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"decoder.d.ts","sourceRoot":"","sources":["../../src/video/decoder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EACR,kBAAkB,EAClB,4BAA4B,EAC/B,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAOzD,qBAAa,qBAAsB,YAAW,kBAAkB;;IAC5D,MAAM,CAAC,WAAW;IAIlB,MAAM,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,4BAA4B,CAAC,CAIpE;IAGN,IAAI,KAAK,uBAER;IAKD,IAAI,QAAQ,4CAEX;IAGD,IAAI,QAAQ,sBAEX;IAGD,IAAI,cAAc,WAEjB;IAGD,IAAI,aAAa,WAEhB;IAGD,IAAI,WAAW;;;gBAEd;IAQD;;;;;;OAMG;gBACS,KAAK,EAAE,kBAAkB,EAAE,aAAa,EAAE,OAAO;IAqG7D,OAAO;CAMV"}
+{"version":3,"file":"decoder.d.ts","sourceRoot":"","sources":["../../src/video/decoder.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,EACR,kBAAkB,EAClB,4BAA4B,EAC/B,MAAM,oCAAoC,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAIzD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,mBAAmB,CAAC;AAsFvE,qBAAa,qBAAsB,YAAW,kBAAkB;;IAC5D,MAAM,KAAK,WAAW,YAErB;IAED,MAAM,CAAC,QAAQ,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,4BAA4B,CAAC,CAKpE;IAGN,IAAI,KAAK,uBAER;IAKD,IAAI,QAAQ,4CAEX;IAMD,IAAI,QAAQ,kCAEX;IAID,IAAI,cAAc,WAEjB;IAGD,IAAI,aAAa,WAEhB;IAGD,IAAI,WAAW;eAD0B,MAAM;gBAAU,MAAM;gBAG9D;IAUD;;OAEG;gBACS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,qBAAqB,CAAC,OAAO;IAsHxD,QAAQ;IAYd,OAAO;CAQV;AAED,yBAAiB,qBAAqB,CAAC;IACnC,UAAiB,OAAO;QACpB;;WAEG;QACH,KAAK,EAAE,kBAAkB,CAAC;QAE1B,QAAQ,EAAE,6BAA6B,CAAC;KAC3C;CACJ"}

package/esm/video/decoder.js

@@ -2,14 +2,86 @@ import { EventEmitter } from "@yume-chan/event";
 import { ScrcpyVideoCodecId } from "@yume-chan/scrcpy";
 import { WritableStream } from "@yume-chan/stream-extra";
 import { Av1Codec, H264Decoder, H265Decoder } from "./codec/index.js";
-import { BitmapFrameRenderer, WebGLFrameRenderer } from "./render/index.js";
+class Pool {
+    #controller;
+    #readable = new ReadableStream({
+        start: (controller) => {
+            this.#controller = controller;
+        },
+        pull: (controller) => {
+            controller.enqueue(this.#initializer());
+        },
+    }, { highWaterMark: 0 });
+    #reader = this.#readable.getReader();
+    #initializer;
+    #size = 0;
+    #capacity;
+    constructor(initializer, capacity) {
+        this.#initializer = initializer;
+        this.#capacity = capacity;
+    }
+    async borrow() {
+        const result = await this.#reader.read();
+        return result.value;
+    }
+    return(value) {
+        if (this.#size < this.#capacity) {
+            this.#controller.enqueue(value);
+            this.#size += 1;
+        }
+    }
+}
+class VideoFrameCapturer {
+    #canvas;
+    #context;
+    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) {
+        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.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 {
-    static isSupported() {
+    static get isSupported() {
         return typeof globalThis.VideoDecoder !== "undefined";
     }
     static capabilities = {
         h264: {},
         h265: {},
+        av1: {},
     };
     #codec;
     get codec() {
@@ -20,73 +92,53 @@ export class WebCodecsVideoDecoder {
     get writable() {
         return this.#writable;
     }
-    #canvas;
+    #error;
+    #controller;
+    #renderer;
     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();
     get sizeChanged() {
         return this.#sizeChanged.event;
     }
     #decoder;
-    #renderer;
-    #currentFrameRendered = false;
+    #drawing = false;
+    #nextFrame;
+    #captureFrame;
     #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, enableCapture) {
+    constructor({ codec, renderer }) {
         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);
+                this.#captureFrame?.close();
+                // PERF: `VideoFrame#clone` is cheap
+                this.#captureFrame = frame.clone();
+                if (this.#drawing) {
+                    if (this.#nextFrame) {
+                        this.#nextFrame.close();
+                        this.#framesSkipped += 1;
                     }
-                    catch {
-                        // ignore
-                        // `controller` may already in error state
-                    }
-                }
-                else {
-                    error = e;
+                    this.#nextFrame = frame;
+                    return;
                 }
+                void this.#draw(frame);
+            },
+            error: (error) => {
+                this.#setError(error);
             },
         });
         switch (this.#codec) {
@@ -99,43 +151,90 @@ export class WebCodecsVideoDecoder {
             case ScrcpyVideoCodecId.AV1:
                 this.#codecDecoder = new Av1Codec(this.#decoder, this.#updateSize);
                 break;
+            default:
+                throw new Error(`Unsupported codec: ${this.#codec}`);
         }
-        let error;
-        let controller;
         this.#writable = new WritableStream({
-            start: (_controller) => {
-                if (error) {
-                    _controller.error(error);
+            start: (controller) => {
+                if (this.#error) {
+                    controller.error(this.#error);
                 }
                 else {
-                    controller = _controller;
+                    this.#controller = controller;
                 }
             },
             write: (packet) => {
                 this.#codecDecoder.decode(packet);
             },
         });
-        this.#onFramePresented();
+        this.#onVerticalSync();
     }
-    #updateSize = (width, height) => {
-        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) {
+        if (this.#controller) {
+            try {
+                this.#controller.error(error);
+            }
+            catch {
+                // ignore
+            }
+        }
+        else {
+            this.#error = error;
+        }
+    }
+    async #draw(frame) {
+        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);
         }
+    }
+    #updateSize = (width, height) => {
+        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();
     }
 }
 //# sourceMappingURL=decoder.js.map

package/esm/video/decoder.js.map

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

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

@@ -1,7 +1,7 @@
-import type { FrameRenderer } from "./type.js";
-export declare class BitmapFrameRenderer implements FrameRenderer {
+import { CanvasWebCodecsDecoderRenderer } from "./canvas.js";
+export declare class BitmapWebCodecsDecoderRenderer extends CanvasWebCodecsDecoderRenderer {
     #private;
-    constructor(canvas: HTMLCanvasElement);
-    draw(frame: VideoFrame): void;
+    constructor(canvas?: HTMLCanvasElement | OffscreenCanvas);
+    draw(frame: VideoFrame): Promise<void>;
 }
 //# sourceMappingURL=bitmap.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"bitmap.d.ts","sourceRoot":"","sources":["../../../src/video/render/bitmap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE/C,qBAAa,mBAAoB,YAAW,aAAa;;gBAGzC,MAAM,EAAE,iBAAiB;IAIrC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI;CAchC"}
+{"version":3,"file":"bitmap.d.ts","sourceRoot":"","sources":["../../../src/video/render/bitmap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAE7D,qBAAa,8BAA+B,SAAQ,8BAA8B;;gBAGlE,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe;IAQlD,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;CAI/C"}

package/esm/video/render/bitmap.js

@@ -1,17 +1,15 @@
-export class BitmapFrameRenderer {
+import { CanvasWebCodecsDecoderRenderer } from "./canvas.js";
+export class BitmapWebCodecsDecoderRenderer extends CanvasWebCodecsDecoderRenderer {
     #context;
     constructor(canvas) {
-        this.#context = canvas.getContext("bitmaprenderer", { alpha: false });
-    }
-    draw(frame) {
-        createImageBitmap(frame)
-            .then((bitmap) => {
-            this.#context.transferFromImageBitmap(bitmap);
-            frame.close();
-        })
-            .catch((e) => {
-            console.warn("[@yume-chan/scrcpy-decoder-webcodecs]", "VideoDecoder error", e);
+        super(canvas);
+        this.#context = this.canvas.getContext("bitmaprenderer", {
+            alpha: false,
         });
     }
+    async draw(frame) {
+        const bitmap = await createImageBitmap(frame);
+        this.#context.transferFromImageBitmap(bitmap);
+    }
 }
 //# sourceMappingURL=bitmap.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"bitmap.js","sourceRoot":"","sources":["../../../src/video/render/bitmap.ts"],"names":[],"mappings":"AAEA,MAAM,OAAO,mBAAmB;IAC5B,QAAQ,CAA8B;IAEtC,YAAY,MAAyB;QACjC,IAAI,CAAC,QAAQ,GAAG,MAAM,CAAC,UAAU,CAAC,gBAAgB,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,CAAE,CAAC;IAC3E,CAAC;IAED,IAAI,CAAC,KAAiB;QAClB,iBAAiB,CAAC,KAAK,CAAC;aACnB,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACb,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC;YAC9C,KAAK,CAAC,KAAK,EAAE,CAAC;QAClB,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE;YACT,OAAO,CAAC,IAAI,CACR,uCAAuC,EACvC,oBAAoB,EACpB,CAAC,CACJ,CAAC;QACN,CAAC,CAAC,CAAC;IACX,CAAC;CACJ"}
+{"version":3,"file":"bitmap.js","sourceRoot":"","sources":["../../../src/video/render/bitmap.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,OAAO,8BAA+B,SAAQ,8BAA8B;IAC9E,QAAQ,CAA8B;IAEtC,YAAY,MAA4C;QACpD,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,gBAAgB,EAAE;YACrD,KAAK,EAAE,KAAK;SACf,CAAE,CAAC;IACR,CAAC;IAED,KAAK,CAAC,IAAI,CAAC,KAAiB;QACxB,MAAM,MAAM,GAAG,MAAM,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC9C,IAAI,CAAC,QAAQ,CAAC,uBAAuB,CAAC,MAAM,CAAC,CAAC;IAClD,CAAC;CACJ"}

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

@@ -0,0 +1,9 @@
+import type { WebCodecsVideoDecoderRenderer } from "./type.js";
+export declare abstract class CanvasWebCodecsDecoderRenderer implements WebCodecsVideoDecoderRenderer {
+    #private;
+    get canvas(): HTMLCanvasElement | OffscreenCanvas;
+    constructor(canvas?: HTMLCanvasElement | OffscreenCanvas);
+    setSize(width: number, height: number): void;
+    abstract draw(frame: VideoFrame): Promise<void>;
+}
+//# sourceMappingURL=canvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../../src/video/render/canvas.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,WAAW,CAAC;AAE/D,8BAAsB,8BAClB,YAAW,6BAA6B;;IAGxC,IAAI,MAAM,wCAET;gBAEW,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe;IAQxD,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,IAAI;IAO5C,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,OAAO,CAAC,IAAI,CAAC;CAClD"}