Amazon Connect

Step 1: Get necessary files into your project

In our simplified example we took connect-rtc.min.js file from AWS connect-rtc-js repository and connect-streams.min.js file from Amazon Connect amazon-connect-streams repository (you can skip this step if you already have your Amazon Connect application ready for integration.)

Step 2: Create a function to setup Krisp and create a filtered audio stream

The general idea while integrating Krisp JS SDK with Amazon Connect is to override the session’s mediaStream to a filtered stream prepared by Krisp JS SDK.

Here the prepareKrisp() function is creating a new AudioContext, initializing KrispSDK, taking a new microphone stream, initializing media stream source and destination, creating our audio filter, and connecting everything together. At the end it initializes filteredMicrophoneStream to be our cleaned stream from destination.

The example code for preparing Krisp will look like this (for more details refer to our documentation)

var krispSDK,
  audioContext,
  filterNode,
  filteredMicrophoneStream;

async function prepareKrisp() {
  audioContext = new AudioContext();

  krispSDK = new KrispSDK({
    params: {
      logProcessStats: false,
      useSharedArrayBuffer: false,
      debugLogs: true,
      models: {
        model8: '/dist/models/model_8.kw',
        model16: '/dist/models/model_16.kw',
        model32: '/dist/models/model_32.kw',
      },
    },
    callbacks: {},
  });

  krispSDK.init();

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

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

  if (!microphoneStream) {
    throw new Error('no available microphone');
  }

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

  filterNode = await krispSDK.createNoiseFilter(audioContext, function onReady() {
    toggleButton.disabled = false;
    status.innerText = 'Press toggle to apply/unapply filter';
    loading.style.visibility = 'hidden';
  });

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

  filteredMicrophoneStream = destination.stream;
}

So, after calling this function, we will have our filtered microphone stream stored as filteredMicrophoneStream.

Step 3: Modify initCCP config

You need to modify initCPP softphone config while calling connect.core.initCCP to set allowFramedSoftphone to false. Setting this field to false, prevents softphone initialization in the iframe and allows us to create it in current context. The code will look like this:

connect.core.initCCP(ccpContainer, {
  ccpUrl,
  region: 'us-east-1',
  loginPopup: true,
  loginPopupAutoClose: true,
  softphone: {
      allowFramedSoftphone: false //here
  },
  pageOptions: {
      enableAudioDeviceSettings: true,
      enablePhoneTypeSettings: true
  }
});

Step 4: Prepare Krisp and override the RTC Session’s mediaStream

After having the prepareKrisp() function, the only thing left is to use it. We are going to prepare Krisp at a point when we got a successful agent connection. After this, we will already have the cleaned stream.

Later after initializing RTC session, we will just override the session’s mediaStream to our filteredMicrophoneStream. (we also recommend to set session’s echoCancellation to false)

The code will look something like this:

connect.contact(async (contact) => {
  const agentConnection = contact.getAgentConnection();

  if (agentConnection) {
    if (!filteredMicrophoneStream) {
      await prepareKrisp(); // prepare Krisp if there is no filtered stream
    }

    const mediaInfo = agentConnection.getSoftphoneMediaInfo();

    const rtcConfig = mediaInfo.webcallConfig || JSON.parse(mediaInfo.callConfigJson);
    const session = new connect.RTCSession(
      rtcConfig.signalingEndpoint,
      rtcConfig.iceServers,
      mediaInfo.callContextToken,
      console
    );

    session.echoCancellation = false;
    session.mediaStream = filteredMicrophoneStream; //override session's mediaStream

    /*
		
			some session handlers

		*/ 

    session.connect();
  }
});

All done, now Amazon Connect’s RTC session will use our cleared stream and you will get crystal-clear audio powered by Krisp JS SDK.

For the next steps of integration (toggling filter, disposing SDK and more) check out our documentation.