fix(noise cancellation): delay toggling until initialization is finished

- revert logic for skipping first frame

Author: jdimovska

packages/video-filters-web/src/FallbackProcessor.ts

@@ -49,6 +49,7 @@ class FallbackProcessor implements MediaStreamTrackProcessor<VideoFrame> {
     let timestamp = 0;
     const frameRate = track.getSettings().frameRate || 30;
     let frameDuration = 1000 / frameRate;
+    let lastVideoTime = -1;
 
     this.workerTimer = new WorkerTimer({ useWorker: true });
     this.readable = new ReadableStream({
@@ -76,6 +77,18 @@ class FallbackProcessor implements MediaStreamTrackProcessor<VideoFrame> {
         }
         timestamp = performance.now();
 
+        const currentTime = this.video.currentTime;
+        const hasNewFrame = currentTime !== lastVideoTime;
+
+        if (!hasNewFrame) {
+          await new Promise((r: (value?: unknown) => void) =>
+            this.workerTimer.setTimeout(r, frameDuration),
+          );
+          return;
+        }
+
+        lastVideoTime = currentTime;
+
         if (
           canvas.width !== this.video.videoWidth ||
           canvas.height !== this.video.videoHeight

packages/video-filters-web/src/VirtualBackground.ts

@@ -17,7 +17,6 @@ import { BaseVideoProcessor } from './BaseVideoProcessor';
 export class VirtualBackground extends BaseVideoProcessor {
   private segmenter: ImageSegmenter | null = null;
   private isSegmenterReady = false;
-  private isFirstFrame = true;
   private webGlRenderer!: WebGLRenderer;
 
   private opts!: SegmenterOptions;
@@ -65,12 +64,6 @@ export class VirtualBackground extends BaseVideoProcessor {
   }
 
   protected async transform(frame: VideoFrame): Promise<VideoFrame> {
-    if (this.isFirstFrame) {
-      this.isFirstFrame = false;
-
-      return new VideoFrame(frame, { timestamp: frame.timestamp });
-    }
-
     if (this.isSegmenterReady && this.segmenter) {
       await new Promise<void>((resolve) => {
         this.segmenter!.segmentForVideo(frame, frame.timestamp, (result) => {