@stream-io/video-react-sdk 0.6.10 → 0.6.12

package/dist/src/components/NoiseCancellation/NoiseCancellationProvider.d.ts

@@ -0,0 +1,34 @@
+import { PropsWithChildren } from 'react';
+import type { INoiseCancellation } from '@stream-io/audio-filters-web';
+export type NoiseCancellationProviderProps = {
+    /**
+     * The noise cancellation instance to use.
+     */
+    noiseCancellation: INoiseCancellation;
+};
+/**
+ * The Noise Cancellation API.
+ */
+export type NoiseCancellationAPI = {
+    /**
+     * A boolean providing information whether Noise Cancelling functionalities
+     * are supported on this platform and for the current user.
+     */
+    isSupported: boolean;
+    /**
+     * Provides information whether Noise Cancellation is active or not.
+     */
+    isEnabled: boolean;
+    /**
+     * Allows you to temporary enable or disable the Noise Cancellation filters.
+     *
+     * @param enabled a boolean or a setter.
+     */
+    setEnabled: (enabled: boolean | ((value: boolean) => boolean)) => void;
+};
+/**
+ * Exposes the NoiseCancellation API.
+ * Throws an error if used outside <NoiseCancellationProvider />.
+ */
+export declare const useNoiseCancellation: () => NoiseCancellationAPI;
+export declare const NoiseCancellationProvider: (props: PropsWithChildren<NoiseCancellationProviderProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/NoiseCancellation/index.d.ts

@@ -0,0 +1 @@
+export * from './NoiseCancellationProvider';

package/dist/src/components/index.d.ts

@@ -12,6 +12,7 @@ export * from './DropdownSelect';
 export * from './Icon';
 export * from './LoadingIndicator';
 export * from './Menu';
+export * from './NoiseCancellation';
 export * from './Notification';
 export * from './RingingCall';
 export * from './Permissions';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-react-sdk",
-  "version": "0.6.10",
+  "version": "0.6.12",
   "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.7",
+    "@stream-io/video-client": "0.7.8",
     "@stream-io/video-filters-web": "0.1.0",
-    "@stream-io/video-react-bindings": "0.4.18",
+    "@stream-io/video-react-bindings": "0.4.19",
     "chart.js": "^4.4.1",
     "clsx": "^2.0.0",
     "react-chartjs-2": "^5.2.0"
@@ -44,6 +44,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-typescript": "^11.1.6",
+    "@stream-io/audio-filters-web": "^0.0.1",
     "@stream-io/video-styling": "^1.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.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);

package/src/components/NoiseCancellation/NoiseCancellationProvider.tsx

@@ -0,0 +1,124 @@
+import {
+  createContext,
+  PropsWithChildren,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import {
+  NoiseCancellationSettingsModeEnum,
+  OwnCapability,
+} from '@stream-io/video-client';
+import { useCall, useCallStateHooks } from '@stream-io/video-react-bindings';
+import type { INoiseCancellation } from '@stream-io/audio-filters-web';
+
+export type NoiseCancellationProviderProps = {
+  /**
+   * The noise cancellation instance to use.
+   */
+  noiseCancellation: INoiseCancellation;
+};
+
+/**
+ * The Noise Cancellation API.
+ */
+export type NoiseCancellationAPI = {
+  /**
+   * A boolean providing information whether Noise Cancelling functionalities
+   * are supported on this platform and for the current user.
+   */
+  isSupported: boolean;
+  /**
+   * Provides information whether Noise Cancellation is active or not.
+   */
+  isEnabled: boolean;
+  /**
+   * Allows you to temporary enable or disable the Noise Cancellation filters.
+   *
+   * @param enabled a boolean or a setter.
+   */
+  setEnabled: (enabled: boolean | ((value: boolean) => boolean)) => void;
+};
+
+const NoiseCancellationContext = createContext<NoiseCancellationAPI | null>(
+  null,
+);
+
+/**
+ * Exposes the NoiseCancellation API.
+ * Throws an error if used outside <NoiseCancellationProvider />.
+ */
+export const useNoiseCancellation = (): NoiseCancellationAPI => {
+  const context = useContext(NoiseCancellationContext);
+  if (!context) {
+    throw new Error(
+      'useNoiseCancellation must be used within a NoiseCancellationProvider',
+    );
+  }
+  return context;
+};
+
+export const NoiseCancellationProvider = (
+  props: PropsWithChildren<NoiseCancellationProviderProps>,
+) => {
+  const { children, noiseCancellation } = props;
+  const call = useCall();
+  const { useCallSettings, useHasPermissions } = useCallStateHooks();
+  const settings = useCallSettings();
+  const noiseCancellationAllowed = !!(
+    settings &&
+    settings.audio.noise_cancellation &&
+    settings.audio.noise_cancellation.mode !==
+      NoiseCancellationSettingsModeEnum.DISABLED
+  );
+
+  const hasCapability = useHasPermissions(
+    OwnCapability.ENABLE_NOISE_CANCELLATION,
+  );
+  const isSupported =
+    hasCapability &&
+    noiseCancellationAllowed &&
+    noiseCancellation.isSupported();
+
+  const [isEnabled, setIsEnabled] = useState(false);
+  const deinit = useRef<Promise<void>>();
+  useEffect(() => {
+    if (!call || !isSupported) return;
+    const unsubscribe = noiseCancellation.on('change', (v) => setIsEnabled(v));
+    const init = (deinit.current || Promise.resolve())
+      .then(() => noiseCancellation.init())
+      .then(() => call.microphone.enableNoiseCancellation(noiseCancellation))
+      .catch((err) => console.error(`Can't initialize noise suppression`, err));
+
+    return () => {
+      deinit.current = init
+        .then(() => call.microphone.disableNoiseCancellation())
+        .then(() => noiseCancellation.dispose())
+        .then(() => unsubscribe());
+    };
+  }, [call, isSupported, noiseCancellation]);
+
+  return (
+    <NoiseCancellationContext.Provider
+      value={{
+        isSupported,
+        isEnabled,
+        setEnabled: (enabledOrSetter) => {
+          if (!noiseCancellation) return;
+          const enable =
+            typeof enabledOrSetter === 'function'
+              ? enabledOrSetter(isEnabled)
+              : enabledOrSetter;
+          if (enable) {
+            noiseCancellation.enable();
+          } else {
+            noiseCancellation.disable();
+          }
+        },
+      }}
+    >
+      {children}
+    </NoiseCancellationContext.Provider>
+  );
+};

package/src/components/NoiseCancellation/index.ts

@@ -0,0 +1 @@
+export * from './NoiseCancellationProvider';

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from './DropdownSelect';
 export * from './Icon';
 export * from './LoadingIndicator';
 export * from './Menu';
+export * from './NoiseCancellation';
 export * from './Notification';
 export * from './RingingCall';
 export * from './Permissions';