@yume-chan/scrcpy-decoder-webcodecs 2.5.3 → 3.0.0-beta.1

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

@@ -3,14 +3,27 @@ export class InsertableStreamVideoFrameRenderer {
     static get isSupported() {
         return typeof MediaStreamTrackGenerator !== "undefined";
     }
+    get type() {
+        return "hardware";
+    }
     #element;
     get element() {
         return this.#element;
     }
+    #options;
+    get options() {
+        return this.#options;
+    }
     #generator;
-    #writer;
+    get writable() {
+        return this.#generator.writable;
+    }
     #stream;
-    constructor(element) {
+    get stream() {
+        return this.#stream;
+    }
+    #abortController = new AbortController();
+    constructor(element, options) {
         if (element) {
             this.#element = element;
         }
@@ -22,24 +35,29 @@ export class InsertableStreamVideoFrameRenderer {
         }
         this.#element.muted = true;
         this.#element.autoplay = true;
+        this.#element.playsInline = true;
         this.#element.disablePictureInPicture = true;
         this.#element.disableRemotePlayback = true;
+        this.#options = options;
+        if (options?.updateSize) {
+            this.#element.addEventListener("resize", () => {
+                this.#element.width = this.#element.videoWidth;
+                this.#element.height = this.#element.videoHeight;
+            }, { signal: this.#abortController.signal });
+        }
         // 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.#generator.contentHint = "motion";
         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);
+    dispose() {
+        this.#abortController.abort();
+        this.#generator.stop();
+        this.#stream.removeTrack(this.#generator);
+        this.#element.srcObject = null;
     }
 }
 //# sourceMappingURL=insertable-stream.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"insertable-stream.js","sourceRoot":"","sources":["../../../src/video/render/insertable-stream.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAU5B,MAAM,OAAO,kCAAkC;IAC3C,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"}
+{"version":3,"file":"insertable-stream.js","sourceRoot":"","sources":["../../../src/video/render/insertable-stream.ts"],"names":[],"mappings":"AAAA,4BAA4B;AAY5B,MAAM,OAAO,kCAAkC;IAC3C,MAAM,KAAK,WAAW;QAClB,OAAO,OAAO,yBAAyB,KAAK,WAAW,CAAC;IAC5D,CAAC;IAED,IAAI,IAAI;QACJ,OAAO,UAAmB,CAAC;IAC/B,CAAC;IAED,QAAQ,CAAmB;IAC3B,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,QAAQ,CAAyD;IACjE,IAAI,OAAO;QACP,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,UAAU,CAA4B;IACtC,IAAI,QAAQ;QACR,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IACpC,CAAC;IAED,OAAO,CAAc;IACrB,IAAI,MAAM;QACN,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IAED,gBAAgB,GAAG,IAAI,eAAe,EAAE,CAAC;IAEzC,YACI,OAA0B,EAC1B,OAAoD;QAEpD,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,WAAW,GAAG,IAAI,CAAC;QACjC,IAAI,CAAC,QAAQ,CAAC,uBAAuB,GAAG,IAAI,CAAC;QAC7C,IAAI,CAAC,QAAQ,CAAC,qBAAqB,GAAG,IAAI,CAAC;QAE3C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC;QACxB,IAAI,OAAO,EAAE,UAAU,EAAE,CAAC;YACtB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAC1B,QAAQ,EACR,GAAG,EAAE;gBACD,IAAI,CAAC,QAAQ,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC;gBAC/C,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,WAAW,CAAC;YACrD,CAAC,EACD,EAAE,MAAM,EAAE,IAAI,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAC3C,CAAC;QACN,CAAC;QAED,4EAA4E;QAC5E,yCAAyC;QACzC,8CAA8C;QAC9C,IAAI,CAAC,UAAU,GAAG,IAAI,yBAAyB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QACnE,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,QAAQ,CAAC;QAEvC,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;QACH,IAAI,CAAC,gBAAgB,CAAC,KAAK,EAAE,CAAC;QAC9B,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;QAC1C,IAAI,CAAC,QAAQ,CAAC,SAAS,GAAG,IAAI,CAAC;IACnC,CAAC;CACJ"}

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

@@ -0,0 +1,31 @@
+import type { MaybePromiseLike } from "@yume-chan/async";
+/**
+ * Manages drawing and redrawing of video frames.
+ */
+export declare class RedrawController {
+    #private;
+    get lastFrame(): VideoFrame | undefined;
+    constructor(draw: (frame: VideoFrame) => MaybePromiseLike<undefined>);
+    /**
+     * Draws a new frame.
+     *
+     * If a redraw is in progress, it waits for the redraw to finish before drawing the new frame.
+     *
+     * If a redraw is in progress and another one is in queue,
+     * it cancels the queued redraw and draws the new frame instead.
+     *
+     * @param frame A `VideoFrame` to draw. The frame will be closed after drawing.
+     */
+    draw(frame: VideoFrame): Promise<undefined>;
+    /**
+     * Redraws the last drawn frame.
+     *
+     * If a draw or redraw is in progress, it waits for them to finish before redrawing.
+     *
+     * If a redraw is in progress and another one is in queue,
+     * it cancels the queued redraw and redraws the latest frame instead.
+     */
+    redraw(): Promise<undefined>;
+    dispose(): void;
+}
+//# sourceMappingURL=redraw.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"redraw.d.ts","sourceRoot":"","sources":["../../../src/video/render/redraw.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAGzD;;GAEG;AACH,qBAAa,gBAAgB;;IAOzB,IAAI,SAAS,2BAEZ;gBAEW,IAAI,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,gBAAgB,CAAC,SAAS,CAAC;IAIpE;;;;;;;;;OASG;IACH,IAAI,CAAC,KAAK,EAAE,UAAU;IAgBtB;;;;;;;OAOG;IACG,MAAM,IAAI,OAAO,CAAC,SAAS,CAAC;IAwBlC,OAAO;CAQV"}

package/esm/video/render/redraw.js

@@ -0,0 +1,75 @@
+import { TaskQueue } from "@yume-chan/stream-extra";
+/**
+ * Manages drawing and redrawing of video frames.
+ */
+export class RedrawController {
+    #draw;
+    #queue = new TaskQueue();
+    #pendingRedraw;
+    #lastFrame;
+    get lastFrame() {
+        return this.#lastFrame;
+    }
+    constructor(draw) {
+        this.#draw = draw;
+    }
+    /**
+     * Draws a new frame.
+     *
+     * If a redraw is in progress, it waits for the redraw to finish before drawing the new frame.
+     *
+     * If a redraw is in progress and another one is in queue,
+     * it cancels the queued redraw and draws the new frame instead.
+     *
+     * @param frame A `VideoFrame` to draw. The frame will be closed after drawing.
+     */
+    draw(frame) {
+        this.#pendingRedraw?.abort();
+        this.#pendingRedraw = undefined;
+        this.#lastFrame?.close();
+        this.#lastFrame = frame.clone();
+        return this.#queue.enqueue(async () => {
+            try {
+                await this.#draw(frame);
+            }
+            finally {
+                frame.close();
+            }
+        }, true);
+    }
+    /**
+     * Redraws the last drawn frame.
+     *
+     * If a draw or redraw is in progress, it waits for them to finish before redrawing.
+     *
+     * If a redraw is in progress and another one is in queue,
+     * it cancels the queued redraw and redraws the latest frame instead.
+     */
+    async redraw() {
+        if (!this.#lastFrame || this.#pendingRedraw) {
+            return;
+        }
+        const abortController = new AbortController();
+        this.#pendingRedraw = abortController;
+        return await this.#queue.enqueue(async () => {
+            if (abortController.signal.aborted) {
+                return;
+            }
+            this.#pendingRedraw = undefined;
+            const frame = this.#lastFrame.clone();
+            try {
+                await this.#draw(frame);
+            }
+            finally {
+                frame.close();
+            }
+        }, true);
+    }
+    dispose() {
+        this.#pendingRedraw?.abort();
+        this.#lastFrame?.close();
+        this.#lastFrame = undefined;
+        this.#queue.dispose();
+    }
+}
+//# sourceMappingURL=redraw.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"redraw.js","sourceRoot":"","sources":["../../../src/video/render/redraw.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD;;GAEG;AACH,MAAM,OAAO,gBAAgB;IACzB,KAAK,CAAqD;IAE1D,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;IACzB,cAAc,CAA8B;IAE5C,UAAU,CAAyB;IACnC,IAAI,SAAS;QACT,OAAO,IAAI,CAAC,UAAU,CAAC;IAC3B,CAAC;IAED,YAAY,IAAwD;QAChE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACtB,CAAC;IAED;;;;;;;;;OASG;IACH,IAAI,CAAC,KAAiB;QAClB,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,CAAC;QAC7B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;QAEhC,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;QAEhC,OAAO,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,IAAwB,EAAE;YACtD,IAAI,CAAC;gBACD,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;oBAAS,CAAC;gBACP,KAAK,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;IACb,CAAC;IAED;;;;;;;OAOG;IACH,KAAK,CAAC,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YAC1C,OAAO;QACX,CAAC;QAED,MAAM,eAAe,GAAG,IAAI,eAAe,EAAE,CAAC;QAC9C,IAAI,CAAC,cAAc,GAAG,eAAe,CAAC;QAEtC,OAAO,MAAM,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,IAAwB,EAAE;YAC5D,IAAI,eAAe,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;gBACjC,OAAO;YACX,CAAC;YAED,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;YAEhC,MAAM,KAAK,GAAG,IAAI,CAAC,UAAW,CAAC,KAAK,EAAE,CAAC;YACvC,IAAI,CAAC;gBACD,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC5B,CAAC;oBAAS,CAAC;gBACP,KAAK,CAAC,KAAK,EAAE,CAAC;YAClB,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;IACb,CAAC;IAED,OAAO;QACH,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,CAAC;QAE7B,IAAI,CAAC,UAAU,EAAE,KAAK,EAAE,CAAC;QACzB,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;QAE5B,IAAI,CAAC,MAAM,CAAC,OAAO,EAAE,CAAC;IAC1B,CAAC;CACJ"}

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

