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

package/esm/{webgl.js → video/render/webgl.js}

@@ -1,47 +1,68 @@
-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;
+        attribute vec2 xy;
 
-varying highp vec2 uv;
+        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 coordinates are Y-flipped relative to vertex coordinates.
-  uv = vec2((1.0 + xy.x) / 2.0, (1.0 - xy.y) / 2.0);
-}
+        void main(void) {
+            gl_Position = vec4(xy, 0.0, 1.0);
+            // Map vertex coordinates (-1 to +1) to UV coordinates (0 to 1).
+            // UV coordinates are Y-flipped relative to vertex coordinates.
+            uv = vec2((1.0 + xy.x) / 2.0, (1.0 - xy.y) / 2.0);
+        }
 `;
     static fragmentShaderSource = `
-varying highp vec2 uv;
+        varying highp vec2 uv;
 
-uniform sampler2D texture;
+        uniform sampler2D texture;
 
-void main(void) {
-  gl_FragColor = texture2D(texture, uv);
-}
+        void main(void) {
+            gl_FragColor = texture2D(texture, uv);
+        }
 `;
+    static get isSupported() {
+        const canvas = createCanvas();
+        return !!createContext(canvas);
+    }
     #context;
-    constructor(canvas) {
-        const gl = canvas.getContext("webgl2", {
-            alpha: false,
-            failIfMajorPerformanceCaveat: true,
-        }) ||
-            canvas.getContext("webgl", {
-                alpha: false,
-                failIfMajorPerformanceCaveat: true,
-            });
+    /**
+     * Create a new WebGL frame renderer.
+     * @param canvas The canvas to render frames to.
+     * @param enableCapture
+     * 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);
         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));
@@ -72,9 +93,9 @@ void main(void) {
     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

@@ -0,0 +1 @@
+{"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.23",
+  "version": "1.0.0",
   "description": "Raw H.264 stream decoder and renderer using WebCodecs API (requires modern browser).",
   "keywords": [
     "adb",
@@ -26,28 +26,23 @@
   "type": "module",
   "main": "esm/index.js",
   "types": "esm/index.d.ts",
+  "sideEffects": false,
   "dependencies": {
-    "@yume-chan/event": "^0.0.23",
-    "@yume-chan/scrcpy": "^0.0.23",
-    "@yume-chan/scrcpy-decoder-tinyh264": "^0.0.23",
-    "@yume-chan/stream-extra": "^0.0.23",
-    "tslib": "^2.6.2"
+    "@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.3",
+    "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",
-    "eslint": "^8.57.0",
-    "jest": "^30.0.0-alpha.3",
-    "prettier": "^3.2.5",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.4.2"
+    "@yume-chan/tsconfig": "^1.0.0"
   },
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
-    "build:watch": "tsc -b tsconfig.build.json",
-    "//test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage",
-    "lint": "eslint src/**/*.ts --fix && prettier src/**/*.ts --write --tab-width 4"
+    "lint": "run-eslint && prettier src/**/*.ts --write --tab-width 4"
   }
 }

package/src/index.ts

@@ -1,247 +1 @@
-import { EventEmitter } from "@yume-chan/event";
-import type {
-    ScrcpyMediaStreamDataPacket,
-    ScrcpyMediaStreamPacket,
-} from "@yume-chan/scrcpy";
-import {
-    ScrcpyVideoCodecId,
-    h264ParseConfiguration,
-    h265ParseConfiguration,
-} from "@yume-chan/scrcpy";
-import type {
-    ScrcpyVideoDecoder,
-    ScrcpyVideoDecoderCapability,
-} from "@yume-chan/scrcpy-decoder-tinyh264";
-import { WritableStream } from "@yume-chan/stream-extra";
-
-import { BitmapFrameRenderer } from "./bitmap.js";
-import type { FrameRenderer } from "./renderer.js";
-import { WebGLFrameRenderer } from "./webgl.js";
-
-function toHex(value: number) {
-    return value.toString(16).padStart(2, "0").toUpperCase();
-}
-
-function toUint32Le(data: Uint8Array, offset: number) {
-    return (
-        data[offset]! |
-        (data[offset + 1]! << 8) |
-        (data[offset + 2]! << 16) |
-        (data[offset + 3]! << 24)
-    );
-}
-
-export class WebCodecsDecoder implements ScrcpyVideoDecoder {
-    static isSupported() {
-        return typeof globalThis.VideoDecoder !== "undefined";
-    }
-
-    static readonly capabilities: Record<string, ScrcpyVideoDecoderCapability> =
-        {
-            h264: {},
-            h265: {},
-        };
-
-    #codec: ScrcpyVideoCodecId;
-    get codec() {
-        return this.#codec;
-    }
-
-    #writable: WritableStream<ScrcpyMediaStreamPacket>;
-    get writable() {
-        return this.#writable;
-    }
-
-    #canvas: HTMLCanvasElement;
-    get renderer() {
-        return this.#canvas;
-    }
-
-    #frameRendered = 0;
-    get frameRendered() {
-        return this.#frameRendered;
-    }
-
-    #frameSkipped = 0;
-    get frameSkipped() {
-        return this.#frameSkipped;
-    }
-
-    #sizeChanged = new EventEmitter<{ width: number; height: number }>();
-    get sizeChanged() {
-        return this.#sizeChanged.event;
-    }
-
-    #decoder: VideoDecoder;
-    #config: Uint8Array | undefined;
-    #renderer: FrameRenderer;
-
-    #currentFrameRendered = false;
-    #animationFrameId = 0;
-
-    constructor(codec: ScrcpyVideoCodecId) {
-        this.#codec = codec;
-
-        this.#canvas = document.createElement("canvas");
-
-        try {
-            this.#renderer = new WebGLFrameRenderer(this.#canvas);
-        } catch {
-            this.#renderer = new BitmapFrameRenderer(this.#canvas);
-        }
-
-        this.#decoder = new VideoDecoder({
-            output: (frame) => {
-                if (this.#currentFrameRendered) {
-                    this.#frameRendered += 1;
-                } else {
-                    this.#frameSkipped += 1;
-                }
-                this.#currentFrameRendered = false;
-
-                // PERF: H.264 renderer may draw multiple frames in one vertical sync interval to minimize latency.
-                // 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.#renderer.draw(frame);
-            },
-            error(e) {
-                console.warn(
-                    "[@yume-chan/scrcpy-decoder-webcodecs]",
-                    "VideoDecoder error",
-                    e,
-                );
-            },
-        });
-
-        this.#writable = new WritableStream<ScrcpyMediaStreamPacket>({
-            write: (packet) => {
-                switch (packet.type) {
-                    case "configuration":
-                        this.#configure(packet.data);
-                        break;
-                    case "data":
-                        this.#decode(packet);
-                        break;
-                }
-            },
-        });
-
-        this.#onFramePresented();
-    }
-
-    #onFramePresented = () => {
-        this.#currentFrameRendered = true;
-        this.#animationFrameId = requestAnimationFrame(this.#onFramePresented);
-    };
-
-    #configure(data: Uint8Array) {
-        switch (this.#codec) {
-            case ScrcpyVideoCodecId.H264: {
-                const {
-                    profileIndex,
-                    constraintSet,
-                    levelIndex,
-                    croppedWidth,
-                    croppedHeight,
-                } = h264ParseConfiguration(data);
-
-                this.#canvas.width = croppedWidth;
-                this.#canvas.height = croppedHeight;
-                this.#sizeChanged.fire({
-                    width: croppedWidth,
-                    height: croppedHeight,
-                });
-
-                // https://www.rfc-editor.org/rfc/rfc6381#section-3.3
-                // ISO Base Media File Format Name Space
-                const codec = `avc1.${[profileIndex, constraintSet, levelIndex]
-                    .map(toHex)
-                    .join("")}`;
-                this.#decoder.configure({
-                    codec: codec,
-                    optimizeForLatency: true,
-                });
-                break;
-            }
-            case ScrcpyVideoCodecId.H265: {
-                const {
-                    generalProfileSpace,
-                    generalProfileIndex,
-                    generalProfileCompatibilitySet,
-                    generalTierFlag,
-                    generalLevelIndex,
-                    generalConstraintSet,
-                    croppedWidth,
-                    croppedHeight,
-                } = h265ParseConfiguration(data);
-
-                this.#canvas.width = croppedWidth;
-                this.#canvas.height = croppedHeight;
-                this.#sizeChanged.fire({
-                    width: croppedWidth,
-                    height: croppedHeight,
-                });
-
-                const codec = [
-                    "hev1",
-                    ["", "A", "B", "C"][generalProfileSpace]! +
-                        generalProfileIndex.toString(),
-                    toUint32Le(generalProfileCompatibilitySet, 0).toString(16),
-                    (generalTierFlag ? "H" : "L") +
-                        generalLevelIndex.toString(),
-                    toUint32Le(generalConstraintSet, 0)
-                        .toString(16)
-                        .toUpperCase(),
-                    toUint32Le(generalConstraintSet, 4)
-                        .toString(16)
-                        .toUpperCase(),
-                ].join(".");
-                this.#decoder.configure({
-                    codec,
-                    optimizeForLatency: true,
-                });
-                break;
-            }
-        }
-        this.#config = data;
-    }
-
-    #decode(packet: ScrcpyMediaStreamDataPacket) {
-        if (this.#decoder.state !== "configured") {
-            return;
-        }
-
-        // WebCodecs requires configuration data to be with the first frame.
-        // https://www.w3.org/TR/webcodecs-avc-codec-registration/#encodedvideochunk-type
-        let data: Uint8Array;
-        if (this.#config !== undefined) {
-            data = new Uint8Array(
-                this.#config.byteLength + packet.data.byteLength,
-            );
-            data.set(this.#config, 0);
-            data.set(packet.data, this.#config.byteLength);
-            this.#config = undefined;
-        } else {
-            data = packet.data;
-        }
-
-        this.#decoder.decode(
-            new EncodedVideoChunk({
-                // Treat `undefined` as `key`, otherwise won't decode.
-                type: packet.keyframe === false ? "delta" : "key",
-                timestamp: 0,
-                data,
-            }),
-        );
-    }
-
-    dispose() {
-        cancelAnimationFrame(this.#animationFrameId);
-        if (this.#decoder.state !== "closed") {
-            this.#decoder.close();
-        }
-    }
-}
+export * from "./video/index.js";

package/src/video/codec/av1.ts

@@ -0,0 +1,101 @@
+import type { ScrcpyMediaStreamPacket } from "@yume-chan/scrcpy";
+import { Av1 } from "@yume-chan/scrcpy";
+
+import type { CodecDecoder } from "./type.js";
+import { decimalTwoDigits } from "./utils.js";
+
+export class Av1Codec implements CodecDecoder {
+    #decoder: VideoDecoder;
+    #updateSize: (width: number, height: number) => void;
+
+    constructor(
+        decoder: VideoDecoder,
+        updateSize: (width: number, height: number) => void,
+    ) {
+        this.#decoder = decoder;
+        this.#updateSize = updateSize;
+    }
+
+    #configure(data: Uint8Array) {
+        const parser = new Av1(data);
+        const sequenceHeader = parser.searchSequenceHeaderObu();
+
+        if (!sequenceHeader) {
+            return;
+        }
+
+        const {
+            seq_profile: seqProfile,
+            seq_level_idx: [seqLevelIdx = 0],
+            max_frame_width_minus_1,
+            max_frame_height_minus_1,
+            color_config: {
+                BitDepth,
+                mono_chrome: monoChrome,
+                subsampling_x: subsamplingX,
+                subsampling_y: subsamplingY,
+                chroma_sample_position: chromaSamplePosition,
+                color_description_present_flag,
+            },
+        } = sequenceHeader;
+
+        let colorPrimaries: Av1.ColorPrimaries;
+        let transferCharacteristics: Av1.TransferCharacteristics;
+        let matrixCoefficients: Av1.MatrixCoefficients;
+        let colorRange: boolean;
+        if (color_description_present_flag) {
+            ({
+                color_primaries: colorPrimaries,
+                transfer_characteristics: transferCharacteristics,
+                matrix_coefficients: matrixCoefficients,
+                color_range: colorRange,
+            } = sequenceHeader.color_config);
+        } else {
+            colorPrimaries = Av1.ColorPrimaries.Bt709;
+            transferCharacteristics = Av1.TransferCharacteristics.Bt709;
+            matrixCoefficients = Av1.MatrixCoefficients.Bt709;
+            colorRange = false;
+        }
+
+        const width = max_frame_width_minus_1 + 1;
+        const height = max_frame_height_minus_1 + 1;
+
+        this.#updateSize(width, height);
+
+        const codec = [
+            "av01",
+            seqProfile.toString(16),
+            decimalTwoDigits(seqLevelIdx) +
+                (sequenceHeader.seq_tier[0] ? "H" : "M"),
+            decimalTwoDigits(BitDepth),
+            monoChrome ? "1" : "0",
+            (subsamplingX ? "1" : "0") +
+                (subsamplingY ? "1" : "0") +
+                chromaSamplePosition.toString(),
+            decimalTwoDigits(colorPrimaries),
+            decimalTwoDigits(transferCharacteristics),
+            decimalTwoDigits(matrixCoefficients),
+            colorRange ? "1" : "0",
+        ].join(".");
+        this.#decoder.configure({
+            codec,
+            optimizeForLatency: true,
+        });
+    }
+
+    decode(packet: ScrcpyMediaStreamPacket): void {
+        if (packet.type === "configuration") {
+            return;
+        }
+
+        this.#configure(packet.data);
+        this.#decoder.decode(
+            new EncodedVideoChunk({
+                // Treat `undefined` as `key`, otherwise it won't decode.
+                type: packet.keyframe === false ? "delta" : "key",
+                timestamp: 0,
+                data: packet.data,
+            }),
+        );
+    }
+}

package/src/video/codec/h264.ts

@@ -0,0 +1,42 @@
+import { h264ParseConfiguration } from "@yume-chan/scrcpy";
+
+import { H26xDecoder } from "./h26x.js";
+import { hexTwoDigits } from "./utils.js";
+
+export class H264Decoder extends H26xDecoder {
+    #decoder: VideoDecoder;
+    #updateSize: (width: number, height: number) => void;
+
+    constructor(
+        decoder: VideoDecoder,
+        updateSize: (width: number, height: number) => void,
+    ) {
+        super(decoder);
+        this.#decoder = decoder;
+        this.#updateSize = updateSize;
+    }
+
+    override configure(data: Uint8Array): void {
+        const {
+            profileIndex,
+            constraintSet,
+            levelIndex,
+            croppedWidth,
+            croppedHeight,
+        } = h264ParseConfiguration(data);
+
+        this.#updateSize(croppedWidth, croppedHeight);
+
+        // https://www.rfc-editor.org/rfc/rfc6381#section-3.3
+        // ISO Base Media File Format Name Space
+        const codec =
+            "avc1." +
+            hexTwoDigits(profileIndex) +
+            hexTwoDigits(constraintSet) +
+            hexTwoDigits(levelIndex);
+        this.#decoder.configure({
+            codec: codec,
+            optimizeForLatency: true,
+        });
+    }
+}

package/src/video/codec/h265.ts

@@ -0,0 +1,50 @@
+import { getUint32LittleEndian } from "@yume-chan/no-data-view";
+import { h265ParseConfiguration } from "@yume-chan/scrcpy";
+
+import { H26xDecoder } from "./h26x.js";
+import { hexDigits } from "./utils.js";
+
+export class H265Decoder extends H26xDecoder {
+    #decoder: VideoDecoder;
+    #updateSize: (width: number, height: number) => void;
+
+    constructor(
+        decoder: VideoDecoder,
+        updateSize: (width: number, height: number) => void,
+    ) {
+        super(decoder);
+        this.#decoder = decoder;
+        this.#updateSize = updateSize;
+    }
+
+    override configure(data: Uint8Array): void {
+        const {
+            generalProfileSpace,
+            generalProfileIndex,
+            generalProfileCompatibilitySet,
+            generalTierFlag,
+            generalLevelIndex,
+            generalConstraintSet,
+            croppedWidth,
+            croppedHeight,
+        } = h265ParseConfiguration(data);
+
+        this.#updateSize(croppedWidth, croppedHeight);
+
+        const codec = [
+            "hev1",
+            ["", "A", "B", "C"][generalProfileSpace]! +
+                generalProfileIndex.toString(),
+            hexDigits(getUint32LittleEndian(generalProfileCompatibilitySet, 0)),
+            (generalTierFlag ? "H" : "L") + generalLevelIndex.toString(),
+            ...Array.from(generalConstraintSet, hexDigits),
+        ].join(".");
+        this.#decoder.configure({
+            codec,
+            // Microsoft Edge requires explicit size to work
+            codedWidth: croppedWidth,
+            codedHeight: croppedHeight,
+            optimizeForLatency: true,
+        });
+    }
+}

package/src/video/codec/h26x.ts

@@ -0,0 +1,45 @@
+import type { ScrcpyMediaStreamPacket } from "@yume-chan/scrcpy";
+
+import type { CodecDecoder } from "./type.js";
+
+export abstract class H26xDecoder implements CodecDecoder {
+    #config: Uint8Array | undefined;
+    #decoder: VideoDecoder;
+
+    constructor(decoder: VideoDecoder) {
+        this.#decoder = decoder;
+    }
+
+    abstract configure(data: Uint8Array): void;
+
+    decode(packet: ScrcpyMediaStreamPacket): void {
+        if (packet.type === "configuration") {
+            this.#config = packet.data;
+            this.configure(packet.data);
+            return;
+        }
+
+        // For H.264 and H.265, when the stream is in Annex B format
+        // (which Scrcpy uses, as Android MediaCodec produces),
+        // configuration data needs to be combined with the first frame data.
+        // https://www.w3.org/TR/webcodecs-avc-codec-registration/#encodedvideochunk-type
+        let data: Uint8Array;
+        if (this.#config !== undefined) {
+            data = new Uint8Array(this.#config.length + packet.data.length);
+            data.set(this.#config, 0);
+            data.set(packet.data, this.#config.length);
+            this.#config = undefined;
+        } else {
+            data = packet.data;
+        }
+
+        this.#decoder.decode(
+            new EncodedVideoChunk({
+                // Treat `undefined` as `key`, otherwise won't decode.
+                type: packet.keyframe === false ? "delta" : "key",
+                timestamp: 0,
+                data,
+            }),
+        );
+    }
+}

package/src/video/codec/index.ts

@@ -0,0 +1,6 @@
+export * from "./av1.js";
+export * from "./h264.js";
+export * from "./h265.js";
+export * from "./h26x.js";
+export * from "./type.js";
+export * from "./utils.js";

package/src/video/codec/type.ts

@@ -0,0 +1,12 @@
+import type { ScrcpyMediaStreamPacket } from "@yume-chan/scrcpy";
+
+export interface CodecDecoder {
+    decode(packet: ScrcpyMediaStreamPacket): void;
+}
+
+export interface CodecDecoderConstructor {
+    new (
+        decoder: VideoDecoder,
+        updateSize: (width: number, height: number) => void,
+    ): CodecDecoder;
+}

package/src/video/codec/utils.ts

@@ -0,0 +1,11 @@
+export function hexDigits(value: number) {
+    return value.toString(16).toUpperCase();
+}
+
+export function hexTwoDigits(value: number) {
+    return value.toString(16).toUpperCase().padStart(2, "0");
+}
+
+export function decimalTwoDigits(value: number) {
+    return value.toString(10).padStart(2, "0");
+}