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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-filters-web",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -27,6 +27,7 @@
     "CHANGELOG.md"
   ],
   "dependencies": {
+    "@stream-io/worker-timer": "^1.2.4",
     "wasm-feature-detect": "^1.8.0"
   },
   "devDependencies": {

package/src/compatibility.ts

@@ -1,5 +1,18 @@
 import { simd } from 'wasm-feature-detect';
 
+export type PlatformSupportFlags = {
+  /**
+   * Forces support for mobile devices, although performance isn't optimal.
+   */
+  forceMobileSupport?: boolean;
+
+  /**
+   * Forces support for Safari, although in cases where the tab is put in the background,
+   * the FPS can drop significantly or freeze completely due to intensive timer throttling.
+   */
+  forceSafariSupport?: boolean;
+};
+
 /**
  * Checks if the current platform is a mobile device.
  *
@@ -8,15 +21,27 @@ import { simd } from 'wasm-feature-detect';
  */
 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.
  */
-export const isPlatformSupported = async () =>
+export const isPlatformSupported = async ({
+  forceMobileSupport = false,
+  forceSafariSupport = false,
+}: PlatformSupportFlags = {}) =>
   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') &&

package/src/createRenderer.ts

@@ -1,3 +1,4 @@
+import { WorkerTimer } from '@stream-io/worker-timer';
 import { TFLite } from './tflite';
 import { buildWebGL2Pipeline } from './webgl2/webgl2Pipeline';
 import { getSegmentationParams, SegmentationLevel } from './segmentation';
@@ -47,7 +48,8 @@ export function createRenderer(
     getSegmentationParams(segmentationLevel),
   );
 
-  const id = setInterval(
+  const timers = new WorkerTimer({ useWorker: true });
+  const id = timers.setInterval(
     () => {
       try {
         pipeline.render();
@@ -59,13 +61,14 @@ export function createRenderer(
         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();
     },
   };
 }