@@ -1,6 +1,12 @@
 import type { MaybePromiseLike } from "@yume-chan/async";
+import type { Event } from "@yume-chan/event";
+import type { ScrcpyVideoDecoder } from "@yume-chan/scrcpy-decoder-shared";
+import type { WritableStream } from "@yume-chan/stream-extra";
 export interface VideoFrameRenderer {
-    setSize(width: number, height: number): void;
-    draw(frame: VideoFrame): MaybePromiseLike<void>;
+    readonly type: ScrcpyVideoDecoder.RendererType;
+    readonly onTypeChanged?: Event<ScrcpyVideoDecoder.RendererType>;
+    readonly writable: WritableStream<VideoFrame>;
+    snapshot?(options?: ImageEncodeOptions): Promise<Blob | undefined>;
+    dispose?(): MaybePromiseLike<undefined>;
 }
 //# 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,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEzD,MAAM,WAAW,kBAAkB;IAC/B,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"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../src/video/render/type.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,kCAAkC,CAAC;AAC3E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,WAAW,kBAAkB;IAC/B,QAAQ,CAAC,IAAI,EAAE,kBAAkB,CAAC,YAAY,CAAC;IAC/C,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC;IAEhE,QAAQ,CAAC,QAAQ,EAAE,cAAc,CAAC,UAAU,CAAC,CAAC;IAE9C,QAAQ,CAAC,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC,CAAC;IAEnE,OAAO,CAAC,IAAI,gBAAgB,CAAC,SAAS,CAAC,CAAC;CAC3C"}

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

