RTC Accent Web Browser SDK

For more information about Krisp AC (Accent Conversion) Technology, please refer to our SDK Features section.

Extended RTC JS Browser SDK

RTC Accent JS Browser SDK is an extension of RTC JS Browser SDK. Refer to the Getting Started RTC JS Browser SDK to learn how to use the base SDK.

Installation

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

Once you have downloaded the library, start by importing the SDK into your project.

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
}

KrispSDK Constructor Arguments

Property	Type	Default	Description
params.useAR	Boolean	false	Set the flag `true` to enable AC SDK. The SDK will behave like the parent RTC JS Browser SDK if the flag is set to `false`.
params.useRawModelPath	Boolean	false	Set `true` if the `params.models.modelAR` points to a 3rd party URL host.
params.useSharedArrayBuffer	Boolean	false	Enables using SharedArrayBuffer between worker and worklet threads to exchange audio data improving CPU performance. Make sure to check the Security Requirements before using the feature
params.models.modelAR	String	undefined	path to the AC model

Step 1. Configure KrispSDK to use AC

To use AC you should adjust KrispSDK params on creation. There are few options to configure:

const sdk = new KrispSDK({
  params: {
    useAR: true, 
    models: {
      modelAR: "/dist/models/modelAR.kef", // Add AC model URL provided with the sdk
    },
  },
});

Step 2. Pass audio stream while creating acccentFilterNode

After configuring KrispSDK you have to pass an audio stream while creating the accent filter

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

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

const accentFilterNode = await krispSDK.createAccentReductionFilter(
  {
    audioContext,
    stream
  },
  function onReady() {
    filterNode.enable();
    // triggered when Accent Filter initialized
    // handle you own buisness logic
  },
  function onDispose() {
    // triggered when Accent Filter disposed
    // handle you own buisness logic
  }
);


source.connect(accentFilterNode).connect(destination);

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

Live Demo

Use the link for the live demo