@webex/plugin-meetings 3.0.0-beta.23 → 3.0.0-beta.231

package/src/multistream/receiveSlotManager.ts

@@ -1,11 +1,13 @@
 /* eslint-disable valid-jsdoc */
 /* eslint-disable import/prefer-default-export */
-import {MediaType} from '@webex/internal-media-core';
-
+import {MediaType, ReceiveSlot as WcmeReceiveSlot} from '@webex/internal-media-core';
 import LoggerProxy from '../common/logs/logger-proxy';
-import Meeting from '../meeting';
 
-import {CSI, ReceiveSlot} from './receiveSlot';
+import {FindMemberIdCallback, ReceiveSlot} from './receiveSlot';
+
+export type CreateSlotCallback = (mediaType: MediaType) => Promise<WcmeReceiveSlot>;
+
+export type {CSI, FindMemberIdCallback} from './receiveSlot';
 
 /**
  * Manages all receive slots used by a meeting. WMCE receive slots cannot be ever deleted,
@@ -16,13 +18,18 @@ export class ReceiveSlotManager {
 
   private freeSlots: {[key in MediaType]: ReceiveSlot[]};
 
-  private meeting: Meeting;
+  private createSlotCallback: CreateSlotCallback;
+
+  private findMemberIdByCsiCallback: FindMemberIdCallback;
 
   /**
    * Constructor
    * @param {Meeting} meeting
    */
-  constructor(meeting) {
+  constructor(
+    createSlotCallback: CreateSlotCallback,
+    findMemberIdByCsiCallback: FindMemberIdCallback
+  ) {
     this.allocatedSlots = {
       [MediaType.AudioMain]: [],
       [MediaType.VideoMain]: [],
@@ -35,7 +42,8 @@ export class ReceiveSlotManager {
       [MediaType.AudioSlides]: [],
       [MediaType.VideoSlides]: [],
     };
-    this.meeting = meeting;
+    this.createSlotCallback = createSlotCallback;
+    this.findMemberIdByCsiCallback = findMemberIdByCsiCallback;
   }
 
   /**
@@ -45,34 +53,24 @@ export class ReceiveSlotManager {
    * @returns {Promise<ReceiveSlot>}
    */
   async allocateSlot(mediaType: MediaType): Promise<ReceiveSlot> {
-    if (!this.meeting?.mediaProperties?.webrtcMediaConnection) {
-      return Promise.reject(new Error('Webrtc media connection is missing'));
-    }
-
     // try to use one of the free ones
     const availableSlot = this.freeSlots[mediaType].pop();
 
     if (availableSlot) {
       this.allocatedSlots[mediaType].push(availableSlot);
 
-      LoggerProxy.logger.log(`receive slot re-used: ${availableSlot.id}`);
+      LoggerProxy.logger.log(`${mediaType}: receive slot re-used: ${availableSlot.id}`);
 
       return availableSlot;
     }
 
     // we have to create a new one
-    const wcmeReceiveSlot =
-      await this.meeting.mediaProperties.webrtcMediaConnection.createReceiveSlot(mediaType);
-
-    const receiveSlot = new ReceiveSlot(
-      mediaType,
-      wcmeReceiveSlot,
-      // @ts-ignore
-      (csi: CSI) => this.meeting.members.findMemberByCsi(csi)?.id
-    );
+    const wcmeReceiveSlot = await this.createSlotCallback(mediaType);
+
+    const receiveSlot = new ReceiveSlot(mediaType, wcmeReceiveSlot, this.findMemberIdByCsiCallback);
 
     this.allocatedSlots[mediaType].push(receiveSlot);
-    LoggerProxy.logger.log(`new receive slot allocated: ${receiveSlot.id}`);
+    LoggerProxy.logger.log(`${mediaType}: new receive slot allocated: ${receiveSlot.id}`);
 
     return receiveSlot;
   }
@@ -89,10 +87,10 @@ export class ReceiveSlotManager {
     if (idx >= 0) {
       this.allocatedSlots[slot.mediaType].splice(idx, 1);
       this.freeSlots[slot.mediaType].push(slot);
-      LoggerProxy.logger.log(`receive slot released: ${slot.id}`);
+      LoggerProxy.logger.log(`${slot.mediaType}: receive slot released: ${slot.id}`);
     } else {
       LoggerProxy.logger.warn(
-        'ReceiveSlotManager#releaseSlot --> trying to release a slot that is not managed by this ReceiveSlotManager'
+        `ReceiveSlotManager#releaseSlot --> trying to release a ${slot.mediaType}} slot that is not managed by this ReceiveSlotManager`
       );
     }
   }
@@ -141,4 +139,28 @@ export class ReceiveSlotManager {
       numFreeSlots,
     };
   }
+
+  /**
+   * Tries to find the member id on all allocated receive slots
+   * This function should be called when new members are added to the meeting.
+   */
+  updateMemberIds() {
+    Object.keys(this.allocatedSlots).forEach((key) => {
+      this.allocatedSlots[key].forEach((slot: ReceiveSlot) => {
+        slot.findMemberId();
+      });
+    });
+  }
+
+  /**
+   * Find a receive slot by a ssrc.
+   *
+   * @param ssrc - The ssrc of the receive slot to find.
+   * @returns - The receive slot with this ssrc, undefined if not found.
+   */
+  findReceiveSlotBySsrc(ssrc: number): ReceiveSlot | undefined {
+    return Object.values(this.allocatedSlots)
+      .flat()
+      .find((r) => ssrc && r.wcmeReceiveSlot?.id?.ssrc === ssrc);
+  }
 }

