feat(scrcpy-decoder): record skipped frame count

.vscode/settings.json

@@ -5,6 +5,7 @@
         "allowlist",
         "arraybuffer",
         "autorun",
+        "Bframes",
         "brotli",
         "Callout",
         "Cascadia",

apps/demo/src/components/scrcpy/settings.tsx

@@ -184,6 +184,7 @@ export interface H264Decoder extends Disposable {
 
     readonly renderer: HTMLElement;
     readonly frameRendered: number;
+    readonly frameSkipped: number;
     readonly writable: WritableStream<ScrcpyVideoStreamPacket>;
 }
 

apps/demo/src/components/scrcpy/state.tsx

@@ -67,7 +67,7 @@ export class ScrcpyPageState {
     decoder: H264Decoder | undefined = undefined;
     configuration: ScrcpyVideoStreamConfigurationPacket | undefined = undefined;
     fpsCounterIntervalId: any = undefined;
-    fps = 0;
+    fps = "0";
 
     connecting = false;
     serverTotalSize = 0;
@@ -199,11 +199,22 @@ export class ScrcpyPageState {
             runInAction(() => {
                 this.decoder = decoder;
 
-                let lastFrameCount = 0;
+                let lastFrameRendered = 0;
+                let lastFrameSkipped = 0;
                 this.fpsCounterIntervalId = setInterval(
                     action(() => {
-                        this.fps = decoder.frameRendered - lastFrameCount;
+                        const deltaRendered =
-                        lastFrameCount = decoder.frameRendered;
+                            decoder.frameRendered - lastFrameRendered;
+                        const deltaSkipped =
+                            decoder.frameSkipped - lastFrameSkipped;
+                        // prettier-ignore
+                        this.fps = `${
+                            deltaRendered
+                        }${
+                            deltaSkipped ? `+${deltaSkipped} skipped` : ""
+                        }`;
+                        lastFrameRendered = decoder.frameRendered;
+                        lastFrameSkipped = decoder.frameSkipped;
                     }),
                     1000
                 );
@@ -328,7 +339,7 @@ export class ScrcpyPageState {
             RECORD_STATE.recording = false;
         }
 
-        this.fps = 0;
+        this.fps = "0";
         clearTimeout(this.fpsCounterIntervalId);
 
         this.client = undefined;

libraries/scrcpy-decoder-tinyh264/src/index.ts

@@ -43,6 +43,11 @@ export class TinyH264Decoder {
         return this._frameRendered;
     }
 
+    private _frameSkipped = 0;
+    public get frameSkipped() {
+        return this._frameSkipped;
+    }
+
     private _writable: WritableStream<ScrcpyVideoStreamPacket>;
     public get writable() {
         return this._writable;

libraries/scrcpy-decoder-webcodecs/src/index.ts

@@ -29,6 +29,11 @@ export class WebCodecsDecoder {
         return this._frameRendered;
     }
 
+    private _frameSkipped = 0;
+    public get frameSkipped() {
+        return this._frameSkipped;
+    }
+
     private context: CanvasRenderingContext2D;
     private decoder: VideoDecoder;
 
@@ -43,6 +48,7 @@ export class WebCodecsDecoder {
         this.decoder = new VideoDecoder({
             output: (frame) => {
                 if (this.lastFrame) {
+                    this._frameSkipped += 1;
                     this.lastFrame.close();
                 }
                 this.lastFrame = frame;

libraries/scrcpy/src/options/1_16/codec-options.ts

@@ -13,6 +13,7 @@ export interface CodecOptionsInit {
     level: AndroidCodecLevel;
 
     iFrameInterval: number;
+    maxBframes: number;
     repeatPreviousFrameAfter: number;
     maxPtsGapToEncoder: number;
 }