yarn add @stream-io/audio-filters-web
# or
npm install @stream-io/audio-filters-web
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:
Integration
Our React SDK provides utility components and hooks that make the integration smoother.
NoiseCancellationProvider
- a context provider that takes anoiseCancellation
instance as a propuseNoiseCancellation()
- 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:
"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:
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>
)}
</>
);
};