@stream-io/video-filters-web 0.7.0 → 0.7.2

package/dist/src/BaseVideoProcessor.d.ts

@@ -29,7 +29,7 @@ export declare abstract class BaseVideoProcessor {
     protected constructor(track: MediaStreamVideoTrack, hooks?: VideoTrackProcessorHooks);
     start(): Promise<MediaStreamTrack>;
     stop(): void;
-    private updateStats;
+    protected updateStats(delay: number): void;
     protected abstract initialize(): Promise<void>;
     protected abstract transform(frame: VideoFrame): Promise<VideoFrame>;
     protected onFlush(): void;

package/dist/src/VirtualBackground.d.ts

@@ -14,7 +14,6 @@ export declare class VirtualBackground extends BaseVideoProcessor {
     private latestCategoryMask;
     private latestConfidenceMask;
     private lastFrameTime;
-    private count;
     constructor(track: MediaStreamVideoTrack, options?: BackgroundOptions, hooks?: VideoTrackProcessorHooks);
     protected initialize(): Promise<void>;
     private initializeSegmenter;

package/dist/src/types.d.ts

@@ -39,7 +39,7 @@ export interface VideoTrackProcessorHooks {
     onError?: (error: unknown) => void;
     onStats?: (stats: PerformanceStats) => void;
 }
-export declare const BACKGROUND_BLUR_MAP: Record<BackgroundBlurLevel, {
-    bgBlur: number;
-    bgBlurRadius: number;
-}>;
+/**
+ * Maps blur level to blur strength values.
+ */
+export declare const BACKGROUND_BLUR_MAP: Record<'low' | 'medium' | 'high', number>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-filters-web",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",

package/src/BaseVideoProcessor.ts

@@ -64,11 +64,8 @@ export abstract class BaseVideoProcessor {
             this.canvas.height = frame.displayHeight;
           }
 
-          const start = performance.now();
           const processed = await this.transform(frame);
-          const delay = performance.now() - start;
 
-          this.updateStats(delay);
           controller.enqueue(processed);
         } catch (e) {
           this.hooks.onError?.(e);
@@ -98,7 +95,7 @@ export abstract class BaseVideoProcessor {
     this.onStop();
   }
 
-  private updateStats(delay: number): void {
+  protected updateStats(delay: number): void {
     this.frames++;
     this.delayTotal += delay;
 

package/src/VirtualBackground.ts

@@ -24,7 +24,6 @@ export class VirtualBackground extends BaseVideoProcessor {
   private latestCategoryMask: WebGLTexture | undefined = undefined;
   private latestConfidenceMask: WebGLTexture | undefined = undefined;
   private lastFrameTime = -1;
-  private count = 0;
 
   constructor(
     track: MediaStreamVideoTrack,
@@ -49,7 +48,8 @@ export class VirtualBackground extends BaseVideoProcessor {
         `https://unpkg.com/${packageName}@${version}/mediapipe`;
 
       const model =
-        this.options.modelPath || `${basePath}/models/selfie_segmenter.tflite`;
+        this.options.modelPath ||
+        `${basePath}/models/selfie_segmenter_landscape.tflite`;
 
       const fileset = await FilesetResolver.forVisionTasks(`${basePath}/wasm`);
 
@@ -70,10 +70,12 @@ export class VirtualBackground extends BaseVideoProcessor {
 
   protected async transform(frame: VideoFrame): Promise<VideoFrame> {
     const currentTime = frame.timestamp;
-    const hasNewFrame = currentTime !== this.lastFrameTime;
+    const hasNewFrame = currentTime - this.lastFrameTime > 1_000;
     this.lastFrameTime = currentTime;
 
     if (hasNewFrame && this.isSegmenterReady && this.segmenter) {
+      const start = performance.now();
+
       await this.runSegmentation(frame);
 
       this.webGlRenderer.render(
@@ -82,6 +84,8 @@ export class VirtualBackground extends BaseVideoProcessor {
         this.latestCategoryMask,
         this.latestConfidenceMask,
       );
+
+      this.updateStats(performance.now() - start);
     }
 
     return new VideoFrame(this.canvas, { timestamp: frame.timestamp });
@@ -124,20 +128,15 @@ export class VirtualBackground extends BaseVideoProcessor {
     }
 
     const blurLevel = this.options.backgroundBlurLevel;
+    const strength =
+      typeof blurLevel === 'string'
+        ? BACKGROUND_BLUR_MAP[blurLevel]
+        : Math.round(blurLevel ?? 5);
 
-    if (typeof blurLevel === 'string') {
-      return {
-        ...BACKGROUND_BLUR_MAP[blurLevel],
-        backgroundSource: undefined,
-        isSelfieMode,
-      };
-    }
-
-    const numeric = blurLevel ?? 5;
     return {
       backgroundSource: undefined,
-      bgBlur: Math.min(numeric * 3, 30),
-      bgBlurRadius: Math.min(numeric, 10),
+      bgBlur: Math.min(strength * 1.5, 20),
+      bgBlurRadius: Math.min(strength, 10),
       isSelfieMode,
     };
   }

package/src/mediapipe.ts

@@ -10,7 +10,7 @@ export const loadMediaPipe = async (
 ): Promise<ArrayBuffer> => {
   const {
     basePath = `https://unpkg.com/${packageName}@${version}/mediapipe`,
-    modelPath = `${basePath}/models/selfie_segmenter.tflite`,
+    modelPath = `${basePath}/models/selfie_segmenter_landscape.tflite`,
   } = options;
 
   const model =

package/src/types.ts

@@ -43,20 +43,11 @@ export interface VideoTrackProcessorHooks {
   onStats?: (stats: PerformanceStats) => void;
 }
 
-export const BACKGROUND_BLUR_MAP: Record<
-  BackgroundBlurLevel,
-  { bgBlur: number; bgBlurRadius: number }
-> = {
-  low: {
-    bgBlur: 5,
-    bgBlurRadius: 3,
-  },
-  medium: {
-    bgBlur: 15,
-    bgBlurRadius: 4,
-  },
-  high: {
-    bgBlur: 30,
-    bgBlurRadius: 5,
-  },
+/**
+ * Maps blur level to blur strength values.
+ */
+export const BACKGROUND_BLUR_MAP: Record<'low' | 'medium' | 'high', number> = {
+  low: 3,
+  medium: 5,
+  high: 7,
 };