@stream-io/video-filters-web 0.7.1 → 0.7.3

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.7.3](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.7.2...@stream-io/video-filters-web-0.7.3) (2026-03-27)
+
+### Bug Fixes
+
+- **react:** expose segmentation smoothing options and add model picker in video effects settings ([#2176](https://github.com/GetStream/stream-video-js/issues/2176)) ([edee6bf](https://github.com/GetStream/stream-video-js/commit/edee6bf8d9aacdfb2ae49fb202ba7f7d1140063f))
+
+## [0.7.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.7.1...@stream-io/video-filters-web-0.7.2) (2026-01-30)
+
+### Bug Fixes
+
+- **react:** improve logic for calculating the lower / upper threshold for video filter degradation ([#2094](https://github.com/GetStream/stream-video-js/issues/2094)) ([5cd2d5c](https://github.com/GetStream/stream-video-js/commit/5cd2d5cb34fc7bbdfaf9529eb9f8d33a40346cab))
+
 ## [0.7.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.7.0...@stream-io/video-filters-web-0.7.1) (2026-01-27)
 
 ### Bug Fixes

package/dist/index.cjs.js

@@ -1561,7 +1561,7 @@ const createTFLiteSIMDModule = (__Module) => {
   return __Module.ready;
 };
 
-const version = "0.7.1";
+const version = "0.7.3";
 const packageName = "@stream-io/video-filters-web";
 
 // @ts-expect-error - module is not declared
@@ -1602,19 +1602,13 @@ const loadMediaPipe = async (options = {}) => {
     return model;
 };
 
+/**
+ * Maps blur level to blur strength values.
+ */
 const BACKGROUND_BLUR_MAP = {
-    low: {
-        bgBlur: 5,
-        bgBlurRadius: 3,
-    },
-    medium: {
-        bgBlur: 15,
-        bgBlurRadius: 4,
-    },
-    high: {
-        bgBlur: 30,
-        bgBlurRadius: 5,
-    },
+    low: 3,
+    medium: 5,
+    high: 7,
 };
 
 class WebGLRenderer {
@@ -2115,9 +2109,9 @@ class WebGLRenderer {
         gl.activeTexture(gl.TEXTURE2);
         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, options.isSelfieMode ? 1 : 0);
         gl.enableVertexAttribArray(stateUpdateLocations.position);
         gl.bindBuffer(gl.ARRAY_BUFFER, this.positionBuffer);
@@ -2500,10 +2494,7 @@ class BaseVideoProcessor {
                         this.canvas.width = frame.displayWidth;
                         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) {
@@ -2569,7 +2560,6 @@ class VirtualBackground extends BaseVideoProcessor {
         this.latestCategoryMask = undefined;
         this.latestConfidenceMask = undefined;
         this.lastFrameTime = -1;
-        this.count = 0;
     }
     async initialize() {
         this.webGlRenderer = new WebGLRenderer(this.canvas);
@@ -2599,11 +2589,13 @@ class VirtualBackground extends BaseVideoProcessor {
     }
     async transform(frame) {
         const currentTime = frame.timestamp;
-        const hasNewFrame = currentTime !== this.lastFrameTime;
+        const hasNewFrame = currentTime - this.lastFrameTime > 1000;
         this.lastFrameTime = currentTime;
         if (hasNewFrame && this.isSegmenterReady && this.segmenter) {
+            const start = performance.now();
             await this.runSegmentation(frame);
             this.webGlRenderer.render(frame, this.opts, this.latestCategoryMask, this.latestConfidenceMask);
+            this.updateStats(performance.now() - start);
         }
         return new VideoFrame(this.canvas, { timestamp: frame.timestamp });
     }
@@ -2640,22 +2632,19 @@ class VirtualBackground extends BaseVideoProcessor {
                 bgBlur: 0,
                 bgBlurRadius: 0,
                 isSelfieMode,
+                segmentationOptions: this.options.segmentationOptions,
             };
         }
         const blurLevel = this.options.backgroundBlurLevel;
-        if (typeof blurLevel === 'string') {
-            return {
-                ...BACKGROUND_BLUR_MAP[blurLevel],
-                backgroundSource: undefined,
-                isSelfieMode,
-            };
-        }
-        const numeric = blurLevel ?? 5;
+        const strength = typeof blurLevel === 'string'
+            ? BACKGROUND_BLUR_MAP[blurLevel]
+            : Math.round(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,
+            segmentationOptions: this.options.segmentationOptions,
         };
     }
     async loadBackground(url) {