@@ -1,9 +1,20 @@
 import { CanvasVideoFrameRenderer } from "./canvas.js";
-export declare class WebGLVideoFrameRenderer extends CanvasVideoFrameRenderer {
+export declare class WebGLVideoFrameRenderer extends CanvasVideoFrameRenderer<WebGLVideoFrameRenderer.Options> {
     #private;
-    static vertexShaderSource: string;
-    static fragmentShaderSource: string;
+    static VertexShader: string;
+    static FragmentShader: string;
+    /**
+     * A single oversized triangle that covers the entire canvas.
+     */
+    static Vertices: Float32Array<ArrayBuffer>;
     static get isSupported(): boolean;
+    get type(): "hardware";
+    /**
+     * Fired when the WebGL context is lost and cannot be restored.
+     *
+     * The current renderer will be automatically disposed.
+     */
+    get onContextLost(): import("@yume-chan/event").Event<void>;
     /**
      * Create a new WebGL frame renderer.
      * @param canvas The canvas to render frames to.
@@ -11,7 +22,29 @@ export declare class WebGLVideoFrameRenderer extends CanvasVideoFrameRenderer {
      * Whether to allow capturing the canvas content using APIs like `readPixels` and `toDataURL`.
      * Enable this option may reduce performance.
      */
-    constructor(canvas?: HTMLCanvasElement | OffscreenCanvas, enableCapture?: boolean);
-    draw(frame: VideoFrame): Promise<void>;
+    constructor(options?: WebGLVideoFrameRenderer.Options);
+    snapshot(options?: ImageEncodeOptions): Promise<Blob | undefined>;
+    dispose(): undefined;
+}
+export declare namespace WebGLVideoFrameRenderer {
+    interface Options extends CanvasVideoFrameRenderer.Options {
+        /**
+         * Whether to allow capturing the canvas content using APIs
+         * like `readPixels` and `toDataURL`.
+         *
+         * Enabling this option may reduce performance.
+         */
+        enableCapture?: boolean;
+        /**
+         * The timeout in milliseconds to wait for context restoration
+         * before firing `onContextLost`.
+         *
+         * When set to 0, also disables automatic context restoration,
+         * `onContextLost` will be fired immediately when the context is lost.
+         *
+         * Default is 3000.
+         */
+        contextRestoreTimeout?: number;
+    }
 }
 //# 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":"AAEA,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAwBvD,qBAAa,uBAAwB,SAAQ,wBAAwB;;IACjE,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"}
+{"version":3,"file":"webgl.d.ts","sourceRoot":"","sources":["../../../src/video/render/webgl.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,wBAAwB,EAAE,MAAM,aAAa,CAAC;AAkDvD,qBAAa,uBAAwB,SAAQ,wBAAwB,CAAC,uBAAuB,CAAC,OAAO,CAAC;;IAClG,MAAM,CAAC,YAAY,SAarB;IAEE,MAAM,CAAC,cAAc,SAwEvB;IAEE;;OAEG;IACH,MAAM,CAAC,QAAQ,4BAAwD;IAEvE,MAAM,KAAK,WAAW,YAMrB;IAED,IAAa,IAAI,IACN,UAAU,CACpB;IAID;;;;OAIG;IACH,IAAI,aAAa,2CAEhB;IAWD;;;;;;OAMG;gBACS,OAAO,CAAC,EAAE,uBAAuB,CAAC,OAAO;IAuItC,QAAQ,CACnB,OAAO,CAAC,EAAE,kBAAkB,GAC7B,OAAO,CAAC,IAAI,GAAG,SAAS,CAAC;IAOnB,OAAO,IAAI,SAAS;CAkBhC;AAED,yBAAiB,uBAAuB,CAAC;IACrC,UAAiB,OAAQ,SAAQ,wBAAwB,CAAC,OAAO;QAC7D;;;;;WAKG;QACH,aAAa,CAAC,EAAE,OAAO,CAAC;QAExB;;;;;;;;WAQG;QACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAClC;CACJ"}

package/esm/video/render/webgl.js

@@ -1,46 +1,161 @@
-import { createCanvas } from "@yume-chan/scrcpy-decoder-tinyh264";
+// cspell: ignore highp
+// cspell: ignore mediump
+import { StickyEventEmitter } from "@yume-chan/event";
+import { glCreateContext, glIsSupported, glLoseContext, } from "@yume-chan/scrcpy-decoder-shared";
 import { CanvasVideoFrameRenderer } 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));
