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

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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
+
+- **react:** switch selfie segmentation default to landscape model ([#2100](https://github.com/GetStream/stream-video-js/issues/2100)) ([7c5d74d](https://github.com/GetStream/stream-video-js/commit/7c5d74d79ba1eb2f5a04a60a953ea0bd46633f4a))
+
 ## [0.7.0](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.6.0...@stream-io/video-filters-web-0.7.0) (2025-12-23)
 
 ### Features

package/dist/index.cjs.js

@@ -1561,7 +1561,7 @@ const createTFLiteSIMDModule = (__Module) => {
   return __Module.ready;
 };
 
-const version = "0.7.0";
+const version = "0.7.2";
 const packageName = "@stream-io/video-filters-web";
 
 // @ts-expect-error - module is not declared
@@ -1593,7 +1593,7 @@ const fetchModel = async (modelFilePath) => {
 let lastModelFilePath = '';
 let modelFileCache;
 const loadMediaPipe = async (options = {}) => {
-    const { basePath = `https://unpkg.com/${packageName}@${version}/mediapipe`, modelPath = `${basePath}/models/selfie_segmenter.tflite`, } = options;
+    const { basePath = `https://unpkg.com/${packageName}@${version}/mediapipe`, modelPath = `${basePath}/models/selfie_segmenter_landscape.tflite`, } = options;
     const model = modelPath === lastModelFilePath && modelFileCache
         ? modelFileCache
         : await fetch(modelPath).then((r) => r.arrayBuffer());
@@ -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 {
@@ -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);
@@ -2580,7 +2570,8 @@ class VirtualBackground extends BaseVideoProcessor {
             this.opts = await this.initializeSegmenterOptions();
             const basePath = this.options.basePath ||
                 `https://unpkg.com/${packageName}@${version}/mediapipe`;
-            const model = this.options.modelPath || `${basePath}/models/selfie_segmenter.tflite`;
+            const model = this.options.modelPath ||
+                `${basePath}/models/selfie_segmenter_landscape.tflite`;
             const fileset = await tasksVision.FilesetResolver.forVisionTasks(`${basePath}/wasm`);
             this.segmenter = await tasksVision.ImageSegmenter.createFromOptions(fileset, {
                 baseOptions: { modelAssetPath: model, delegate: 'GPU' },
@@ -2598,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 });
     }
@@ -2642,18 +2635,13 @@ class VirtualBackground extends BaseVideoProcessor {
             };
         }
         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,
         };
     }