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

package/dist/index.es.js

@@ -1,4 +1,5 @@
 import { simd } from 'wasm-feature-detect';
+import { WorkerTimer } from '@stream-io/worker-timer';
 
 /**
  * Checks if the current platform is a mobile device.
@@ -7,14 +8,21 @@ import { simd } from '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') &&
@@ -786,7 +794,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({ useWorker: true });
+    const id = timers.setInterval(() => {
         try {
             pipeline.render();
             if (backgroundFilter === 'image') {
@@ -796,11 +805,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();
         },
     };
 }
@@ -1531,7 +1541,7 @@ const createTFLiteSIMDModule = (__Module) => {
   return __Module.ready;
 };
 
-const version = "0.2.1";
+const version = "0.3.0";
 const packageName = "@stream-io/video-filters-web";
 
 // @ts-expect-error - module is not declared