Noise Cancellation

The Noise Cancellation feature in our Stream Video React Native SDK can be enabled by installing the @stream-io/noise-cancellation-react-native package to your project and by having it enabled in the Stream dashboard. This package leverages noise cancellation technology developed by krisp.ai.

Installation

To enable noise cancellation feature in your app. You must first add the @stream-io/noise-cancellation-react-native library. This library adds the required native module for processing the audio stream and manipulating it with the noise cancellation filter.

npx expo install @stream-io/noise-cancellation-react-native

{
  "plugins": [
    [
      "@stream-io/video-react-native-sdk",
      {
        "addNoiseCancellation": true
        // ... any other props
      }
    ]
    // your other plugins
  ]
}

yarn add @stream-io/noise-cancellation-react-native
npx pod-install

#import "NoiseCancellationManagerObjc.h"

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  [[NoiseCancellationManagerObjc sharedInstance] registerProcessor];

  // the rest
}

import stream_io_noise_cancellation_react_native

override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {

  NoiseCancellationManager.getInstance().registerProcessor()

  // the rest
}

import io.getstream.rn.noisecancellation.NoiseCancellationReactNative

override fun onCreate() {
  NoiseCancellationReactNative.registerProcessor(applicationContext)

  // the rest
}

Integration

Our React Native SDK provides utility components and hooks that make the integration smoother.

• NoiseCancellationProvider - a context provider component. This component must be a child of the StreamCall component.
• useNoiseCancellation() - a hook that exposes the API that controls the NoiseCancellation behavior

import { Button } from "react-native";
import {
  Call,
  NoiseCancellationProvider,
  StreamCall,
  StreamVideo,
  StreamVideoClient,
  useNoiseCancellation,
} from "@stream-io/video-react-native-sdk";

export const MyApp = () => {
  let client: StreamVideoClient; // ...
  let call: Call; // ...

  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <NoiseCancellationProvider>
          <MyComponentTree>
            <MyToggleNoiseCancellationButton />
          </MyComponentTree>
        </NoiseCancellationProvider>
      </StreamCall>
    </StreamVideo>
  );
};

// a minimal example of a noise cancellation button
const MyToggleNoiseCancellationButton = () => {
  const {
    // `isSupported` can be true, false or undefined. It is   false when the server settings indicate that user must not not turn noise cancellation on. It is `undefined` while user capability check is in progress.
    isSupported,
    // `deviceSupportsAdvancedAudioProcessing` can be true, false or undefined. It is `true` when Apple's Neural Engine can be used or AUDIO_PRO on Android. It is `undefined` used while device capability check is in progress.
    deviceSupportsAdvancedAudioProcessing,
    isEnabled,
    setEnabled,
  } = useNoiseCancellation();

  if (!deviceSupportsAdvancedAudioProcessing) {
    // optional but recommended
    // do not show the option if the device does support advanced audio processing.
    return null;
  }

  return (
    <Button
      disabled={!isSupported}
      title={
        isEnabled ? "Disable Noise Cancellation" : "Enable Noise Cancellation"
      }
      onPress={() => setEnabled((prev) => !prev)}
    />
  );
};

Feature availability

The feature availablity is automatically handled by the NoiseCancellationProvider component based on the call settings. When the settings are configured that noise cancellation should not be enabled, the isSupported boolean value from the useNoiseCancellation hook will be false. And vice versa. Also, the noise cancellation settings can also be accessed using the Call State Hooks. The noise_cancellation setting contains a mode property that indicates availability:

import { useCallStateHooks } from "@stream-io/video-react-native-sdk";

const { useCallSettings } = useCallStateHooks();
const settings = useCallSettings();

// "available", "disabled", "auto-on"
console.log(settings?.audio.noise_cancellation?.mode);

• available The feature has been enabled on the dashboard and it’s available for the call. In this case, you are free to present any noise cancellation toggle UI in your application.

• disabled The feature hasn’t been enabled on the dashboard or the feature isn’t available for the call. In this case, you should hide any noise cancellation toggle UI in your application.

• auto-on Similar to available with the difference that if possible, the SDK will enable the noise cancellation automatically, when the user join the call and if the deviceSupportsAdvancedAudioProcessing value from the useNoiseCancellation hook is true.