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 = () => {
  const { isSupported, isEnabled, setEnabled } = useNoiseCancellation();
  return (
    <button
      disabled={!isSupported}
      type="button"
      onClick={() => setEnabled(!isEnabled)}
    >
      Toggle Noise Cancellation
    </button>
  );
};

Integration in NextJS apps

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>
      )}
    </>
  );
};