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

package/dist/src/WebGLRenderer.d.ts

@@ -75,6 +75,11 @@ export declare class WebGLRenderer {
         bgBlur: number;
         bgBlurRadius: number;
         isSelfieMode: boolean;
+        segmentationOptions?: {
+            smoothingFactor?: number;
+            smoothstepMin?: number;
+            smoothstepMax?: number;
+        };
     }, categoryTexture?: WebGLTexture, confidenceTexture?: WebGLTexture): void;
     close(): void;
 }

package/dist/src/types.d.ts

@@ -7,11 +7,41 @@ export type BackgroundSource = {
 };
 export type BackgroundFilter = 'blur' | 'image';
 export type BackgroundBlurLevel = 'low' | 'medium' | 'high' | number;
+/**
+ * Options for controlling the segmentation mask smoothing.
+ * These values are passed to the WebGL shader that blends
+ * consecutive segmentation masks over time.
+ */
+export interface SegmentationOptions {
+    /**
+     * Controls how fast the mask adapts to new segmentation results.
+     * Higher values make the mask react faster but may cause flickering.
+     * Lower values produce smoother transitions but increase latency.
+     * Value should be between 0 and 1.
+     * @default 0.8
+     */
+    smoothingFactor?: number;
+    /**
+     * Lower edge of the smoothstep function applied to the confidence mask.
+     * Confidence values below this are mapped to 0 (background).
+     * Value should be between 0 and 1, and less than smoothstepMax.
+     * @default 0.6
+     */
+    smoothstepMin?: number;
+    /**
+     * Upper edge of the smoothstep function applied to the confidence mask.
+     * Confidence values above this are mapped to 1 (foreground).
+     * Value should be between 0 and 1, and greater than smoothstepMin.
+     * @default 0.9
+     */
+    smoothstepMax?: number;
+}
 export interface SegmenterOptions {
     backgroundSource?: BackgroundSource | null;
     bgBlur: number;
     bgBlurRadius: number;
     isSelfieMode: boolean;
+    segmentationOptions?: SegmentationOptions;
 }
 /**
  * Static configuration for the processor, defining which background
@@ -23,6 +53,7 @@ export interface BackgroundOptions {
     backgroundFilter?: BackgroundFilter;
     backgroundBlurLevel?: BackgroundBlurLevel;
     backgroundImage?: string | undefined;
+    segmentationOptions?: SegmentationOptions;
 }
 /**
  * Performance statistics for video processing.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-filters-web",
-  "version": "0.7.2",
+  "version": "0.7.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -28,7 +28,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
-    "@mediapipe/tasks-vision": "^0.10.22-rc.20250304",
+    "@mediapipe/tasks-vision": "^0.10.34",
     "@stream-io/worker-timer": "^1.2.5",
     "wasm-feature-detect": "^1.8.0"
   },

package/src/VirtualBackground.ts

@@ -63,8 +63,9 @@ export class VirtualBackground extends BaseVideoProcessor {
 
       this.isSegmenterReady = true;
     } catch (error) {
-      console.error('[virtual-background] Segmenter init failed:', error);
       this.isSegmenterReady = false;
+      this.hooks.onError?.(error);
+      throw error;
     }
   }
 
@@ -124,6 +125,7 @@ export class VirtualBackground extends BaseVideoProcessor {
         bgBlur: 0,
         bgBlurRadius: 0,
         isSelfieMode,
+        segmentationOptions: this.options.segmentationOptions,
       };
     }
 
@@ -138,13 +140,18 @@ export class VirtualBackground extends BaseVideoProcessor {
       bgBlur: Math.min(strength * 1.5, 20),
       bgBlurRadius: Math.min(strength, 10),
       isSelfieMode,
+      segmentationOptions: this.options.segmentationOptions,
     };
   }
 
   private async loadBackground(url?: string) {
     if (!url) return null;
-    const result = await fetch(url);
-    if (!result.ok) return null;
+    const result = await fetch(url, { signal: this.abortController.signal });
+    if (!result.ok) {
+      throw new Error(
+        `[virtual-background] Failed to load background image: ${result.status} ${result.statusText}`,
+      );
+    }
 
     return {
       type: 'image',

package/src/WebGLRenderer.ts

@@ -754,6 +754,11 @@ export class WebGLRenderer {
       bgBlur: number;
       bgBlurRadius: number;
       isSelfieMode: boolean;
+      segmentationOptions?: {
+        smoothingFactor?: number;
+        smoothstepMin?: number;
+        smoothstepMax?: number;
+      };
     },
     categoryTexture?: WebGLTexture,
     confidenceTexture?: WebGLTexture,
@@ -864,9 +869,18 @@ export class WebGLRenderer {
     gl.bindTexture(gl.TEXTURE_2D, prevStateTexture);
     gl.uniform1i(stateUpdateLocations.prevStateTexture, 2);
 
-    gl.uniform1f(stateUpdateLocations.smoothingFactor, 0.8);
-    gl.uniform1f(stateUpdateLocations.smoothstepMin, 0.6);
-    gl.uniform1f(stateUpdateLocations.smoothstepMax, 0.9);
+    gl.uniform1f(
+      stateUpdateLocations.smoothingFactor,
+      options.segmentationOptions?.smoothingFactor ?? 0.8,
+    );
+    gl.uniform1f(
+      stateUpdateLocations.smoothstepMin,
+      options.segmentationOptions?.smoothstepMin ?? 0.6,
+    );
+    gl.uniform1f(
+      stateUpdateLocations.smoothstepMax,
+      options.segmentationOptions?.smoothstepMax ?? 0.9,
+    );
 
     gl.uniform1i(
       stateUpdateLocations.selfieModel,

package/src/types.ts

@@ -8,11 +8,44 @@ export type BackgroundSource = {
 export type BackgroundFilter = 'blur' | 'image';
 export type BackgroundBlurLevel = 'low' | 'medium' | 'high' | number;
 
+/**
+ * Options for controlling the segmentation mask smoothing.
+ * These values are passed to the WebGL shader that blends
+ * consecutive segmentation masks over time.
+ */
+export interface SegmentationOptions {
+  /**
+   * Controls how fast the mask adapts to new segmentation results.
+   * Higher values make the mask react faster but may cause flickering.
+   * Lower values produce smoother transitions but increase latency.
+   * Value should be between 0 and 1.
+   * @default 0.8
+   */
+  smoothingFactor?: number;
+
+  /**
+   * Lower edge of the smoothstep function applied to the confidence mask.
+   * Confidence values below this are mapped to 0 (background).
+   * Value should be between 0 and 1, and less than smoothstepMax.
+   * @default 0.6
+   */
+  smoothstepMin?: number;
+
+  /**
+   * Upper edge of the smoothstep function applied to the confidence mask.
+   * Confidence values above this are mapped to 1 (foreground).
+   * Value should be between 0 and 1, and greater than smoothstepMin.
+   * @default 0.9
+   */
+  smoothstepMax?: number;
+}
+
 export interface SegmenterOptions {
   backgroundSource?: BackgroundSource | null;
   bgBlur: number;
   bgBlurRadius: number;
   isSelfieMode: boolean;
+  segmentationOptions?: SegmentationOptions;
 }
 /**
  * Static configuration for the processor, defining which background
@@ -24,6 +57,7 @@ export interface BackgroundOptions {
   backgroundFilter?: BackgroundFilter;
   backgroundBlurLevel?: BackgroundBlurLevel;
   backgroundImage?: string | undefined;
+  segmentationOptions?: SegmentationOptions;
 }
 
 /**