package/src/multistream/remoteMedia.ts

@@ -1,5 +1,5 @@
 /* eslint-disable valid-jsdoc */
-import {MediaType, SourceState} from '@webex/internal-media-core';
+import {MediaType, StreamState} from '@webex/internal-media-core';
 import LoggerProxy from '../common/logs/logger-proxy';
 import EventsScope from '../common/events/events-scope';
 
@@ -102,6 +102,31 @@ export class RemoteMedia extends EventsScope {
     this.id = `RM${remoteMediaCounter}-${this.receiveSlot.id}`;
   }
 
+  /**
+   * Supply the width and height of the video element
+   * to restrict the requested resolution to this size
+   * @param width width of the video element
+   * @param height height of the video element
+   */
+  public setSizeHint(width, height) {
+    // only base on height for now
+    let fs: number;
+
+    if (height < 135) {
+      fs = 60;
+    } else if (height < 270) {
+      fs = 240;
+    } else if (height < 540) {
+      fs = 920;
+    } else if (height <= 720) {
+      fs = 3600;
+    } else {
+      fs = 8192;
+    }
+
+    this.receiveSlot?.setMaxFs(fs);
+  }
+
   /**
    * Invalidates the remote media by clearing the reference to a receive slot and
    * cancelling the media request.
@@ -208,7 +233,7 @@ export class RemoteMedia extends EventsScope {
   /**
    * Getter for source state
    */
