@yume-chan/scrcpy-decoder-webcodecs 0.0.17 → 0.0.18

package/CHANGELOG.json

@@ -1,6 +1,18 @@
 {
   "name": "@yume-chan/scrcpy-decoder-webcodecs",
   "entries": [
+    {
+      "version": "0.0.18",
+      "tag": "@yume-chan/scrcpy-decoder-webcodecs_v0.0.18",
+      "date": "Wed, 25 Jan 2023 21:33:49 GMT",
+      "comments": {
+        "none": [
+          {
+            "comment": "Change to not use vertical sync to minimize latency"
+          }
+        ]
+      }
+    },
     {
       "version": "0.0.17",
       "tag": "@yume-chan/scrcpy-decoder-webcodecs_v0.0.17",

package/CHANGELOG.md

@@ -1,6 +1,13 @@
 # Change Log - @yume-chan/scrcpy-decoder-webcodecs
 
-This log was last generated on Tue, 18 Oct 2022 09:32:30 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Jan 2023 21:33:49 GMT and should not be manually modified.
+
+## 0.0.18
+Wed, 25 Jan 2023 21:33:49 GMT
+
+### Updates
+
+- Change to not use vertical sync to minimize latency
 
 ## 0.0.17
 Tue, 18 Oct 2022 09:32:30 GMT

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020-2022 Simon Chan
+Copyright (c) 2020-2023 Simon Chan
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,13 +1,13 @@
 # @yume-chan/scrcpy-decoder-webcodecs
 
-Decode and render video stream using the [WebCodecs API](https://developer.mozilla.org/en-US/docs/Web/API/WebCodecs_API).
+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 are only available on recent versions of Chrome.
+It has no dependencies and high performance, but is only available on recent versions of Chrome.
 
 **WARNING:** The public API is UNSTABLE. If you have any questions, please open an issue.
 
-- [Compatibility](#compatibility)
-- [Usage](#usage)
+-   [Compatibility](#compatibility)
+-   [Usage](#usage)
 
 ## Compatibility
 
@@ -17,11 +17,13 @@ It has no dependencies and high performance, but are only available on recent ve
 
 ## 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.element); // It draws frames onto `decoder.element`
+document.body.appendChild(decoder.renderer);
 
 videoPacketStream // from `@yume-chan/scrcpy`
     .pipeTo(decoder.writable)
-    .catch(() => { });
+    .catch(() => {});
 ```

package/esm/index.d.ts

@@ -1,5 +1,5 @@
-import type { ScrcpyVideoStreamPacket } from '@yume-chan/scrcpy';
-import { WritableStream } from '@yume-chan/stream-extra';
+import { type ScrcpyVideoStreamPacket } from "@yume-chan/scrcpy";
+import { WritableStream } from "@yume-chan/stream-extra";
 export declare class WebCodecsDecoder {
     readonly maxProfile: undefined;
     readonly maxLevel: undefined;
@@ -9,12 +9,14 @@ export declare class WebCodecsDecoder {
     get renderer(): HTMLCanvasElement;
     private _frameRendered;
     get frameRendered(): number;
+    private _frameSkipped;
+    get frameSkipped(): number;
     private context;
     private decoder;
-    private lastFrame;
-    private animationFrame;
+    private currentFrameRendered;
+    private animationFrameId;
     constructor();
-    private render;
+    private onFramePresented;
     private configure;
     dispose(): void;
 }

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAqB,uBAAuB,EAAE,MAAM,mBAAmB,CAAC;AACpF,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAMzD,qBAAa,gBAAgB;IAGzB,SAAgB,UAAU,YAAa;IACvC,SAAgB,QAAQ,YAAa;IAErC,OAAO,CAAC,SAAS,CAA0C;IAC3D,IAAW,QAAQ,4CAA6B;IAEhD,OAAO,CAAC,SAAS,CAAoB;IACrC,IAAW,QAAQ,sBAA6B;IAEhD,OAAO,CAAC,cAAc,CAAK;IAC3B,IAAW,aAAa,WAAkC;IAE1D,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,OAAO,CAAe;IAG9B,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,cAAc,CAAa;;IAwCnC,OAAO,CAAC,MAAM,CASZ;IAEF,OAAO,CAAC,SAAS;IAeV,OAAO;CAIjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAEH,KAAK,uBAAuB,EAC/B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAMzD,qBAAa,gBAAgB;IAGzB,SAAgB,UAAU,YAAa;IACvC,SAAgB,QAAQ,YAAa;IAErC,OAAO,CAAC,SAAS,CAA0C;IAC3D,IAAW,QAAQ,4CAElB;IAED,OAAO,CAAC,SAAS,CAAoB;IACrC,IAAW,QAAQ,sBAElB;IAED,OAAO,CAAC,cAAc,CAAK;IAC3B,IAAW,aAAa,WAEvB;IAED,OAAO,CAAC,aAAa,CAAK;IAC1B,IAAW,YAAY,WAEtB;IAED,OAAO,CAAC,OAAO,CAA2B;IAC1C,OAAO,CAAC,OAAO,CAAe;IAE9B,OAAO,CAAC,oBAAoB,CAAS;IACrC,OAAO,CAAC,gBAAgB,CAAK;;IAqD7B,OAAO,CAAC,gBAAgB,CAGtB;IAEF,OAAO,CAAC,SAAS;IAiBV,OAAO;CAIjB"}

package/esm/index.js

@@ -1,6 +1,6 @@
-import { WritableStream } from '@yume-chan/stream-extra';
+import { WritableStream } from "@yume-chan/stream-extra";
 function toHex(value) {
-    return value.toString(16).padStart(2, '0').toUpperCase();
+    return value.toString(16).padStart(2, "0").toUpperCase();
 }
 export class WebCodecsDecoder {
     // Usually, browsers can decode most configurations,
@@ -8,58 +8,72 @@ export class WebCodecsDecoder {
     maxProfile = undefined;
     maxLevel = undefined;
     _writable;
-    get writable() { return this._writable; }
+    get writable() {
+        return this._writable;
+    }
     _renderer;
-    get renderer() { return this._renderer; }
+    get renderer() {
+        return this._renderer;
+    }
     _frameRendered = 0;
-    get frameRendered() { return this._frameRendered; }
+    get frameRendered() {
+        return this._frameRendered;
+    }
+    _frameSkipped = 0;
+    get frameSkipped() {
+        return this._frameSkipped;
+    }
     context;
     decoder;
-    // Limit FPS to system refresh rate
-    lastFrame;
-    animationFrame = 0;
+    currentFrameRendered = false;
+    animationFrameId = 0;
     constructor() {
-        this._renderer = document.createElement('canvas');
-        this.context = this._renderer.getContext('2d');
+        this._renderer = document.createElement("canvas");
+        this.context = this._renderer.getContext("2d");
         this.decoder = new VideoDecoder({
             output: (frame) => {
-                if (this.lastFrame) {
-                    this.lastFrame.close();
+                if (this.currentFrameRendered) {
+                    this._frameSkipped += 1;
                 }
-                this.lastFrame = frame;
-                if (!this.animationFrame) {
-                    // Start render loop on first frame
-                    this.render();
+                else {
+                    this.currentFrameRendered = true;
+                    this._frameRendered += 1;
                 }
+                // 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.context.drawImage(frame, 0, 0);
+                frame.close();
+            },
+            error(e) {
+                void e;
             },
-            error() { },
         });
         this._writable = new WritableStream({
-            write: async (packet) => {
+            write: (packet) => {
                 switch (packet.type) {
-                    case 'configuration':
+                    case "configuration":
                         this.configure(packet.data);
                         break;
-                    case 'frame':
+                    case "frame":
                         this.decoder.decode(new EncodedVideoChunk({
                             // Treat `undefined` as `key`, otherwise won't decode.
-                            type: packet.keyframe === false ? 'delta' : 'key',
+                            type: packet.keyframe === false ? "delta" : "key",
                             timestamp: 0,
                             data: packet.data,
                         }));
                         break;
                 }
-            }
+            },
         });
+        this.onFramePresented();
     }
-    render = () => {
-        if (this.lastFrame) {
-            this._frameRendered += 1;
-            this.context.drawImage(this.lastFrame, 0, 0);
-            this.lastFrame.close();
-            this.lastFrame = undefined;
-        }
-        this.animationFrame = requestAnimationFrame(this.render);
+    onFramePresented = () => {
+        this.currentFrameRendered = false;
+        this.animationFrameId = requestAnimationFrame(this.onFramePresented);
     };
     configure(config) {
         const { profileIndex, constraintSet, levelIndex } = config;
@@ -67,14 +81,16 @@ export class WebCodecsDecoder {
         this._renderer.height = config.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('')}`;
+        const codec = `avc1.${[profileIndex, constraintSet, levelIndex]
+            .map(toHex)
+            .join("")}`;
         this.decoder.configure({
             codec: codec,
             optimizeForLatency: true,
         });
     }
     dispose() {
-        cancelAnimationFrame(this.animationFrame);
+        cancelAnimationFrame(this.animationFrameId);
         this.decoder.close();
     }
 }

package/esm/index.js.map

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

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@yume-chan/scrcpy-decoder-webcodecs",
-  "version": "0.0.17",
-  "description": "TypeScript implementation of Scrcpy.",
+  "version": "0.0.18",
+  "description": "Raw H.264 stream decoder and renderer using WebCodecs API (requires modern browser).",
   "keywords": [
     "adb",
     "android-phone",
-    "scrcpy-decoder-webcodecs"
+    "scrcpy",
+    "scrcpy-decoder"
   ],
   "license": "MIT",
   "author": {
@@ -26,22 +27,25 @@
   "main": "esm/index.js",
   "types": "esm/index.d.ts",
   "dependencies": {
-    "@types/dom-webcodecs": "^0.1.3",
-    "@yume-chan/stream-extra": "^0.0.17",
-    "@yume-chan/scrcpy": "^0.0.17",
-    "tslib": "^2.4.0"
+    "@types/dom-webcodecs": "^0.1.5",
+    "@yume-chan/scrcpy": "^0.0.18",
+    "@yume-chan/stream-extra": "^0.0.18",
+    "tslib": "^2.4.1"
   },
   "devDependencies": {
-    "@jest/globals": "^28.1.2",
-    "@yume-chan/ts-package-builder": "^1.0.0",
+    "@jest/globals": "^29.3.1",
+    "@yume-chan/eslint-config": "^1.0.0",
+    "@yume-chan/tsconfig": "^1.0.0",
     "cross-env": "^7.0.3",
-    "jest": "^28.1.2",
-    "ts-jest": "^28.0.5",
-    "typescript": "^4.7.4"
+    "eslint": "^8.31.0",
+    "jest": "^29.3.1",
+    "ts-jest": "^29.0.4",
+    "typescript": "^4.9.4"
   },
   "scripts": {
     "build": "tsc -b tsconfig.build.json",
     "build:watch": "tsc -b tsconfig.build.json",
-    "test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage"
+    "//test": "cross-env NODE_OPTIONS=--experimental-vm-modules jest --coverage",
+    "lint": "eslint src/**/*.ts --fix"
   }
 }

package/src/index.ts

@@ -1,8 +1,11 @@
-import type { H264Configuration, ScrcpyVideoStreamPacket } from '@yume-chan/scrcpy';
-import { WritableStream } from '@yume-chan/stream-extra';
+import {
+    type H264Configuration,
+    type ScrcpyVideoStreamPacket,
+} from "@yume-chan/scrcpy";
+import { WritableStream } from "@yume-chan/stream-extra";
 
 function toHex(value: number) {
-    return value.toString(16).padStart(2, '0').toUpperCase();
+    return value.toString(16).padStart(2, "0").toUpperCase();
 }
 
 export class WebCodecsDecoder {
@@ -12,68 +15,85 @@ export class WebCodecsDecoder {
     public readonly maxLevel = undefined;
 
     private _writable: WritableStream<ScrcpyVideoStreamPacket>;
-    public get writable() { return this._writable; }
+    public get writable() {
+        return this._writable;
+    }
 
     private _renderer: HTMLCanvasElement;
-    public get renderer() { return this._renderer; }
+    public get renderer() {
+        return this._renderer;
+    }
 
     private _frameRendered = 0;
-    public get frameRendered() { return this._frameRendered; }
+    public get frameRendered() {
+        return this._frameRendered;
+    }
+
+    private _frameSkipped = 0;
+    public get frameSkipped() {
+        return this._frameSkipped;
+    }
 
     private context: CanvasRenderingContext2D;
     private decoder: VideoDecoder;
 
-    // Limit FPS to system refresh rate
-    private lastFrame: VideoFrame | undefined;
-    private animationFrame: number = 0;
+    private currentFrameRendered = false;
+    private animationFrameId = 0;
 
     public constructor() {
-        this._renderer = document.createElement('canvas');
+        this._renderer = document.createElement("canvas");
 
-        this.context = this._renderer.getContext('2d')!;
+        this.context = this._renderer.getContext("2d")!;
         this.decoder = new VideoDecoder({
             output: (frame) => {
-                if (this.lastFrame) {
-                    this.lastFrame.close();
+                if (this.currentFrameRendered) {
+                    this._frameSkipped += 1;
+                } else {
+                    this.currentFrameRendered = true;
+                    this._frameRendered += 1;
                 }
-                this.lastFrame = frame;
 
-                if (!this.animationFrame) {
-                    // Start render loop on first frame
-                    this.render();
-                }
+                // 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.context.drawImage(frame, 0, 0);
+                frame.close();
+            },
+            error(e) {
+                void e;
             },
-            error() { },
         });
 
         this._writable = new WritableStream<ScrcpyVideoStreamPacket>({
-            write: async (packet) => {
+            write: (packet) => {
                 switch (packet.type) {
-                    case 'configuration':
+                    case "configuration":
                         this.configure(packet.data);
                         break;
-                    case 'frame':
-                        this.decoder.decode(new EncodedVideoChunk({
-                            // Treat `undefined` as `key`, otherwise won't decode.
-                            type: packet.keyframe === false ? 'delta' : 'key',
-                            timestamp: 0,
-                            data: packet.data,
-                        }));
+                    case "frame":
+                        this.decoder.decode(
+                            new EncodedVideoChunk({
+                                // Treat `undefined` as `key`, otherwise won't decode.
+                                type:
+                                    packet.keyframe === false ? "delta" : "key",
+                                timestamp: 0,
+                                data: packet.data,
+                            })
+                        );
                         break;
                 }
-            }
+            },
         });
-    }
 
-    private render = () => {
-        if (this.lastFrame) {
-            this._frameRendered += 1;
-            this.context.drawImage(this.lastFrame, 0, 0);
-            this.lastFrame.close();
-            this.lastFrame = undefined;
-        }
+        this.onFramePresented();
+    }
 
-        this.animationFrame = requestAnimationFrame(this.render);
+    private onFramePresented = () => {
+        this.currentFrameRendered = false;
+        this.animationFrameId = requestAnimationFrame(this.onFramePresented);
     };
 
     private configure(config: H264Configuration) {
@@ -84,7 +104,9 @@ export class WebCodecsDecoder {
 
         // 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('')}`;
+        const codec = `avc1.${[profileIndex, constraintSet, levelIndex]
+            .map(toHex)
+            .join("")}`;
         this.decoder.configure({
             codec: codec,
             optimizeForLatency: true,
@@ -92,7 +114,7 @@ export class WebCodecsDecoder {
     }
 
     public dispose() {
-        cancelAnimationFrame(this.animationFrame);
+        cancelAnimationFrame(this.animationFrameId);
         this.decoder.close();
     }
 }

package/tsconfig.build.json

@@ -1,5 +1,5 @@
 {
-    "extends": "./node_modules/@yume-chan/ts-package-builder/tsconfig.base.json",
+    "extends": "./node_modules/@yume-chan/tsconfig/tsconfig.base.json",
     "compilerOptions": {
         "lib": [
             "ESNext",