Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Unverified Commit af78fcb8 authored by Simon Chan's avatar Simon Chan
Browse files

feat(scrcpy): re-work fps counter

parent d23b2a4d

apps/demo/pages/scrcpy.tsx

+0 −12
Original line number Diff line number Diff line
@@ -351,18 +351,6 @@ class ScrcpyPageState { 
            }

        });



        let fpsIntervalId: any;

        autorun(() => {

            if (this.decoder) {

                const decoder = this.decoder;

                fpsIntervalId = setInterval(action(() => {

                    this.log.push(`[renderer] FPS: ${decoder.fpsCounter.value}`);

                }), 1000);

            } else {

                clearInterval(fpsIntervalId);

            }

        });



        if (typeof window !== 'undefined' && typeof window.VideoDecoder === 'function') {

            setTimeout(action(() => {

                this.decoders.unshift({

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

+5 −5
Original line number Diff line number Diff line
@@ -2,7 +2,7 @@ import { WritableStream } from "@yume-chan/adb"; 
import { PromiseResolver } from "@yume-chan/async";

import { AndroidCodecLevel, AndroidCodecProfile } from "../../codec.js";

import type { VideoStreamPacket } from "../../options/index.js";

import { FpsCounter, H264Configuration, H264Decoder } from "../types.js";

import type { H264Configuration, H264Decoder } from "../types.js";

import { createTinyH264Wrapper, type TinyH264Wrapper } from "./wrapper.js";



let cachedInitializePromise: Promise<{ YuvBuffer: typeof import('yuv-buffer'), YuvCanvas: typeof import('yuv-canvas').default; }> | undefined;
@@ -23,12 +23,12 @@ export class TinyH264Decoder implements H264Decoder { 


    public readonly maxLevel = AndroidCodecLevel.Level4;



    private _fpsCounter = new FpsCounter();

    public get fpsCounter() { return this._fpsCounter; }



    private _renderer: HTMLCanvasElement;

    public get renderer() { return this._renderer; }



    private _frameRendered = 0;

    public get frameRendered() { return this._frameRendered; }



    private _writable: WritableStream<VideoStreamPacket>;

    public get writable() { return this._writable; }
@@ -94,7 +94,7 @@ export class TinyH264Decoder implements H264Decoder { 
        const uPlaneOffset = encodedWidth * encodedHeight;

        const vPlaneOffset = uPlaneOffset + chromaWidth * chromaHeight;

        wrapper.onPictureReady(({ data }) => {

            this._fpsCounter.add();

            this._frameRendered += 1;

            const array = new Uint8Array(data);

            const frame = YuvBuffer.frame(format,

                YuvBuffer.lumaPlane(format, array, encodedWidth, 0),

libraries/scrcpy/src/decoder/types.ts

+1 −15
Original line number Diff line number Diff line
@@ -3,20 +3,6 @@ import type { Disposable } from "@yume-chan/event"; 
import type { AndroidCodecLevel, AndroidCodecProfile } from "../codec.js";

import type { VideoStreamPacket } from "../options/index.js";



export class FpsCounter {

    private _value = 0;



    public get value() {

        const value = this._value;

        this._value = 0;

        return value;

    }



    public add() {

        this._value += 1;

    }

}



export interface H264Configuration {

    profileIndex: number;

    constraintSet: number;
@@ -39,8 +25,8 @@ export interface H264Decoder extends Disposable { 
    readonly maxProfile: AndroidCodecProfile | undefined;

    readonly maxLevel: AndroidCodecLevel | undefined;



    readonly fpsCounter: FpsCounter;

    readonly renderer: HTMLElement;

    readonly frameRendered: number;

    readonly writable: WritableStream<VideoStreamPacket>;

}

libraries/scrcpy/src/decoder/web-codecs/index.ts

+5 −5
Original line number Diff line number Diff line 
import { WritableStream } from '@yume-chan/adb';

import type { VideoStreamPacket } from "../../options/index.js";

import { FpsCounter, H264Configuration, H264Decoder } from "../types.js";

import type { H264Configuration, H264Decoder } from "../types.js";



function toHex(value: number) {

    return value.toString(16).padStart(2, '0').toUpperCase();
@@ -12,15 +12,15 @@ export class WebCodecsDecoder implements H264Decoder { 
    public readonly maxProfile = undefined;

    public readonly maxLevel = undefined;



    private _fpsCounter = new FpsCounter();

    public get fpsCounter() { return this._fpsCounter; }



    private _writable: WritableStream<VideoStreamPacket>;

    public get writable() { return this._writable; }



    private _renderer: HTMLCanvasElement;

    public get renderer() { return this._renderer; }



    private _frameRendered = 0;

    public get frameRendered() { return this._frameRendered; }



    private context: CanvasRenderingContext2D;

    private decoder: VideoDecoder;
@@ -67,7 +67,7 @@ export class WebCodecsDecoder implements H264Decoder { 


    private render = () => {

        if (this.lastFrame) {

            this._fpsCounter.add();

            this._frameRendered += 1;

            this.context.drawImage(this.lastFrame, 0, 0);

            this.lastFrame.close();

            this.lastFrame = undefined;