-  public get sourceState(): SourceState {
+  public get sourceState(): StreamState {
     return this.receiveSlot?.sourceState;
   }
 

package/src/multistream/remoteMediaGroup.ts

@@ -1,6 +1,7 @@
 /* eslint-disable valid-jsdoc */
 /* eslint-disable require-jsdoc */
 /* eslint-disable import/prefer-default-export */
+import {forEach} from 'lodash';
 import LoggerProxy from '../common/logs/logger-proxy';
 
 import {getMaxFs, RemoteMedia, RemoteVideoResolution} from './remoteMedia';
@@ -66,6 +67,53 @@ export class RemoteMediaGroup {
     return [...this.unpinnedRemoteMedia, ...this.pinnedRemoteMedia];
   }
 
+  /**
+   * Sets CSIs for multiple RemoteMedia instances belonging to this RemoteMediaGroup.
+   * For each entry in the remoteMediaCsis array:
+   * - if csi is specified, the RemoteMedia instance is pinned to that CSI
+   * - if csi is undefined, the RemoteMedia instance is unpinned
+   * @internal
+   */
+  public setActiveSpeakerCsis(
+    remoteMediaCsis: {remoteMedia: RemoteMedia; csi?: number}[],
+    commit = true
+  ): void {
+    forEach(remoteMediaCsis, ({csi, remoteMedia}) => {
+      if (csi) {
+        if (!(this.pinnedRemoteMedia.indexOf(remoteMedia) >= 0)) {
+          const unpinId = this.unpinnedRemoteMedia.indexOf(remoteMedia);
+          if (unpinId >= 0) {
+            this.unpinnedRemoteMedia.splice(unpinId, 1);
+            this.pinnedRemoteMedia.push(remoteMedia);
+          } else {
+            throw new Error(
+              `failed to pin a remote media object ${remoteMedia.id}, because it is not found in this remote media group`
+            );
+          }
+        }
+        remoteMedia.sendMediaRequest(csi, false);
+      } else {
+        if (!(this.unpinnedRemoteMedia.indexOf(remoteMedia) >= 0)) {
+          const pinId = this.pinnedRemoteMedia.indexOf(remoteMedia);
+          if (pinId >= 0) {
+            this.pinnedRemoteMedia.splice(pinId, 1);
+            this.unpinnedRemoteMedia.push(remoteMedia);
+          } else {
+            throw new Error(
+              `failed to unpin a remote media object ${remoteMedia.id}, because it is not found in this remote media group`
+            );
+          }
+        }
+        remoteMedia.cancelMediaRequest(false);
+      }
+    });
+    this.cancelActiveSpeakerMediaRequest(false);
+    this.sendActiveSpeakerMediaRequest(false);
+    if (commit) {
+      this.mediaRequestManager.commit();
+    }
+  }
+
   /**
    * Pins a specific remote media instance to a specfic CSI, so the media will
    * no longer come from active speaker, but from that CSI.
@@ -151,6 +199,17 @@ export class RemoteMediaGroup {
     throw new Error(`remote media object ${remoteMedia.id} not found in the group`);
   }
 
+  /**
+   * setPreferLiveVideo - sets preferLiveVideo to true/false
+   * @internal
+   */
+  public setPreferLiveVideo(preferLiveVideo: boolean, commit: boolean) {
+    if (this.options.preferLiveVideo !== preferLiveVideo) {
+      this.options.preferLiveVideo = preferLiveVideo;
+      this.sendActiveSpeakerMediaRequest(commit);
+    }
+  }
+
   private sendActiveSpeakerMediaRequest(commit: boolean) {
     this.cancelActiveSpeakerMediaRequest(false);
 

package/src/multistream/remoteMediaManager.ts

@@ -1,5 +1,5 @@
 /* eslint-disable valid-jsdoc */
-import {cloneDeep, remove} from 'lodash';
+import {cloneDeep, forEach, remove} from 'lodash';
 import {EventMap} from 'typed-emitter';
 import {MediaType} from '@webex/internal-media-core';
 
@@ -96,6 +96,7 @@ const OnePlusFiveLayout: VideoLayout = {
 };
 
 // A layout with 2 big panes for 2 main active speakers and a strip of 6 small panes for other active speakers:
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const TwoMainPlusSixSmallLayout: VideoLayout = {
   activeSpeakerVideoPaneGroups: [
     {
@@ -115,7 +116,7 @@ const TwoMainPlusSixSmallLayout: VideoLayout = {
 
 // A strip of 8 small video panes (thumbnails) displayed at the top of a remote screenshare:
 const RemoteScreenShareWithSmallThumbnailsLayout: VideoLayout = {
-  // screenShareVideo: {size: 'best'}, // todo: SPARK-393485: uncomment this once backend supports screen sharing
+  screenShareVideo: {size: 'best'},
   activeSpeakerVideoPaneGroups: [
     {
       id: 'thumbnails',
@@ -153,7 +154,7 @@ const Stage2x2With6ThumbnailsLayout: VideoLayout = {
 export const DefaultConfiguration: Configuration = {
   audio: {
     numOfActiveSpeakerStreams: 3,
-    numOfScreenShareStreams: 0, // todo: SPARK-393485: change to 1 once backend supports screen sharing
+    numOfScreenShareStreams: 1,
   },
   video: {
     preferLiveVideo: true,
@@ -490,6 +491,38 @@ export class RemoteMediaManager extends EventsScope {
     return this.currentLayoutId;
   }
 
+  /**
+   * sets the preferLiveVideo
+   */
+  public setPreferLiveVideo(preferLiveVideo: boolean) {
+    LoggerProxy.logger.log(
+      `RemoteMediaManager#setPreferLiveVideo --> setPreferLiveVideo is called to set preferLiveVideo to ${preferLiveVideo}`
+    );
+    this.config.video.preferLiveVideo = preferLiveVideo;
+    Object.values(this.media.video.activeSpeakerGroups).forEach((activeSpeakerGroup) => {
+      activeSpeakerGroup.setPreferLiveVideo(preferLiveVideo, false);
+    });
+    this.mediaRequestManagers.video.commit();
+  }
+
+  /**
+   * Sets CSIs for multiple RemoteMedia instances belonging to RemoteMediaGroup.
+   * For each entry in the remoteMediaCsis array:
+   * - if csi is specified, the RemoteMedia instance is pinned to that CSI
+   * - if csi is undefined, the RemoteMedia instance is unpinned
+   */
+  public setActiveSpeakerCsis(remoteMediaCsis: {remoteMedia: RemoteMedia; csi?: number}[]) {
+    Object.values(this.media.video.activeSpeakerGroups).forEach((remoteMediaGroup) => {
+      const groupRemoteMediaCsis = remoteMediaCsis.filter(({remoteMedia}) =>
+        remoteMediaGroup.includes(remoteMedia)
+      );
+      if (groupRemoteMediaCsis.length > 0) {
+        remoteMediaGroup.setActiveSpeakerCsis(groupRemoteMediaCsis, false);
+      }
+    });
+    this.mediaRequestManagers.video.commit();
+  }
+
   /**
    * Creates the audio slots
    */
@@ -601,25 +634,37 @@ export class RemoteMediaManager extends EventsScope {
   }
 
   /**
-   * Allocates receive slots to all video panes in the current selected layout
+   * Allocates receive slots to all active speaker video panes
+   * in the current selected layout.
+   *
+   * Allocation tries to keep the same order of the slots between the previous
+   * layout and the new one. Sorting helps making sure that highest priority slots
+   * go in the same order in the new layout.
    */
-  private allocateSlotsToVideoPaneGroups() {
-    this.receiveSlotAllocations = {activeSpeaker: {}, receiverSelected: {}};
-
-    this.currentLayout?.activeSpeakerVideoPaneGroups?.forEach((group) => {
-      this.receiveSlotAllocations.activeSpeaker[group.id] = {slots: []};
-
-      for (let paneIndex = 0; paneIndex < group.numPanes; paneIndex += 1) {
-        // allocate a slot from the "unused" list
-        const freeSlot = this.slots.video.unused.pop();
-
-        if (freeSlot) {
-          this.slots.video.activeSpeaker.push(freeSlot);
-          this.receiveSlotAllocations.activeSpeaker[group.id].slots.push(freeSlot);
+  private allocateSlotsToActiveSpeakerPaneGroups() {
+    this.currentLayout?.activeSpeakerVideoPaneGroups
+      // sorting in descending order based on group priority
+      ?.sort((a, b) => (a.priority < b.priority ? 1 : -1))
+      ?.forEach((group) => {
+        this.receiveSlotAllocations.activeSpeaker[group.id] = {slots: []};
+
+        for (let paneIndex = 0; paneIndex < group.numPanes; paneIndex += 1) {
+          // allocate a slot from the "unused" list, by grabbing in same order (shift) as previous layout
+          const freeSlot = this.slots.video.unused.shift();
+
+          if (freeSlot) {
+            this.slots.video.activeSpeaker.push(freeSlot);
+            this.receiveSlotAllocations.activeSpeaker[group.id].slots.push(freeSlot);
+          }
         }
-      }
-    });
+      });
+  }
 
+  /**
+   * Allocates receive slots to all receiver selected video panes
+   * in the current selected layout
+   */
+  private allocateSlotsToReceiverSelectedVideoPaneGroups() {
     this.currentLayout?.memberVideoPanes?.forEach((memberPane) => {
       // check if there is existing slot for this csi
       const existingSlot = this.slots.video.receiverSelected.find(
@@ -646,19 +691,15 @@ export class RemoteMediaManager extends EventsScope {
   }
 
   /**
-   * Makes sure we have the right number of receive slots created for the current layout
-   * and allocates them to the right video panes / pane groups
-   *
-   * @returns {Promise}
+   * Ensures that we have enough slots for the current layout.
    */
-  private async updateVideoReceiveSlots() {
+  private async refillRequiredSlotsIfNeeded() {
     const requiredNumSlots = this.getRequiredNumVideoSlotsForLayout(this.currentLayout);
     const totalNumSlots =
       this.slots.video.unused.length +
       this.slots.video.activeSpeaker.length +
       this.slots.video.receiverSelected.length;
 
-    // ensure we have enough total slots for current layout
     if (totalNumSlots < requiredNumSlots) {
       let numSlotsToCreate = requiredNumSlots - totalNumSlots;
 
@@ -671,20 +712,60 @@ export class RemoteMediaManager extends EventsScope {
         numSlotsToCreate -= 1;
       }
     }
+  }
 
-    // move all no longer needed receiver-selected slots to "unused"
-    this.trimReceiverSelectedSlots();
-
-    // move all active speaker slots to "unused"
+  /**
+   * Move all active speaker slots to "unused"
+   */
+  private trimActiveSpeakerSlots() {
     this.slots.video.unused.push(...this.slots.video.activeSpeaker);
     this.slots.video.activeSpeaker.length = 0;
+  }
 
-    // allocate the slots to the right panes / pane groups
-    this.allocateSlotsToVideoPaneGroups();
+  /**
+   * Logs the state of the receive slots
+   */
+  private logReceieveSlots() {
+    let logMessage = '';
+    forEach(this.receiveSlotAllocations.activeSpeaker, (group, groupName) => {
+      logMessage += `group: ${groupName}\n${group.slots.map((slot) => slot.logString).join(' ')}`;
+    });
+
+    logMessage += '\nreceiverSelected:\n';
+    forEach(this.receiveSlotAllocations.receiverSelected, (slot, key) => {
+      logMessage += ` ${key}: ${slot.logString}\n`;
+    });
 
     LoggerProxy.logger.log(
-      `RemoteMediaManager#updateVideoReceiveSlots --> receive slots updated: unused=${this.slots.video.unused.length}, activeSpeaker=${this.slots.video.activeSpeaker.length}, receiverSelected=${this.slots.video.receiverSelected.length}`
+      `RemoteMediaManager#updateVideoReceiveSlots --> receive slots updated: unused=${this.slots.video.unused.length}, activeSpeaker=${this.slots.video.activeSpeaker.length}, receiverSelected=${this.slots.video.receiverSelected.length}\n${logMessage}`
     );
+  }
+
+  /**
+   * Makes sure we have the right number of receive slots created for the current layout
+   * and allocates them to the right video panes / pane groups
+   *
+   * @returns {Promise}
+   */
+  private async updateVideoReceiveSlots() {
+    // move all active speaker slots to "unused"
+    this.trimActiveSpeakerSlots();
+
+    // move all no longer needed receiver-selected slots to "unused"
+    this.trimReceiverSelectedSlots();
+
+    // ensure we have enough total slots for current layout
+    await this.refillRequiredSlotsIfNeeded();
+
+    // allocate the slots to the right panes / pane groups
+    // reset allocations
+    this.receiveSlotAllocations = {activeSpeaker: {}, receiverSelected: {}};
+    // allocate active speaker
+    this.allocateSlotsToActiveSpeakerPaneGroups();
+    // allocate receiver selected
+    this.allocateSlotsToReceiverSelectedVideoPaneGroups();
+
+    this.logReceieveSlots();
 
     // If this is the initial layout, there may be some "unused" slots left because of the preallocation
     // done in this.preallocateVideoReceiveSlots(), so release them now

package/src/reachability/index.ts

@@ -7,13 +7,14 @@
 import _ from 'lodash';
 
 import LoggerProxy from '../common/logs/logger-proxy';
-import {ICE_GATHERING_STATE, CONNECTION_STATE, REACHABILITY} from '../constants';
+import {ICE_GATHERING_STATE, CONNECTION_STATE, REACHABILITY, IP_VERSION} from '../constants';
 
 import ReachabilityRequest from './request';
 
 const DEFAULT_TIMEOUT = 3000;
 const VIDEO_MESH_TIMEOUT = 1000;
 
+export type ICECandidateResult = {clusterId: string; elapsed?: string | null; publicIPs?: string[]};
 /**
  * @class Reachability
  * @export
@@ -63,11 +64,15 @@ export default class Reachability {
 
     // Remove stored reachability results to ensure no stale data
     // @ts-ignore
-    await this.webex.boundedStorage.del(this.namespace, REACHABILITY.localStorage);
+    await this.webex.boundedStorage.del(this.namespace, REACHABILITY.localStorageResult);
+    // @ts-ignore
+    await this.webex.boundedStorage.del(this.namespace, REACHABILITY.localStorageJoinCookie);
 
     // Fetch clusters and measure latency
     try {
-      const clusters = await this.reachabilityRequest.getClusters();
+      const {clusters, joinCookie} = await this.reachabilityRequest.getClusters(
+        this.getIpVersion()
+      );
 
       // Perform Reachability Check
       const results = await this.performReachabilityCheck(clusters);
@@ -75,9 +80,15 @@ export default class Reachability {
       // @ts-ignore
       await this.webex.boundedStorage.put(
         this.namespace,
-        REACHABILITY.localStorage,
+        REACHABILITY.localStorageResult,
         JSON.stringify(results)
       );
+      // @ts-ignore
+      await this.webex.boundedStorage.put(
+        this.namespace,
+        REACHABILITY.localStorageJoinCookie,
+        JSON.stringify(joinCookie)
+      );
 
       LoggerProxy.logger.log(
         'Reachability:index#gatherReachability --> Reachability checks completed'
@@ -103,7 +114,7 @@ export default class Reachability {
     let reachable = false;
     // @ts-ignore
     const reachabilityData = await this.webex.boundedStorage
-      .get(this.namespace, REACHABILITY.localStorage)
+      .get(this.namespace, REACHABILITY.localStorageResult)
       .catch(() => {});
 
     if (reachabilityData) {
@@ -123,6 +134,14 @@ export default class Reachability {
     return reachable;
   }
 
+  /**
+   * Returns what we know about the IP version of the networks we're connected to.
+   * @returns {IP_VERSION}
+   */
+  getIpVersion(): IP_VERSION {
+    return IP_VERSION.unknown;
+  }
+
   /**
    * Generate peerConnection config settings
    * @param {object} cluster
@@ -131,7 +150,7 @@ export default class Reachability {
    * @memberof Reachability
    */
   private buildPeerConnectionConfig(cluster: any) {
-    const iceServers = _.uniq([...cluster.udp, ...cluster.tcp]).map((url) => ({
+    const iceServers = _.uniq(cluster.udp).map((url) => ({
       username: '',
       credential: '',
       urls: [url],
@@ -292,6 +311,8 @@ export default class Reachability {
           `Reachability:index#onIceCandidate --> Successfully pinged ${peerConnection.key}:`,
           elapsed
         );
+        // order is important
+        this.addPublicIP(peerConnection, e.candidate.address);
         this.setLatencyAndClose(peerConnection, elapsed);
       }
     };
@@ -309,8 +330,9 @@ export default class Reachability {
   private iceGatheringState(peerConnection: RTCPeerConnection, timeout: number) {
     const ELAPSED = 'elapsed';
 
-    return new Promise((resolve) => {
+    return new Promise<ICECandidateResult>((resolve) => {
       const peerConnectionProxy = new window.Proxy(peerConnection, {
+        // eslint-disable-next-line require-jsdoc
         get(target, property) {
           const targetMember = target[property];
 
@@ -324,7 +346,7 @@ export default class Reachability {
           // only intercept elapsed property
           if (property === ELAPSED) {
             // @ts-ignore
-            resolve({clusterId: peerConnection.key, elapsed: value});
+            resolve({clusterId: peerConnection.key, publicIPs: target.publicIPs, elapsed: value});
 
             return true;
           }
@@ -345,6 +367,8 @@ export default class Reachability {
 
         // Close any open peerConnections
         if (peerConnectionProxy.connectionState !== CLOSED) {
+          // order is important
+          this.addPublicIP(peerConnectionProxy, null);
           this.setLatencyAndClose(peerConnectionProxy, null);
         }
       }, timeout);
@@ -369,29 +393,36 @@ export default class Reachability {
 
   /**
    * Calculates time to establish connection
-   * @param {array} iceResults iceResults
+   * @param {Array<ICECandidateResult>} iceResults iceResults
    * @returns {object} reachabilityMap
-   * @private
+   * @protected
    * @memberof Reachability
    */
-  private parseIceResultsToReachabilityResults(iceResults: Array<any>) {
+  protected parseIceResultsToReachabilityResults(iceResults: Array<ICECandidateResult>) {
     const reachabilityMap = {};
 
-    iceResults.forEach(({clusterId, elapsed}) => {
-      let latencyResult;
+    iceResults.forEach(({clusterId, elapsed, publicIPs}) => {
+      const latencyResult = {};
 
-      if (elapsed === null) {
-        latencyResult = {reachable: 'false'};
+      if (!elapsed) {
+        Object.assign(latencyResult, {reachable: 'false'});
       } else {
-        latencyResult = {
+        Object.assign(latencyResult, {
           reachable: 'true',
           latencyInMilliseconds: elapsed.toString(),
-        };
+        });
+      }
+
+      if (publicIPs) {
+        Object.assign(latencyResult, {
+          clientMediaIPs: publicIPs,
+        });
       }
 
       reachabilityMap[clusterId] = {
         udp: latencyResult,
-        tcp: latencyResult,
+        tcp: {untested: 'true'},
+        xtls: {untested: 'true'},
       };
     });
 
@@ -432,6 +463,33 @@ export default class Reachability {
     });
   }
 
+  /**
+   * Adds public IP (client media IPs)
+   * @param {RTCPeerConnection} peerConnection
+   * @param {string} publicIP
+   * @returns {void}
+   */
+  protected addPublicIP(peerConnection: RTCPeerConnection, publicIP?: string | null) {
+    const modifiedPeerConnection: RTCPeerConnection & {publicIPs?: string[]} = peerConnection;
+    const {CLOSED} = CONNECTION_STATE;
+
+    if (modifiedPeerConnection.connectionState === CLOSED) {
+      LoggerProxy.logger.log(
+        `Reachability:index#addPublicIP --> Attempting to set publicIP of ${publicIP} on closed peerConnection.`
+      );
+    }
+
+    if (publicIP) {
+      if (modifiedPeerConnection.publicIPs) {
+        modifiedPeerConnection.publicIPs.push(publicIP);
+      } else {
+        modifiedPeerConnection.publicIPs = [publicIP];
+      }
+    } else {
+      modifiedPeerConnection.publicIPs = null;
+    }
+  }
+
   /**
    * Records latency and closes the peerConnection
    * @param {RTCPeerConnection} peerConnection