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

package/dist/index.es.js

@@ -1559,7 +1559,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
@@ -1591,7 +1591,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());
@@ -1600,19 +1600,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 {
@@ -2498,10 +2492,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) {
@@ -2567,7 +2558,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);
@@ -2578,7 +2568,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 FilesetResolver.forVisionTasks(`${basePath}/wasm`);
             this.segmenter = await ImageSegmenter.createFromOptions(fileset, {
                 baseOptions: { modelAssetPath: model, delegate: 'GPU' },
@@ -2596,11 +2587,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,18 +2633,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,
         };
     }