@webex/plugin-meetings 3.0.0-beta.31 → 3.0.0-beta.310

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: [
     {
@@ -472,6 +473,8 @@ export class RemoteMediaManager extends EventsScope {
     if (!this.started) {
       throw new Error('setLayout() called before start()');
     }
+    LoggerProxy.logger.log(`RemoteMediaManager#setLayout --> new layout selected: ${layoutId}`);
+
     this.currentLayoutId = layoutId;
     this.currentLayout = cloneDeep(this.config.video.layouts[this.currentLayoutId]);
 
@@ -490,6 +493,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 +636,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 +693,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 +714,95 @@ 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 logMainVideoReceiveSlots() {
+    let logMessage = '';
+    forEach(this.receiveSlotAllocations.activeSpeaker, (group, groupName) => {
+      logMessage += `\ngroup: ${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#logMainVideoReceiveSlots --> MAIN VIDEO receive slots: unused=${this.slots.video.unused.length}, activeSpeaker=${this.slots.video.activeSpeaker.length}, receiverSelected=${this.slots.video.receiverSelected.length}${logMessage}`
+    );
+  }
+
+  /** logs main audio slots */
+  private logMainAudioReceiveSlots() {
+    LoggerProxy.logger.log(
+      `RemoteMediaManager#logMainAudioReceiveSlots --> MAIN AUDIO receive slots: ${this.slots.audio
+        .map((slot) => slot.logString)
+        .join(', ')}`
+    );
+  }
+
+  /** logs slides video slots */
+  private logSlidesVideoReceiveSlots() {
+    LoggerProxy.logger.log(
+      `RemoteMediaManager#logSlidesVideoReceiveSlots --> SLIDES VIDEO receive slot: ${this.slots.screenShare.video?.logString}`
+    );
+  }
 
+  /** logs slides audio slots */
+  private logSlidesAudioReceiveSlots() {
     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#logSlidesAudioReceiveSlots --> SLIDES AUDIO receive slots: ${this.slots.screenShare.audio
+        .map((slot) => slot.logString)
+        .join(', ')}`
     );
+  }
+
+  /** Logs all current receive slots */
+  public logAllReceiveSlots() {
+    this.logMainVideoReceiveSlots();
+    this.logMainAudioReceiveSlots();
+    this.logSlidesVideoReceiveSlots();
+    this.logSlidesAudioReceiveSlots();
+  }
+
+  /**
+   * 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.logMainVideoReceiveSlots();
 
     // 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/multistream/sendSlotManager.ts

@@ -0,0 +1,170 @@
+import {
+  SendSlot,
+  MediaType,
+  LocalStream,
+  MultistreamRoapMediaConnection,
+} from '@webex/internal-media-core';
+
+export default class SendSlotManager {
+  private readonly slots: Map<MediaType, SendSlot> = new Map();
+  private readonly LoggerProxy: any;
+
+  constructor(LoggerProxy: any) {
+    this.LoggerProxy = LoggerProxy;
+  }
+
+  /**
+   * This method is used to create a sendSlot for the given mediaType and returns the created sendSlot
+   * @param {MultistreamRoapMediaConnection} mediaConnection MultistreamRoapMediaConnection for which a sendSlot needs to be created
+   * @param {MediaType} mediaType MediaType for which a sendSlot needs to be created (AUDIO_MAIN/VIDEO_MAIN/AUDIO_SLIDES/VIDEO_SLIDES)
+   * @param {boolean} active This is optional boolean to set the active state of the sendSlot. Default is true
+   * @returns {SendSlot} slot The created sendSlot
+   */
+  public createSlot(
+    mediaConnection: MultistreamRoapMediaConnection,
+    mediaType: MediaType,
+    active = true
+  ): SendSlot {
+    if (this.slots.has(mediaType)) {
+      throw new Error(`Slot for ${mediaType} already exists`);
+    }
+
+    const slot: SendSlot = mediaConnection.createSendSlot(mediaType, active);
+
+    this.slots.set(mediaType, slot);
+
+    this.LoggerProxy.logger.info(
+      `SendSlotsManager->createSlot#Created slot for ${mediaType} with active ${active}`
+    );
+
+    return slot;
+  }
+
+  /**
+   * This method is used to retrieve the sendSlot for the given mediaType
+   * @param {MediaType} mediaType of which the slot needs to be retrieved
+   * @returns {SendSlot}
+   */
+  public getSlot(mediaType: MediaType): SendSlot {
+    const slot = this.slots.get(mediaType);
+
+    if (!slot) {
+      throw new Error(`Slot for ${mediaType} does not exist`);
+    }
+
+    return slot;
+  }
+
+  /**
+   * This method publishes the given stream to the sendSlot for the given mediaType
+   * @param {MediaType} mediaType MediaType of the sendSlot to which a stream needs to be published (AUDIO_MAIN/VIDEO_MAIN/AUDIO_SLIDES/VIDEO_SLIDES)
+   * @param {LocalStream} stream LocalStream to be published
+   * @returns {Promise<void>}
+   */
+  public async publishStream(mediaType: MediaType, stream: LocalStream): Promise<void> {
+    const slot = this.slots.get(mediaType);
+
+    if (!slot) {
+      throw new Error(`Slot for ${mediaType} does not exist`);
+    }
+
+    await slot.publishStream(stream);
+
+    this.LoggerProxy.logger.info(
+      `SendSlotsManager->publishStream#Published stream for ${mediaType} and stream with label ${stream.label} and muted ${stream.muted}`
+    );
+  }
+
+  /**
+   * This method unpublishes the stream from the sendSlot of the given mediaType
+   * @param {MediaType} mediaType MediaType of the sendSlot from which a stream needs to be unpublished (AUDIO_MAIN/VIDEO_MAIN/AUDIO_SLIDES/VIDEO_SLIDES)
+   * @returns {Promise<void>}
+   */
+  public async unpublishStream(mediaType: MediaType): Promise<void> {
+    const slot = this.slots.get(mediaType);
+
+    if (!slot) {
+      throw new Error(`Slot for ${mediaType} does not exist`);
+    }
+
+    await slot.unpublishStream();
+
+    this.LoggerProxy.logger.info(
+      `SendSlotsManager->unpublishStream#Unpublished stream for ${mediaType}`
+    );
+  }
+
+  /**
+   * This method is used to set the active state of the sendSlot for the given mediaType
+   * @param {MediaType} mediaType The MediaType of the sendSlot for which the active state needs to be set (AUDIO_MAIN/VIDEO_MAIN/AUDIO_SLIDES/VIDEO_SLIDES)
+   * @param {boolean} active The boolean to set the active state of the sendSlot. Default is true
+   * @returns {void}
+   */
+  public setActive(mediaType: MediaType, active = true): void {
+    const slot = this.slots.get(mediaType);
+
+    if (!slot) {
+      throw new Error(`Slot for ${mediaType} does not exist`);
+    }
+
+    slot.active = active;
+
+    this.LoggerProxy.logger.info(
+      `SendSlotsManager->setActive#Set active for ${mediaType} to ${active}`
+    );
+  }
+
+  /**
+   * This method is used to set the codec parameters for the sendSlot of the given mediaType
+   * @param {MediaType} mediaType MediaType of the sendSlot for which the codec parameters needs to be set (AUDIO_MAIN/VIDEO_MAIN/AUDIO_SLIDES/VIDEO_SLIDES)
+   * @param {Object} codecParameters
+   * @returns {Promise<void>}
+   */
+  public async setCodecParameters(
+    mediaType: MediaType,
+    codecParameters: {
+      [key: string]: string | undefined; // As per ts-sdp undefined is considered as a valid value to be used for codec parameters
+    }
+  ): Promise<void> {
+    // These codec parameter changes underneath are SDP value changes that are taken care by WCME automatically. So no need for any change in streams from the web sdk side
+    const slot = this.slots.get(mediaType);
+
+    if (!slot) {
+      throw new Error(`Slot for ${mediaType} does not exist`);
+    }
+
+    await slot.setCodecParameters(codecParameters);
+
+    this.LoggerProxy.logger.info(
+      `SendSlotsManager->setCodecParameters#Set codec parameters for ${mediaType} to ${codecParameters}`
+    );
+  }
+
+  /**
+   * This method is used to delete the codec parameters for the sendSlot of the given mediaType
+   * @param {MediaType} mediaType MediaType of the sendSlot for which the codec parameters needs to be deleted (AUDIO_MAIN/VIDEO_MAIN/AUDIO_SLIDES/VIDEO_SLIDES)
+   * @param {Array<String>} parameters Array of keys of the codec parameters to be deleted
+   * @returns {Promise<void>}
+   */
+  public async deleteCodecParameters(mediaType: MediaType, parameters: string[]): Promise<void> {
+    const slot = this.slots.get(mediaType);
+
+    if (!slot) {
+      throw new Error(`Slot for ${mediaType} does not exist`);
+    }
+
+    await slot.deleteCodecParameters(parameters);
+
+    this.LoggerProxy.logger.info(
+      `SendSlotsManager->deleteCodecParameters#Deleted the following codec parameters -> ${parameters} for ${mediaType}`
+    );
+  }
+
+  /**
+   * This method is used to reset the SendSlotsManager by deleting all the sendSlots
+   * @returns {undefined}
+   */
+  public reset(): void {
+    this.slots.clear();
+  }
+}