@stream-io/video-react-sdk 1.19.0 → 1.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -30,9 +30,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.27.6",
-    "@stream-io/video-client": "1.27.0",
+    "@stream-io/video-client": "1.27.1",
     "@stream-io/video-filters-web": "0.2.1",
-    "@stream-io/video-react-bindings": "1.7.9",
+    "@stream-io/video-react-bindings": "1.7.10",
     "chart.js": "^4.4.4",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.3.0"
@@ -45,7 +45,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^6.0.2",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@stream-io/audio-filters-web": "^0.4.2",
+    "@stream-io/audio-filters-web": "^0.4.3",
     "@stream-io/video-styling": "^1.4.0",
     "@types/react": "^19.1.3",
     "@types/react-dom": "^19.1.3",

package/src/components/BackgroundFilters/BackgroundFilters.tsx

@@ -10,7 +10,7 @@ import {
 import { flushSync } from 'react-dom';
 import clsx from 'clsx';
 import { useCall } from '@stream-io/video-react-bindings';
-import { disposeOfMediaStream, getLogger } from '@stream-io/video-client';
+import { Call, disposeOfMediaStream, getLogger } from '@stream-io/video-client';
 import {
   BackgroundBlurLevel,
   BackgroundFilter,
@@ -228,7 +228,7 @@ export const BackgroundFiltersProvider = (
 
 const BackgroundFilters = (props: { tfLite: TFLite }) => {
   const call = useCall();
-  const { children, start } = useRenderer(props.tfLite);
+  const { children, start } = useRenderer(props.tfLite, call);
   const { backgroundFilter, onError } = useBackgroundFilters();
   const handleErrorRef = useRef<((error: any) => void) | undefined>(undefined);
   handleErrorRef.current = onError;
@@ -246,7 +246,7 @@ const BackgroundFilters = (props: { tfLite: TFLite }) => {
   return children;
 };
 
-const useRenderer = (tfLite: TFLite) => {
+const useRenderer = (tfLite: TFLite, call: Call | undefined) => {
   const { backgroundFilter, backgroundBlurLevel, backgroundImage } =
     useBackgroundFilters();
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -297,6 +297,11 @@ const useRenderer = (tfLite: TFLite) => {
                 height: trackSettings.height ?? 0,
               }),
             );
+            call?.tracer.trace('backgroundFilters.enable', {
+              backgroundFilter,
+              backgroundBlurLevel,
+              backgroundImage,
+            });
             renderer = createRenderer(
               tfLite,
               videoEl,
@@ -320,13 +325,20 @@ const useRenderer = (tfLite: TFLite) => {
       return {
         output,
         stop: () => {
+          call?.tracer.trace('backgroundFilters.disable', null);
           renderer?.dispose();
           if (videoRef.current) videoRef.current.srcObject = null;
           if (outputStream) disposeOfMediaStream(outputStream);
         },
       };
     },
-    [backgroundBlurLevel, backgroundFilter, backgroundImage, tfLite],
+    [
+      backgroundBlurLevel,
+      backgroundFilter,
+      backgroundImage,
+      call?.tracer,
+      tfLite,
+    ],
   );
 
   const children = (