@stream-io/video-react-sdk 0.6.9 → 0.6.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.6.9",
+  "version": "0.6.11",
   "packageManager": "yarn@3.2.4",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.es.js",
@@ -29,9 +29,9 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
-    "@stream-io/video-client": "0.7.6",
+    "@stream-io/video-client": "0.7.7",
     "@stream-io/video-filters-web": "0.1.0",
-    "@stream-io/video-react-bindings": "0.4.17",
+    "@stream-io/video-react-bindings": "0.4.18",
     "chart.js": "^4.4.1",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"

package/src/components/BackgroundFilters/BackgroundFilters.tsx

@@ -219,25 +219,28 @@ const BackgroundFilters = (props: { tfLite: TFLite }) => {
   const [width, setWidth] = useState(1920);
   const [height, setHeight] = useState(1080);
 
-  const resolveFilterRef =
+  // Holds a ref to the `resolve` function of the returned Promise as part
+  // of the `camera.registerFilter()` API. Once the filter is initialized,
+  // it should be called with the filtered MediaStream as an argument.
+  const signalFilterReadyRef =
     useRef<(value: MediaStream | PromiseLike<MediaStream>) => void>();
 
   const [mediaStream, setMediaStream] = useState<MediaStream>();
-  const registerFilterRef = useRef(Promise.resolve(async () => {}));
+  const unregister = useRef<Promise<void>>();
   useEffect(() => {
     if (!call || !backgroundFilter) return;
-    registerFilterRef.current = registerFilterRef.current.then(() =>
+    const register = (unregister.current || Promise.resolve()).then(() =>
       call.camera.registerFilter(async (ms) => {
         return new Promise<MediaStream>((resolve) => {
           setMediaStream(ms);
-          resolveFilterRef.current = resolve;
+          signalFilterReadyRef.current = resolve;
         });
       }),
     );
 
     return () => {
-      registerFilterRef.current
-        .then((unregister) => unregister())
+      unregister.current = register
+        .then((unregisterFilter) => unregisterFilter())
         .then(() => setMediaStream(undefined))
         .catch((err) => console.error('Failed to unregister filter', err));
     };
@@ -254,7 +257,7 @@ const BackgroundFilters = (props: { tfLite: TFLite }) => {
         setHeight(h);
       }
 
-      const resolveFilter = resolveFilterRef.current;
+      const resolveFilter = signalFilterReadyRef.current;
       if (!resolveFilter) return;
       const filter = canvasRef.captureStream();
       resolveFilter(filter);