Noise Cancellation

Noise Cancellation capabilities of our React Video SDK can be enabled by installing our @stream-io/audio-filters-web plugin. Under the hood, this package uses the technology developed by krisp.ai.

Compatibility

This plugin currently supports only modern desktop browsers:

Chrome, Firefox and Edge
Safari 17.4.1+

Install the plugin

With your favourite package manager, run the following command:

yarn add @stream-io/audio-filters-web
# or
npm install @stream-io/audio-filters-web

Integration

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

NoiseCancellationProvider - a context provider that takes a noiseCancellation instance as a prop
useNoiseCancellation() - a hook that exposes the API that controls the NoiseCancellation behavior

import { useMemo } from "react";
import { NoiseCancellation } from "@stream-io/audio-filters-web";
import {
  Call,
  NoiseCancellationProvider,
  StreamCall,
  StreamVideo,
  StreamVideoClient,
  useNoiseCancellation,
} from "@stream-io/video-react-sdk";

export const MyApp = () => {
  let client: StreamVideoClient; // ...
  let call: Call; // ...
  const noiseCancellation = useMemo(() => new NoiseCancellation(), []);
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <NoiseCancellationProvider noiseCancellation={noiseCancellation}>
          <MyComponentTree>
            <MyToggleNoiseCancellationButton />
          </MyComponentTree>
        </NoiseCancellationProvider>
      </StreamCall>
    </StreamVideo>
  );
};

const MyToggleNoiseCancellationButton = () => {
  // isSupported can be `true`, `false` or `undefined`
  // (undefined is used while compatibility check is in progress)
  const { isSupported, isEnabled, setEnabled } = useNoiseCancellation();
  return (
    <button disabled={!isSupported} onClick={() => setEnabled(!isEnabled)}>
      Toggle Noise Cancellation
    </button>
  );
};

Controlling noise suppression level

By default, the noiseCancellation instance will apply the maximum level of noise suppression. However, in some cases, more granular control is necessary and can be achieved like this:

const noiseCancellation = new NoiseCancellation();
noiseCancellation.setSuppressionLevel(50); // 0-100, 0 is no suppression, 100 is maximum suppression

// or, by using the hook
const { setSuppressionLevel } = useNoiseCancellation();
setSuppressionLevel(50);

Integration in NextJS

Our @stream-io/audio-filters-web runs exclusively on the client and as such, it conflicts with frameworks that are capable of doing Server Side Rendering (as NextJS).

App router

Make sure you flag your component that creates the NoiseCancellation instance with "use client" directive:

app-component.tsx

"use client";

import { useMemo } from "react";
import { NoiseCancellation } from "@stream-io/audio-filters-web";

export const MyComponent = () => {
  const noiseCancellation = useMemo(() => new NoiseCancellation(), []);
  // ...
};

Pages router

When using the Pages router, we need to lazy-load the plugin as described below:

pages.tsx

import { useEffect, useRef, useState } from "react";
import { NoiseCancellationProvider } from "@stream-io/video-react-sdk";
import type { INoiseCancellation } from "@stream-io/audio-filters-web";

export const MyComponent = () => {
  const [noiseCancellation, setNoiseCancellation] =
    useState<INoiseCancellation>();
  const loader = useRef<Promise<void>>();
  useEffect(() => {
    const load = (loader.current || Promise.resolve())
      .then(() => import("@stream-io/audio-filters-web"))
      .then(({ NoiseCancellation }) => {
        setNoiseCancellation(new NoiseCancellation());
      });
    return () => {
      loader.current = load.then(() => setNoiseCancellation(undefined));
    };
  }, []);

  return (
    <>
      // ...
      {noiseCancellation && (
        <NoiseCancellationProvider noiseCancellation={noiseCancellation}>
          <MyComponentTree />
        </NoiseCancellationProvider>
      )}
    </>
  );
};

Camera & Microphone

Call Types