Noise & echo cancellation

Overview

Your user's microphone is likely to pick up undesirable audio including background noise (like traffic, music, voices, etc) and might also pick up echoes from their own speakers. In both cases, this noise leads to a poor experience for other participants in a call. In voice AI apps, this can also interfere with turn detection or degrade the quality of transcriptions, both of which are critical to a good user experience.

The best place to remove this noise is on the user's own device, before the audio bytes reach the network. This ensures that every participant, recording, or egress will also receive the exact same audio.

LiveKit includes default client-side noise and echo cancellation based on the underlying open-source WebRTC implementations of echoCancellation and noiseSuppression. You can adjust these settings with the AudioCaptureOptions type in the LiveKit SDKs.

LiveKit has also partnered with Krisp to offer an enhanced client-side noise cancellation feature to all LiveKit Cloud customers at no additional charge. To see how these options compare, play the samples below:

Original

WebRTC noiseSuppression

Krisp noise cancellation

Krisp noise cancellation is supported for Web, iOS/macOS, and Android. Flutter and React Native support are coming soon.

Regardless of platform, you'll need install a separate package to enable the feature. This is because the Krisp SDK and models are fairly large (5-25MB combined depending on the platform).

LiveKit Cloud customers can enable Krisp in their application by following the instructions below.

Installation

npm install @livekit/krisp-noise-filter

This package includes the Krisp SDK but not the models, which will be downloaded at runtime to minimize the impact on your application's bundle size.

React components usage

LiveKit Components includes a convenient useKrispNoiseFilter hook to easily integrate Krisp into your React app:

import { useKrispNoiseFilter } from '@livekit/components-react/krisp';

function MyKrispSetting() {
  const krisp = useKrispNoiseFilter();
  return (
    <input
      type="checkbox"
      onChange={(ev) => krisp.setNoiseFilterEnabled(ev.target.checked)}
      checked={krisp.isNoiseFilterEnabled}
      disabled={krisp.isNoiseFilterPending}
    />
  );
}

Base JS SDK usage

For other frameworks or advanced use cases, use the KrispNoiseFilter class directly:

import { type LocalAudioTrack, Room, RoomEvent, Track } from 'livekit-client';

const room = new Room();

// We recommend a dynamic import to only load the required resources when you enable the plugin
const { KrispNoiseFilter } = await import('@livekit/krisp-noise-filter');

room.on(RoomEvent.LocalTrackPublished, async (trackPublication) => {
  if (
    trackPublication.source === Track.Source.Microphone &&
    trackPublication.track instanceof LocalAudioTrack
  ) {
    if (!isKrispNoiseFilterSupported()) {
      console.warn('Krisp noise filter is currently not supported on this browser');
      return;
    }
    // Once instantiated, the filter will begin initializing and will download additional resources
    const krispProcessor = KrispNoiseFilter();
    console.log('Enabling LiveKit Krisp noise filter');
    await trackPublication.track.setProcessor(krispProcessor);

    // To enable/disable the noise filter, use setEnabled()
    await krispProcessor.setEnabled(true);

    // To check the current status use:
    // krispProcessor.isEnabled()

    // To stop and dispose of the Krisp processor, simply call:
    // await trackPublication.track.stopProcessor()
  }
});

Compatibility

Not all browsers support the underlying Krisp SDK (including Safari <17.4). Use isKrispNoiseFilterSupported() to check if the current browser is supported.