Quickstart: Browser SDK

In this quickstart you add Krisp Noise Cancellation to a microphone stream in a web page. The RTC JS SDK runs in the browser with WebAssembly, so audio stays on the user's device.

You need:

• A web page served over HTTPS or from localhost, so the browser allows microphone access
• A browser supported by the SDK: Chrome, Firefox or Edge on desktop. See Platforms.

Download the SDK

The Browser SDK is available on request. In the Developers Portal, open Noise Cancellation, click Request access and tell Krisp your platforms and expected volume. A scoping call follows within 1–2 business days. Once access is granted, download the Web build (Browser SDK) from Noise Cancellation → Downloads.

Copy the dist folder, which contains the library and the model files, into your project's static assets.

Initialize the SDK

Import the SDK, check that the browser supports it, and point it at the model files.

import KrispSDK from '/dist/krispsdk.mjs';

if (!KrispSDK.isSupported()) {
  // Krisp isn't supported in this browser: keep using the raw microphone stream
}

const sdk = new KrispSDK({
  params: {
    models: {
      modelNC: '/dist/models/model_nc_mq.kef',  // for sample rates above 8 kHz
      model8: '/dist/models/model_8.kef',       // for 8 kHz
    },
  },
});

await sdk.init();

Create a noise filter and connect it

Create the filter, wait for onReady, then enable it. Connect the microphone through the filter to get a cleaned stream.

const stream = await navigator.mediaDevices.getUserMedia({
  audio: { echoCancellation: false, noiseSuppression: false, autoGainControl: false },
});

const audioContext = new AudioContext();
const source = audioContext.createMediaStreamSource(stream);
const destination = audioContext.createMediaStreamDestination();

const filterNode = await sdk.createNoiseFilter(
  audioContext,
  function onReady() {
    filterNode.enable();
    console.log('Krisp noise cancellation is on');
  },
  function onDispose() {
    console.log('Krisp filter disposed');
  }
);

source.connect(filterNode).connect(destination);

// destination.stream is the cleaned microphone stream.
// Send it to your call, for example with RTCPeerConnection.addTrack().
const cleanStream = destination.stream;

Try it

Load the page and allow microphone access. When the filter is ready, the console shows:

Krisp noise cancellation is on

To hear the result, play cleanStream in an <audio> element, or record it with MediaRecorder and compare it with the raw microphone.

Next steps