feat(callingsdk): initial changes to add bnr (#3120)

Co-authored-by: Priya Kesari <[email protected]>

docs/samples/calling/app.js

@@ -92,6 +92,7 @@ let call;
 let callTranferObj;
 let broadworksCorrelationInfo;
 let localAudioStream;
+let effect;
 
 const devicesById = {};
 const img = new Image();
@@ -611,10 +612,30 @@ function initiateTransfer() {
 
 async function getMediaStreams() {
   localAudioStream  = await Calling.createMicrophoneStream({audio: true});
+
   localAudioElem.srcObject = localAudioStream.outputStream;
   makeCallBtn.disabled = false;
 }
 
+async function addNoiseReductionEffect() {
+  effect = await localAudioStream.getEffect('background-noise-removal');
+
+  if (!effect) {
+    effect = await Calling.createNoiseReductionEffect(tokenElm.value);
+
+    await localAudioStream.addEffect('background-noise-removal', effect);
+  }
+
+  await effect.enable();
+}
+
+async function removeNoiseReductionEffect() {
+  effect = await localAudioStream.getEffect('background-noise-removal');
+  if (effect) {
+    await effect.disable();
+  }
+}
+
 // Listen for submit on create meeting
 createCallForm.addEventListener('submit', createCall);
 
@@ -634,7 +655,7 @@ function clearMediaDeviceList() {
 }
 
 async function getMediaDevices() {
-  const cameras = await callingClient.mediaEngine.Media.getCameras();  
+  const cameras = await callingClient.mediaEngine.Media.getCameras();
   cameras.forEach((camera) => {
     populateSourceDevices(camera);
   });

docs/samples/calling/index.html

@@ -49,7 +49,7 @@ <h2 class="collapsible">Authentication</h2>
                     <br><br>
                     <strong>Note:</strong> Please update these before <mark>calling.init()</mark> if want to use different values.
                   </p>
-                  
+
                   <div class="u-mv">
                     <select name="Service Indicator" id="ServiceIndicator" class="ServiceData">
                       <option value="" disabled selected hidden>Choose Service ...</option>
@@ -119,8 +119,14 @@ <h2 class="collapsible">Call initialization</h2>
               <button id="sd-get-media-streams" type="button" onclick="getMediaStreams()"
                 class="btn-code">getMediaStreams()</button>
             </div>
+            <div class="u-mv">
+              <button id="sd-add-bnr" type="button" onclick="addNoiseReductionEffect()"
+              class="btn-code">Enable BNR()</button>
+              <button id="sd-add-bnr" type="button" onclick="removeNoiseReductionEffect()"
+              class="btn-code">Disable BNR()</button>
+            </div>
           </fieldset>
-          
+
             <form id="call-create">
               <fieldset>
                 <legend>Outgoing Call</legend>

packages/@webex/media-helpers/package.json

@@ -28,7 +28,7 @@
     "@webex/jest-config-legacy": "workspace:^",
     "@webex/legacy-tools": "workspace:^",
     "@webex/ts-events": "^1.1.0",
-    "@webex/web-media-effects": "^2.11.5"
+    "@webex/web-media-effects": "^2.12.0"
   },
   "browserify": {
     "transform": [

packages/calling/src/CallingClient/calling/call.ts

@@ -1,5 +1,9 @@
-/* eslint-disable valid-jsdoc */
-import {Event, LocalMicrophoneStream, RoapMediaConnection} from '@webex/internal-media-core';
+import {
+  Event,
+  LocalMicrophoneStream,
+  LocalStreamEventNames,
+  RoapMediaConnection,
+} from '@webex/internal-media-core';
 import {createMachine, interpret} from 'xstate';
 import {v4 as uuid} from 'uuid';
 import {ERROR_LAYER, ERROR_TYPE, ErrorContext} from '../../Errors/types';
@@ -1979,6 +1983,7 @@ export class Call extends Eventing<CallEventTypes> implements ICall {
       this.initMediaConnection(localAudioTrack);
       this.mediaRoapEventsListener();
       this.mediaTrackListener();
+      this.outputTrackUpdateListener(localAudioStream);
     }
 
     if (this.callStateMachine.state.value === 'S_SEND_CALL_PROGRESS') {
@@ -2003,6 +2008,7 @@ export class Call extends Eventing<CallEventTypes> implements ICall {
       this.initMediaConnection(localAudioTrack);
       this.mediaRoapEventsListener();
       this.mediaTrackListener();
+      this.outputTrackUpdateListener(localAudioStream);
     }
 
     if (this.mediaStateMachine.state.value === 'S_ROAP_IDLE') {
@@ -2399,9 +2405,12 @@ export class Call extends Eventing<CallEventTypes> implements ICall {
     });
   }
 
-  /**
-   *
-   */
+  private outputTrackUpdateListener(localAudioStream: LocalMicrophoneStream) {
+    localAudioStream.on(LocalStreamEventNames.OutputTrackChange, (track: MediaStreamTrack) => {
+      this.mediaConnection.updateLocalTracks({audio: track});
+    });
+  }
+
   private async delete(): Promise<MobiusCallResponse> {
     const disconnectMetrics = await this.getCallStats();
 

packages/calling/src/index.ts

@@ -1,4 +1,4 @@
-import {createMicrophoneStream} from '@webex/media-helpers';
+import {NoiseReductionEffect, createMicrophoneStream} from '@webex/media-helpers';
 import {createCallSettingsClient} from './CallSettings/CallSettings';
 import {createContactsClient} from './Contacts/ContactsClient';
 import {createClient} from './CallingClient/CallingClient';
@@ -9,9 +9,10 @@ import Logger from './Logger';
 export {
   createClient,
   createCallHistoryClient,
+  createCallSettingsClient,
+  createContactsClient,
   createMicrophoneStream,
   createVoicemailClient,
-  createContactsClient,
-  createCallSettingsClient,
   Logger,
+  NoiseReductionEffect,
 };

packages/webex/src/calling.js

@@ -95,6 +95,10 @@ class Calling extends EventEmitter {
   static get createMicrophoneStream() {
     return WebexCalling.createMicrophoneStream;
   }
+
+  static createNoiseReductionEffect(authToken) {
+    return new WebexCalling.NoiseReductionEffect({authToken});
+  }
 }
 
 const createCalling = async ({webex, webexConfig, callingConfig}) => {

yarn.lock

@@ -8001,6 +8001,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webex/ladon-ts@npm:^4.2.4":
+  version: 4.2.4
+  resolution: "@webex/ladon-ts@npm:4.2.4"
+  dependencies:
+    onnxruntime-web: ^1.15.1
+  checksum: 60715e517f5dc000bf8c1eb47c013de139f1a4c0cefc814c4667434ca83ba54f1638187345af9a78746ad4da06e3115164a6faed523c815506fffb05a43427c6
+  languageName: node
+  linkType: hard
+
 "@webex/legacy-tools@workspace:^, @webex/legacy-tools@workspace:packages/legacy/tools":
   version: 0.0.0-use.local
   resolution: "@webex/legacy-tools@workspace:packages/legacy/tools"
@@ -8081,7 +8090,7 @@ __metadata:
     "@webex/test-helper-chai": "workspace:^"
     "@webex/test-helper-mock-webex": "workspace:^"
     "@webex/ts-events": ^1.1.0
-    "@webex/web-media-effects": ^2.11.5
+    "@webex/web-media-effects": ^2.12.0
     eslint: ^8.24.0
     sinon: ^9.2.4
   languageName: unknown
@@ -9015,15 +9024,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@webex/web-media-effects@npm:^2.11.5":
-  version: 2.11.5
-  resolution: "@webex/web-media-effects@npm:2.11.5"
+"@webex/web-media-effects@npm:^2.12.0":
+  version: 2.13.0
+  resolution: "@webex/web-media-effects@npm:2.13.0"
   dependencies:
-    "@webex/ladon-ts": ^4.2.3
+    "@webex/ladon-ts": ^4.2.4
     events: ^3.3.0
     js-logger: ^1.6.1
     typed-emitter: ^1.4.0
-  checksum: 0fd101b146e24414a720abde3032bf4f96343bad2b516eefd843ad04fb762e1a66bf8a578e42350f80aeab3f339004e0fbb00e2ea93678a3cd3169394f0e5880
+  checksum: e9fb5be139f91e1fe91b229e63244eec9e5be2917c6d78cbcf48d0a4a7e626d0344a951459124f5ace7a2599cc7b463bee96be544b33a6a3bd710ae4120e5464
   languageName: node
   linkType: hard