Webex Calling | Background Noise Removal

Caution

This documentation may no longer be current. Click here to view the updated content on our Developer Portal.

Table of Contents

• Introduction
• Prerequisites
• Setting up the BNR
  • Step 1: Obtaining the LocalAudioStream
  • Step 2: Creating & Adding Noise Removal Effect
    • Creating an effect
    • Adding the effect
• Enabling Background Noise Removal
• Disabling Background Noise Removal

Introduction

This document states how one can enable Background Noise Removal (BNR) on their Webex Calling calls while using the Webex Web SDK.

Prerequisites

To set up BNR for your Webex calls using the Web SDK,

1. The webex version should be 3.0.0 or higher.
2. For @webex/calling directly being consumed, the version should be 3.0.1 or higher.
3. A valid access token from Webex.

Setting up the BNR

Step 1: Obtaining the LocalAudioStream

To add the BNR effect to the Webex calls, we first need to have a LocalAudioStream that can be transmitted to the calls. We will obtain this LocalAudioStream as follows,

Obtain LocalAudioStream

const localAudioStream = await Calling.createMicrophoneStream(constraints);

The Calling object will be available in the Global Scope once the SDK is included as CDN or can be imported as import Calling from 'webex';.

Parameters

Parameter Name	Type	Description	Mandatory
constraints	MediaTrackConstraints{ 'autoGainControl', 'channelCount', 'deviceId', 'echoCancellation', 'noiseSuppression', 'sampleRate', 'sampleSize', 'suppressLocalAudioPlayback', }	The constraints should be an object which can have any of the constraints mentioned in the Type column. Please read about each of the supported MediaTrackConstraints here - MDN: MediaTrackConstraints	No

Step 2: Creating & Adding Noise Removal Effect

Now that we have localAudioStream with us, we need to create a noise removal effect and add it to the stream that we have created.

Creating an effect

First, the effect for BNR needs to be created and it can be done as follows,

Create BNR effect

const effect = await Calling.createNoiseReductionEffect(access_token);

Parameters

Parameter Name	Type	Description	Mandatory
access_token	String	The access token obtained from the Webex backend	Yes

Adding the effect

Once the effect is created, it needs to be added to the LocalAudioStream,

Adding the BNR effect

Once the effect is created, add it to the LocalAudioStream as demonstrated below:

Before webex 3.0.0-next.4 or @webex/calling 3.0.1-next.2

await localAudioStream.addEffect('background-noise-removal', effect); 

After webex 3.0.0-next.4 or @webex/calling 3.0.1-next.2

await localAudioStream.addEffect(effect); 

Parameters

Parameter Name	Type	Description	Mandatory
effect_name	String	This is simply an identifier for the created effect that can later be used while calling the localAudioStream.getEffect method	Yes
effect	NoiseReductionEffect	The created effect obtained from the createNoiseReductionEffect API call	Yes

(Note - The Webex Web SDK supports only the 'Noise Removal' mode)

Enabling Background Noise Removal

At this point, we will have the BNR effect added to the LocalAudioStream. To enable it,

• Check if the effect is already added to the LocalAudioStream and enable it
• If the effect is not added, create one with the steps mentioned above and then enable it

This can be done as follows,

Enable BNR

let bnrEffect = await localAudioStream.getEffect('background-noise-removal');

if (!bnrEffect) {
    bnrEffect = await Calling.createNoiseReductionEffect(access_token);

    await localAudioStream.addEffect('background-noise-removal', bnrEffect);
}

await bnrEffect.enable();

(Note - The enable method does not need any parameters)

Disabling Background Noise Removal

To disable the BNR effect, one can do the following,

Enable BNR

let bnrEffect = await localAudioStream.getEffect('background-noise-removal');

if (bnrEffect) {
    await bnrEffect.disable();
}

(Note - The disable method does not need any parameters)