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

package/src/video/decoder.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from "@yume-chan/event";
+import { StickyEventEmitter } from "@yume-chan/event";
 import type { ScrcpyMediaStreamPacket } from "@yume-chan/scrcpy";
 import { ScrcpyVideoCodecId } from "@yume-chan/scrcpy";
 import type {
@@ -10,87 +10,9 @@ import { WritableStream } from "@yume-chan/stream-extra";
 
 import { Av1Codec, H264Decoder, H265Decoder } from "./codec/index.js";
 import type { CodecDecoder } from "./codec/type.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");
-            });
-        }
-    }
-}
+import { Pool } from "./pool.js";
+import type { VideoFrameRenderer } from "./render/index.js";
+import { VideoFrameCapturer } from "./snapshot.js";
 
 const VideoFrameCapturerPool =
     /* #__PURE__ */
@@ -123,7 +45,7 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
     #error: Error | undefined;
     #controller!: WritableStreamDefaultController;
 
-    #renderer: WebCodecsVideoDecoderRenderer;
+    #renderer: VideoFrameRenderer;
     get renderer() {
         return this.#renderer;
     }
@@ -139,11 +61,21 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
         return this.#framesSkipped;
     }
 
-    #sizeChanged = new EventEmitter<{ width: number; height: number }>();
+    #sizeChanged = new StickyEventEmitter<{ width: number; height: number }>();
     get sizeChanged() {
         return this.#sizeChanged.event;
     }
 
+    #width: number = 0;
+    get width() {
+        return this.#width;
+    }
+
+    #height: number = 0;
+    get height() {
+        return this.#height;
+    }
+
     #decoder: VideoDecoder;
 
     #drawing = false;
@@ -218,7 +150,7 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
             },
         });
 
-        this.#onVerticalSync();
+        this.#handleAnimationFrame();
     }
 
     #setError(error: Error) {
@@ -261,16 +193,20 @@ export class WebCodecsVideoDecoder implements ScrcpyVideoDecoder {
 
     #updateSize = (width: number, height: number) => {
         this.#renderer.setSize(width, height);
+        this.#width = width;
+        this.#height = height;
         this.#sizeChanged.fire({ width, height });
     };
 
-    #onVerticalSync = () => {
+    #handleAnimationFrame = () => {
         if (this.#framesDraw > 0) {
             this.#framesPresented += 1;
             this.#framesSkipped += this.#framesDraw - 1;
             this.#framesDraw = 0;
         }
-        this.#animationFrameId = requestAnimationFrame(this.#onVerticalSync);
+        this.#animationFrameId = requestAnimationFrame(
+            this.#handleAnimationFrame,
+        );
     };
 
     async snapshot() {
@@ -302,6 +238,6 @@ export namespace WebCodecsVideoDecoder {
          */
         codec: ScrcpyVideoCodecId;
 
-        renderer: WebCodecsVideoDecoderRenderer;
+        renderer: VideoFrameRenderer;
     }
 }

package/src/video/pool.ts

@@ -0,0 +1,37 @@
+export 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;
+        }
+    }
+}

package/src/video/render/bitmap.ts

@@ -1,6 +1,6 @@
-import { CanvasWebCodecsDecoderRenderer } from "./canvas.js";
+import { CanvasVideoFrameRenderer } from "./canvas.js";
 
-export class BitmapWebCodecsDecoderRenderer extends CanvasWebCodecsDecoderRenderer {
+export class BitmapVideoFrameRenderer extends CanvasVideoFrameRenderer {
     #context: ImageBitmapRenderingContext;
 
     constructor(canvas?: HTMLCanvasElement | OffscreenCanvas) {

package/src/video/render/canvas.ts

@@ -1,10 +1,8 @@
 import { createCanvas } from "@yume-chan/scrcpy-decoder-tinyh264";
 
-import type { WebCodecsVideoDecoderRenderer } from "./type.js";
+import type { VideoFrameRenderer } from "./type.js";
 
-export abstract class CanvasWebCodecsDecoderRenderer
-    implements WebCodecsVideoDecoderRenderer
-{
+export abstract class CanvasVideoFrameRenderer implements VideoFrameRenderer {
     #canvas: HTMLCanvasElement | OffscreenCanvas;
     get canvas() {
         return this.#canvas;

package/src/video/render/insertable-stream.ts

@@ -1,6 +1,6 @@
 // cspell: ignore insertable
 
-import type { WebCodecsVideoDecoderRenderer } from "./type.js";
+import type { VideoFrameRenderer } from "./type.js";
 
 declare class MediaStreamTrackGenerator extends MediaStreamTrack {
     constructor(options: { kind: "audio" | "video" });
@@ -8,9 +8,7 @@ declare class MediaStreamTrackGenerator extends MediaStreamTrack {
     writable: WritableStream<VideoFrame>;
 }
 
-export class InsertableStreamWebCodecsDecoderRenderer
-    implements WebCodecsVideoDecoderRenderer
-{
+export class InsertableStreamVideoFrameRenderer implements VideoFrameRenderer {
     static get isSupported() {
         return typeof MediaStreamTrackGenerator !== "undefined";
     }

package/src/video/render/type.ts

@@ -1,6 +1,6 @@
 import type { MaybePromiseLike } from "@yume-chan/async";
 
-export interface WebCodecsVideoDecoderRenderer {
+export interface VideoFrameRenderer {
     setSize(width: number, height: number): void;
 
     draw(frame: VideoFrame): MaybePromiseLike<void>;

package/src/video/render/webgl.ts

@@ -1,6 +1,6 @@
 import { createCanvas } from "@yume-chan/scrcpy-decoder-tinyh264";
 
-import { CanvasWebCodecsDecoderRenderer } from "./canvas.js";
+import { CanvasVideoFrameRenderer } from "./canvas.js";
 
 const Resolved = Promise.resolve();
 
@@ -24,7 +24,7 @@ function createContext(
     );
 }
 
-export class WebGLWebCodecsDecoderRenderer extends CanvasWebCodecsDecoderRenderer {
+export class WebGLVideoFrameRenderer extends CanvasVideoFrameRenderer {
     static vertexShaderSource = `
         attribute vec2 xy;
 
@@ -77,7 +77,7 @@ export class WebGLWebCodecsDecoderRenderer extends CanvasWebCodecsDecoderRendere
         const vertexShader = gl.createShader(gl.VERTEX_SHADER)!;
         gl.shaderSource(
             vertexShader,
-            WebGLWebCodecsDecoderRenderer.vertexShaderSource,
+            WebGLVideoFrameRenderer.vertexShaderSource,
         );
         gl.compileShader(vertexShader);
         if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
@@ -87,7 +87,7 @@ export class WebGLWebCodecsDecoderRenderer extends CanvasWebCodecsDecoderRendere
         const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)!;
         gl.shaderSource(
             fragmentShader,
-            WebGLWebCodecsDecoderRenderer.fragmentShaderSource,
+            WebGLVideoFrameRenderer.fragmentShaderSource,
         );
         gl.compileShader(fragmentShader);
         if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {

package/src/video/snapshot.ts

@@ -0,0 +1,41 @@
+export 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");
+            });
+        }
+    }
+}