Getting started

Installation

To get started, you need to download the packed library from the (SDK Portal) and place it in the assets of your project.

Note: This is currently the only option to get the library.

Once you have downloaded the library, start by importing the SDK into your project. You can refer to our tutorials for guidance, or continue with general information.

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

Make sure the SDK is supported for the current execution context.

if (!KrispSDK.isSupported()) {
    // KrispSDK is not supported, handle your own logic to not block user's flow
}

To create an SDK instance you need to use KrispSDK class. This object provides a set of methods which are described in the coming chapters.

const sdk = new KrispSDK({
    params: {
    debugLogs: false,
    useSharedArrayBuffer: false,
    models: {
            model8: '/path/to/model8.kw',
            model16: '/path/to/model16.kw',
            model32: '/path/to/model32.kw',
        },
  }
});

await sdk.init();

KrispSDK constructor arguments

Noise Filter Creation

Noise filter is the essential part of SDK, which is responsible for Audio NC filtration.
In order to create filter node you need to call SDK instance createNoiseFilter method. As a result the method returns AudioWorkletNode which you can use to connect your audio graph.

const filterNode = await sdk.createFilterNode(
    audioContext, 
    function onReady() {
        filterNode.enable();    
        // handle you own buisness logic
    },
    function onDispose() {
        // handle you own buisness logic
  }
);

createFilterNode resolved once AudioWorkletNode is created, but there is much more things going in background (Worker thread initialization, WASM module loading, NC Model Loading). Once SDK is ready to proceed with noice cancellation onReady callback is triggered.

It can take some time until the worker thread is getting ready to proceed audio. You need to wait until onReady callback is triggered then enable audio filtration. filternode.enable()

Once you have filterNode created you can connect with your audio graph.

const audioSettings = {
      audio: {
        echoCancellation: false,
        noiseSuppression: false,
        autoGainControl: false,
      },
};

const stream = await navigator.mediaDevices.getUserMedia(audioSettings);

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

const filterNode = await sdk.createFilterNode(
    audioContext, 
    function onReady() {
        filterNode.enable();    
        // handle you own buisness logic
    },
    function onDispose() {
        // handle you own buisness logic
  }
);

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

destination.stream; // destination stream is the resulting stream which can be used in your buisness logic

Model Loading

• The SDK currently accepts the following sample rates: 8000, 12000, 16000, 24000, 32000, 44100, 48000, 88200, 96000. Ensure that the AudioContext sample rate is in the list of supported rates to avoid issues such as noise cancellation malfunction or sound distortion. If the sample rate is not in the list of supported rates, you can provide a message to the user, explaining that the sample rate is not supported and recommend they change their settings. Although you can choose the preferable sample rate for you automatically depending on your needs.
• Users can switch their audio devices in the middle of using the SDK, so it's essential to handle new noise cancellation filter creation when the input source has changed. The new noise cancellation filter creation is necessary to ensure that the SDK continues to function correctly and delivers the expected results. The filter creation should be automatic and transparent to the user to avoid disrupting their experience.
• Include model files in the robots.txt file.

General Recommendations

• Make sure SDK is supported for the client before initializing the SDK.
• Use the microphone's default sample rate to avoid intermediate resampling.
• Recreate the AudioContext when the sample rate is changed.
• Keep the SDK up to date as audio features are getting changed and enhanced on a daily basis. And try to keep up with current technology. We recommend updating your SDK at least once a quarter.
• The JS SDK is currently available only for Firefox and Chrome browsers. Therefore, before connecting the Krisp SDK node to your nodes, make sure it's supported for the browser to not block the user's flow. You can provide a message to notify users that the SDK is not supported on their current browser and recommend they switch to a supported browser to ensure a seamless experience.

Deploying your Application

• Put your models in your CDN to ensure faster loading times and better performance.
• Make sure these models are not visible to search engines or bots by adding a Disallow directive to the robots.txt file.