@stream-io/video-filters-web 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.2](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.2.1...@stream-io/video-filters-web-0.2.2) (2025-09-17)
+
+### Bug Fixes
+
+- **video-filters:** prevent background tab throttling ([#1920](https://github.com/GetStream/stream-video-js/issues/1920)) ([f93d5cc](https://github.com/GetStream/stream-video-js/commit/f93d5cc5785957c7f181fcaf689ec366df9e646b))
+
 ## [0.2.1](https://github.com/GetStream/stream-video-js/compare/@stream-io/video-filters-web-0.2.0...@stream-io/video-filters-web-0.2.1) (2025-05-15)
 
 ### Bug Fixes

package/dist/index.cjs.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var wasmFeatureDetect = require('wasm-feature-detect');
+var workerTimer = require('@stream-io/worker-timer');
 
 /**
  * Checks if the current platform is a mobile device.
@@ -9,14 +10,21 @@ var wasmFeatureDetect = require('wasm-feature-detect');
  * https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
  */
 const isMobile = () => /Mobi/i.test(navigator.userAgent);
+/**
+ * Checks whether the current browser is Safari.
+ */
+const isSafari = () => /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
 /**
  * Runs a check to see if the current platform supports
  * the necessary APIs required for the video filters.
  */
-const isPlatformSupported = async () => typeof document !== 'undefined' &&
+const isPlatformSupported = async ({ forceMobileSupport = false, forceSafariSupport = false, } = {}) => typeof document !== 'undefined' &&
     typeof window !== 'undefined' &&
     typeof navigator !== 'undefined' &&
-    !isMobile() && // we don't support mobile devices yet due to performance issues
+    // we don't support mobile devices yet due to performance issues
+    (forceMobileSupport || !isMobile()) &&
+    // Safari has issues with timer throttling, causing low FPS when the tab goes to the background
+    (forceSafariSupport || !isSafari()) &&
     typeof WebAssembly !== 'undefined' &&
     !!window.WebGL2RenderingContext && // WebGL2 is required for the video filters
     !!document.createElement('canvas').getContext('webgl2') &&
@@ -788,7 +796,8 @@ function createRenderer(tflite, videoSource, targetCanvas, options, onError) {
         throw new Error(`backgroundImage element is required when backgroundFilter is image`);
     }
     const pipeline = buildWebGL2Pipeline(videoSource, backgroundImage, backgroundBlurLevel, backgroundFilter, targetCanvas, tflite, getSegmentationParams(segmentationLevel));
-    const id = setInterval(() => {
+    const timers = new workerTimer.WorkerTimer({ useWorker: true });
+    const id = timers.setInterval(() => {
         try {
             pipeline.render();
             if (backgroundFilter === 'image') {
@@ -798,11 +807,12 @@ function createRenderer(tflite, videoSource, targetCanvas, options, onError) {
         catch (error) {
             onError?.(error);
         }
-    }, 1000 / (fps <= 0 ? 30 : fps));
+    }, Math.floor(1000 / (fps <= 0 ? 30 : fps)));
     return {
         dispose: () => {
             pipeline.cleanUp();
-            clearInterval(id);
+            timers.clearInterval(id);
+            timers.destroy();
         },
     };
 }
@@ -1533,7 +1543,7 @@ const createTFLiteSIMDModule = (__Module) => {
   return __Module.ready;
 };
 
-const version = "0.2.1";
+const version = "0.2.2";
 const packageName = "@stream-io/video-filters-web";
 
 // @ts-expect-error - module is not declared