# Noise Cancellation

Noise Cancellation capabilities of our [Plain-JS Video SDK](https://getstream.io/video/sdk/javascript/) can be enabled by
installing our `@stream-io/audio-filters-web` plugin. Under the hood, this package uses the technology developed
by [krisp.ai](https://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:

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

## Integration

In the following code snippet, we show how to check if а platform is supported, initialize the plugin, and enable/disable it.

```typescript
import { NoiseCancellation } from "@stream-io/audio-filters-web";

const call = client.call(type, id);
await call.get(); // or call.getOrCreate()

const noiseCancellation = new NoiseCancellation();
const isSupported = await noiseCancellation.isSupported();
if (isSupported) {
  await noiseCancellation.init();
  await call.microphone.enableNoiseCancellation(noiseCancellation);
}

// disable it and unregister the plugin
await call.microphone.disableNoiseCancellation();
```

### NoiseCancellation API

The `NoiseCancellation` class exposes the following methods:

```ts
// creates a new NoiseCancellation instance
const noiseCancellation = new NoiseCancellation();

// returns true for supported platforms
await noiseCancellation.isSupported();

// initializes the plugin
await noiseCancellation.init();

// will temporarily disable NC (doesn't unregister the plugin)
noiseCancellation.disable();

// will enable NC (requires the plugin to be registered first)
noiseCancellation.enable();

// returns true if NC is enabled
const isEnabled = await noiseCancellation.isEnabled();

// sets the suppression level [0, 100]
// where 0 is no suppression and 100 is maximum suppression
// the default value is 100
noiseCancelation.setSuppressionLevel(50);

// listen for state updates
const off = noiseCancellation.on("change", (v) => {
  console.log(`Noise Cancellation is ${v ? "enabled" : "disabled"}`);
});
```

## Self-hosting model assets (CSP compatibility)

By default, `@stream-io/audio-filters-web` loads its noise-cancellation model at runtime from the [unpkg.com](https://unpkg.com/) CDN. The default base path resolves to:

```text
https://unpkg.com/@stream-io/audio-filters-web@<version>/src/krispai/models
```

This works out of the box, but it can be a problem if your application enforces a strict [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP). You would have to allowlist `unpkg.com` in your `connect-src` directive, or - preferably - avoid the third-party dependency altogether by hosting the model on your own domain and pointing the plugin to it.

### Step 1 - Copy the model into your app

The model ships inside the `@stream-io/audio-filters-web` package, in its `src/krispai/models` folder. Copy it into your app's public/static assets directory:

```bash
rm -rf public/nc-models
cp -R node_modules/@stream-io/audio-filters-web/src/krispai/models public/nc-models
```

The `rm -rf` keeps the command idempotent: without it, re-running `cp -R` nests the source under the existing folder (`public/nc-models/models/...`) and leaves stale files behind.

### Step 2 - Override `basePath`

Pass a `basePath` (pointing to the directory that serves the copied model files) when creating the `NoiseCancellation` instance. Note that the `public/` directory is served from the web root, so files in `public/nc-models` are exposed at `/nc-models` (no `/public` prefix):

```typescript
const noiseCancellation = new NoiseCancellation({
  basePath: "https://my.domain.com/nc-models",
});
```

A same-origin path works too (e.g. `basePath: "/nc-models"`).

### Keep the model in sync with the SDK

The hosted model must match the installed SDK version. To prevent version drift, copy it automatically on install with a `postinstall` script (or a step in your build) in your `package.json`.

```json
{
  "scripts": {
    "postinstall": "node -e \"require('fs').cpSync('node_modules/@stream-io/audio-filters-web/src/krispai/models', 'public/nc-models', { recursive: true })\""
  }
}
```

Once the model is self-hosted and `basePath` is set, the app no longer makes requests to `unpkg.com`, so you can remove it from your CSP allowlist.


---

This page was last updated at 2026-07-10T16:05:23.004Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/javascript/guides/noise-cancellation/](https://getstream.io/video/docs/javascript/guides/noise-cancellation/).