FIX: fps

src/script/fps-ticker.ts

@@ -0,0 +1,32 @@
+export class FPSTicker {
+    private readonly interval: number;
+    private lastTime: number = 0;
+    private onTick: (deltaTime: number) => void = () => {};
+    private timeoutId: NodeJS.Timeout | null = null;
+
+    constructor(fps: number) {
+        this.interval = 1000 / fps;
+    }
+
+    public start(onTick: (deltaTime: number) => void = () => {}) {
+        this.onTick = onTick;
+        this.lastTime = Date.now();
+        this.tick();
+    }
+
+    public stop() {
+        clearTimeout(this.timeoutId!);
+    }
+
+    private tick() {
+        const now = Date.now();
+        const deltaTime = now - this.lastTime;
+
+        if (deltaTime >= this.interval) {
+            this.lastTime = now - (deltaTime % this.interval);  // Adjust for drift
+            this.onTick(deltaTime);
+        }
+
+        this.timeoutId = setTimeout(() => this.tick(), this.interval - (Date.now() - this.lastTime));
+    }
+}

src/script/real-time-renderer.ts

@@ -3,11 +3,12 @@ import {PNG} from 'pngjs';
 import {Args} from './cli';
 import {StatsPrinter} from './stats-printer';
 import {AbstractRenderer} from './abstract-renderer';
+import {FPSTicker} from './fps-ticker';
 
 export class RealTimeRenderer extends AbstractRenderer {
     private inputStream: PassThrough | null = null;
-    private intervalId: NodeJS.Timeout | null = null;
     private lastFrame: Buffer;
+    private readonly ticker: FPSTicker;
 
     constructor(args: Args) {
         super(args);
@@ -17,6 +18,7 @@ export class RealTimeRenderer extends AbstractRenderer {
             colorType: 6,
         });
         this.lastFrame = PNG.sync.write(empty);
+        this.ticker = new FPSTicker(args.fps);
     }
 
     public startEncoding() {
@@ -31,6 +33,9 @@ export class RealTimeRenderer extends AbstractRenderer {
                 `-s ${this.args.videoWidth}x${this.args.videoHeight}`,  // Frame size
                 `-r ${this.args.fps}`,                                  // Framerate
             ])
+            .outputOptions([
+                `-vf fps=fps=${this.args.fps}`,     // Framerate
+            ])
             .on('start', () => {
                 console.log('FFmpeg process started.');
             })
@@ -47,18 +52,17 @@ export class RealTimeRenderer extends AbstractRenderer {
         command.run();
 
         // Produce frames in required rate
-        const intervalDuration = Math.round(1000 / 30);
-        this.intervalId = setInterval(() => {
+        this.ticker.start(() => {
             this.inputStream!.write(this.lastFrame);
-        }, intervalDuration);
+        });
     }
 
     public addFrame(frame: Buffer) {
         this.lastFrame = frame;
     }
 
     public endEncoding() {
-        clearTimeout(this.intervalId!);
+        this.ticker.stop();
         this.inputStream!.end();
     }
 }

src/script/step-recorder.ts

@@ -45,9 +45,6 @@ export class StepRecorder extends AbstractRecorder {
                 this.progressBar.increment();
             }
 
-            // Finish with en empty frame
-            this.renderer.addEmptyFrame();
-
             this.progressBar.stop();
             await this.renderer.endEncoding();
         } catch (error) {

src/script/step-renderer.ts

@@ -61,6 +61,9 @@ export class StepRenderer extends AbstractRenderer {
                     '-f concat',    // concat frames from the frame list
                     '-safe 0'       // to prevent errors related to unsafe filenames
                 ])
+                .outputOptions([
+                    `-vf fps=fps=${this.args.fps}`,  // Framerate
+                ])
                 .on('progress', (progress: Object) => {
                     statsPrinter.print(progress);
                 })