+function createShader(gl, type, source) {
+    const shader = gl.createShader(type);
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    return shader;
+}
+function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
+    const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
+    const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
+    const program = gl.createProgram();
+    gl.attachShader(program, vertexShader);
+    gl.attachShader(program, fragmentShader);
+    gl.linkProgram(program);
+    try {
+        if (gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            return program;
+        }
+        // Don't check shader compile status unless linking fails
+        // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#dont_check_shader_compile_status_unless_linking_fails
+        if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
+            throw new Error(gl.getShaderInfoLog(vertexShader));
+        }
+        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
+            throw new Error(gl.getShaderInfoLog(fragmentShader));
+        }
+        throw new Error(gl.getProgramInfoLog(program));
+    }
+    finally {
+        // Delete objects eagerly
+        // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#delete_objects_eagerly
+        gl.deleteShader(vertexShader);
+        gl.deleteShader(fragmentShader);
+    }
 }
 export class WebGLVideoFrameRenderer extends CanvasVideoFrameRenderer {
-    static vertexShaderSource = `
+    static VertexShader = `
         attribute vec2 xy;
 
         varying highp vec2 uv;
 
         void main(void) {
             gl_Position = vec4(xy, 0.0, 1.0);
+
             // Map vertex coordinates (-1 to +1) to UV coordinates (0 to 1).
+            uv = xy * 0.5 + 0.5;
             // UV coordinates are Y-flipped relative to vertex coordinates.
-            uv = vec2((1.0 + xy.x) / 2.0, (1.0 - xy.y) / 2.0);
+            uv.y = 1.0 - uv.y;
         }
 `;
-    static fragmentShaderSource = `
-        varying highp vec2 uv;
+    static FragmentShader = `
+        precision mediump float;
 
-        uniform sampler2D texture;
+        uniform sampler2D source;
+        uniform vec2 texelSize;
+        uniform float zoom;
 
-        void main(void) {
-            gl_FragColor = texture2D(texture, uv);
+        varying vec2 uv;
+
+        vec4 tent4(vec2 uv) {
+            vec2 dx = vec2(texelSize.x, 0.0);
+            vec2 dy = vec2(0.0, texelSize.y);
+
+            vec4 c0 = texture2D(source, uv);
+            vec4 c1 = texture2D(source, uv + dx);
+            vec4 c2 = texture2D(source, uv + dy);
+            vec4 c3 = texture2D(source, uv + dx + dy);
+
+            return 0.25 * (c0 + c1 + c2 + c3);
+        }
+
+        float mnWeight(float x) {
+            x = abs(x);
+            float x2 = x * x;
+            float x3 = x2 * x;
+
+            if (x < 1.0) {
+                return (1.0/6.0) * ((12.0 - 9.0 * (1.0/3.0) - 6.0 * (1.0/3.0)) * x3 +
+                                    (-18.0 + 12.0 * (1.0/3.0) + 6.0 * (1.0/3.0)) * x2 +
+                                    (6.0 - 2.0 * (1.0/3.0)));
+            } else if (x < 2.0) {
+                return (1.0/6.0) * ((- (1.0/3.0) - 6.0 * (1.0/3.0)) * x3 +
+                                    ((6.0 * (1.0/3.0) + 30.0 * (1.0/3.0)) * x2 +
+                                    (-12.0 * (1.0/3.0) - 48.0 * (1.0/3.0)) * x +
+                                    (8.0 * (1.0/3.0) + 24.0 * (1.0/3.0))));
+            }
+            return 0.0;
+        }
+
+        vec4 bicubicMN(vec2 uv, vec2 texelSize) {
+            vec2 texCoord = uv / texelSize;
+            vec2 base = floor(texCoord - 0.5);
+            vec2 f = texCoord - base - 0.5;
+
+            vec4 sum = vec4(0.0);
+            float total = 0.0;
+
+            for (int j = -1; j <= 2; j++) {
+                float wy = mnWeight(float(j) - f.y);
+                for (int i = -1; i <= 2; i++) {
+                    float wx = mnWeight(float(i) - f.x);
+                    float w = wx * wy;
+
+                    vec2 coord = (base + vec2(float(i), float(j)) + 0.5) * texelSize;
+                    sum += texture2D(source, coord) * w;
+                    total += w;
+                }
+            }
+            return sum / total;
+        }
+
+        void main() {
+            if (zoom > 0.95) {
+                gl_FragColor = texture2D(source, uv);
+            }
+            else if (zoom > 0.5) {
+                gl_FragColor = bicubicMN(uv, texelSize);
+            }
+            else {
+                gl_FragColor = tent4(uv);
+            }
         }
 `;
+    /**
+     * A single oversized triangle that covers the entire canvas.
+     */
+    static Vertices = new Float32Array([-1.0, -1.0, 3.0, -1.0, -1.0, 3.0]);
     static get isSupported() {
-        const canvas = createCanvas();
-        return !!createContext(canvas);
+        return glIsSupported({
+            // Disallow software rendering.
+            // `ImageBitmapRenderingContext` is faster than software-based WebGL.
+            failIfMajorPerformanceCaveat: true,
+        });
+    }
+    get type() {
+        return "hardware";
+    }
+    #contextLostTimer;
+    #onContextLost = new StickyEventEmitter();
+    /**
+     * Fired when the WebGL context is lost and cannot be restored.
+     *
+     * The current renderer will be automatically disposed.
+     */
+    get onContextLost() {
+        return this.#onContextLost.event;
     }
     #context;
+    #program;
+    #vertexBuffer;
+    #texture;
+    #texelSizeLocation;
+    #zoomLocation;
+    #abortController = new AbortController();
     /**
      * Create a new WebGL frame renderer.
      * @param canvas The canvas to render frames to.
@@ -48,54 +163,108 @@ export class WebGLVideoFrameRenderer extends CanvasVideoFrameRenderer {
      * Whether to allow capturing the canvas content using APIs like `readPixels` and `toDataURL`.
      * Enable this option may reduce performance.
      */
-    constructor(canvas, enableCapture) {
-        super(canvas);
-        const gl = createContext(this.canvas, enableCapture);
+    constructor(options) {
+        super((frame) => {
+            const gl = this.#context;
+            if (gl.isContextLost()) {
+                // The base class will close the frame.
+                return;
+            }
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frame);
+            gl.uniform2f(this.#texelSizeLocation, 1.0 / frame.codedWidth, 1.0 / frame.codedHeight);
+            gl.uniform1f(this.#zoomLocation, this.canvas.width / frame.codedWidth);
+            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
+            gl.drawArrays(gl.TRIANGLES, 0, 3);
+            gl.flush();
+        }, options);
+        const gl = glCreateContext(this.canvas, {
+            // Low-power GPU should be enough for video rendering.
+            // Note that `OffscreenCanvas` created in Web Workers can only use `low-power` anyway.
+            powerPreference: "low-power",
+            // Avoid alpha:false, which can be expensive
+            // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#avoid_alphafalse_which_can_be_expensive
+            alpha: true,
+            // Disallow software rendering.
+            // `ImageBitmapRenderingContext` is faster than software-based WebGL.
+            failIfMajorPerformanceCaveat: true,
+            preserveDrawingBuffer: !!this.options?.enableCapture,
+            // Enable desynchronized mode when not capturing to reduce latency.
+            desynchronized: !this.options?.enableCapture,
+            antialias: false,
+            depth: false,
+            premultipliedAlpha: true,
+            stencil: false,
+        });
         if (!gl) {
-            throw new Error("WebGL not supported");
+            throw new Error("WebGL not supported, check `isSupported` first");
         }
         this.#context = gl;
-        const vertexShader = gl.createShader(gl.VERTEX_SHADER);
-        gl.shaderSource(vertexShader, WebGLVideoFrameRenderer.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, WebGLVideoFrameRenderer.fragmentShaderSource);
-        gl.compileShader(fragmentShader);
-        if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
-            throw new Error(gl.getShaderInfoLog(fragmentShader));
-        }
-        const shaderProgram = gl.createProgram();
-        gl.attachShader(shaderProgram, vertexShader);
-        gl.attachShader(shaderProgram, fragmentShader);
-        gl.linkProgram(shaderProgram);
-        if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-            throw new Error(gl.getProgramInfoLog(shaderProgram));
-        }
-        gl.useProgram(shaderProgram);
+        this.#initialize();
+        this.canvas.addEventListener("webglcontextlost", (e) => {
+            if (options?.contextRestoreTimeout === 0) {
+                this.#onContextLost.fire();
+                this.dispose();
+                return;
+            }
+            // Notify WebGL we want to handle context restoration
+            e.preventDefault();
+            this.#contextLostTimer = globalThis.setTimeout(() => {
+                this.#onContextLost.fire();
+                this.dispose();
+            }, options?.contextRestoreTimeout ?? 3000);
+        }, { signal: this.#abortController.signal });
+        this.canvas.addEventListener("webglcontextrestored", () => {
+            if (this.#onContextLost.hasValue) {
+                // Don't restore context if `onContextLost` has been fired,
+                // which means the caller will handle the context loss.
+                return;
+            }
+            globalThis.clearTimeout(this.#contextLostTimer);
+            this.#contextLostTimer = undefined;
+            this.#initialize();
+            void this.redraw();
+        }, { signal: this.#abortController.signal });
+    }
+    #initialize() {
+        const gl = this.#context;
+        this.#program = createProgram(gl, WebGLVideoFrameRenderer.VertexShader, WebGLVideoFrameRenderer.FragmentShader);
+        gl.useProgram(this.#program);
         // Vertex coordinates, clockwise from bottom-left.
-        const vertexBuffer = gl.createBuffer();
-        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1.0, -1.0, -1.0, +1.0, +1.0, +1.0, +1.0, -1.0]), gl.STATIC_DRAW);
-        const xyLocation = gl.getAttribLocation(shaderProgram, "xy");
+        this.#vertexBuffer = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, this.#vertexBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, WebGLVideoFrameRenderer.Vertices, gl.STATIC_DRAW);
+        const xyLocation = gl.getAttribLocation(this.#program, "xy");
         gl.vertexAttribPointer(xyLocation, 2, gl.FLOAT, false, 0, 0);
         gl.enableVertexAttribArray(xyLocation);
+        this.#texelSizeLocation = gl.getUniformLocation(this.#program, "texelSize");
+        this.#zoomLocation = gl.getUniformLocation(this.#program, "zoom");
         // Create one texture to upload frames to.
-        const texture = gl.createTexture();
-        gl.bindTexture(gl.TEXTURE_2D, texture);
+        this.#texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, this.#texture);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
     }
-    draw(frame) {
-        const gl = this.#context;
-        gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, frame);
-        gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
-        gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
-        return Resolved;
+    async snapshot(options) {
+        if (!this.options?.enableCapture) {
+            return undefined;
+        }
+        return super.snapshot(options);
+    }
+    dispose() {
+        globalThis.clearTimeout(this.#contextLostTimer);
+        this.#onContextLost.dispose();
+        this.#abortController.abort();
+        this.#context.deleteBuffer(this.#vertexBuffer);
+        this.#context.deleteTexture(this.#texture);
+        this.#context.deleteProgram(this.#program);
+        if (!this.#context.isContextLost()) {
+            // Lose contexts eagerly
+            // https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices#lose_contexts_eagerly
+            glLoseContext(this.#context);
+        }
+        super.dispose();
     }
 }
 //# sourceMappingURL=webgl.js.map