@stream-io/video-client 1.8.4 → 1.9.1

package/src/rtc/Publisher.ts

@@ -1,29 +1,33 @@
-import * as SDP from 'sdp-transform';
 import { StreamSfuClient } from '../StreamSfuClient';
 import {
   PeerType,
   TrackInfo,
   TrackType,
   VideoLayer,
-  VideoQuality,
 } from '../gen/video/sfu/models/models';
 import { getIceCandidate } from './helpers/iceCandidate';
 import {
   findOptimalScreenSharingLayers,
   findOptimalVideoLayers,
   OptimalVideoLayer,
+  ridToVideoQuality,
+  toSvcEncodings,
 } from './videoLayers';
-import { getPreferredCodecs, getRNOptimalCodec } from './codecs';
+import { getOptimalVideoCodec, getPreferredCodecs, isSvcCodec } from './codecs';
 import { trackTypeToParticipantStreamKey } from './helpers/tracks';
 import { CallingState, CallState } from '../store';
 import { PublishOptions } from '../types';
-import { isReactNative } from '../helpers/platforms';
-import { enableHighQualityAudio, toggleDtx } from '../helpers/sdp-munging';
+import {
+  enableHighQualityAudio,
+  extractMid,
+  toggleDtx,
+} from '../helpers/sdp-munging';
 import { Logger } from '../coordinator/connection/types';
 import { getLogger } from '../logger';
 import { Dispatcher } from './Dispatcher';
 import { VideoLayerSetting } from '../gen/video/sfu/event/events';
 import { TargetResolutionResponse } from '../gen/shims';
+import { withoutConcurrency } from '../helpers/concurrency';
 
 export type PublisherConstructorOpts = {
   sfuClient: StreamSfuClient;
@@ -45,21 +49,9 @@ export class Publisher {
   private readonly logger: Logger;
   private pc: RTCPeerConnection;
   private readonly state: CallState;
-
-  private readonly transceiverRegistry: {
-    [key in TrackType]: RTCRtpTransceiver | undefined;
-  } = {
-    [TrackType.AUDIO]: undefined,
-    [TrackType.VIDEO]: undefined,
-    [TrackType.SCREEN_SHARE]: undefined,
-    [TrackType.SCREEN_SHARE_AUDIO]: undefined,
-    [TrackType.UNSPECIFIED]: undefined,
-  };
-
-  private readonly publishOptionsPerTrackType = new Map<
-    TrackType,
-    PublishOptions
-  >();
+  private readonly transceiverCache = new Map<TrackType, RTCRtpTransceiver>();
+  private readonly trackLayersCache = new Map<TrackType, OptimalVideoLayer[]>();
+  private readonly publishOptsForTrack = new Map<TrackType, PublishOptions>();
 
   /**
    * An array maintaining the order how transceivers were added to the peer connection.
@@ -69,52 +61,18 @@ export class Publisher {
    * @internal
    */
   private readonly transceiverInitOrder: TrackType[] = [];
-
-  private readonly trackKindMapping: {
-    [key in TrackType]: 'video' | 'audio' | undefined;
-  } = {
-    [TrackType.AUDIO]: 'audio',
-    [TrackType.VIDEO]: 'video',
-    [TrackType.SCREEN_SHARE]: 'video',
-    [TrackType.SCREEN_SHARE_AUDIO]: 'audio',
-    [TrackType.UNSPECIFIED]: undefined,
-  };
-
-  private readonly trackLayersCache: {
-    [key in TrackType]: OptimalVideoLayer[] | undefined;
-  } = {
-    [TrackType.AUDIO]: undefined,
-    [TrackType.VIDEO]: undefined,
-    [TrackType.SCREEN_SHARE]: undefined,
-    [TrackType.SCREEN_SHARE_AUDIO]: undefined,
-    [TrackType.UNSPECIFIED]: undefined,
-  };
-
   private readonly isDtxEnabled: boolean;
   private readonly isRedEnabled: boolean;
 
   private readonly unsubscribeOnIceRestart: () => void;
+  private readonly unsubscribeChangePublishQuality: () => void;
   private readonly onUnrecoverableError?: () => void;
 
   private isIceRestarting = false;
-
-  /**
-   * The SFU client instance to use for publishing and signaling.
-   */
-  sfuClient: StreamSfuClient;
+  private sfuClient: StreamSfuClient;
 
   /**
    * Constructs a new `Publisher` instance.
-   *
-   * @param connectionConfig the connection configuration to use.
-   * @param sfuClient the SFU client to use.
-   * @param state the call state to use.
-   * @param dispatcher the dispatcher to use.
-   * @param isDtxEnabled whether DTX is enabled.
-   * @param isRedEnabled whether RED is enabled.
-   * @param iceRestartDelay the delay in milliseconds to wait before restarting ICE once connection goes to `disconnected` state.
-   * @param onUnrecoverableError a callback to call when an unrecoverable error occurs.
-   * @param logTag the log tag to use.
    */
   constructor({
     connectionConfig,
@@ -141,6 +99,21 @@ export class Publisher {
         this.onUnrecoverableError?.();
       });
     });
+
+    this.unsubscribeChangePublishQuality = dispatcher.on(
+      'changePublishQuality',
+      ({ videoSenders }) => {
+        withoutConcurrency('publisher.changePublishQuality', async () => {
+          for (const videoSender of videoSenders) {
+            const { layers } = videoSender;
+            const enabledLayers = layers.filter((l) => l.active);
+            await this.changePublishQuality(enabledLayers);
+          }
+        }).catch((err) => {
+          this.logger('warn', 'Failed to change publish quality', err);
+        });
+      },
+    );
   }
 
   private createPeerConnection = (connectionConfig?: RTCConfiguration) => {
@@ -167,14 +140,8 @@ export class Publisher {
   close = ({ stopTracks }: { stopTracks: boolean }) => {
     if (stopTracks) {
       this.stopPublishing();
-      Object.keys(this.transceiverRegistry).forEach((trackType) => {
-        // @ts-ignore
-        this.transceiverRegistry[trackType] = undefined;
-      });
-      Object.keys(this.trackLayersCache).forEach((trackType) => {
-        // @ts-ignore
-        this.trackLayersCache[trackType] = undefined;
-      });
+      this.transceiverCache.clear();
+      this.trackLayersCache.clear();
     }
 
     this.detachEventHandlers();
@@ -188,6 +155,7 @@ export class Publisher {
    */
   detachEventHandlers = () => {
     this.unsubscribeOnIceRestart();
+    this.unsubscribeChangePublishQuality();
 
     this.pc.removeEventListener('icecandidate', this.onIceCandidate);
     this.pc.removeEventListener('negotiationneeded', this.onNegotiationNeeded);
@@ -227,106 +195,97 @@ export class Publisher {
       throw new Error(`Can't publish a track that has ended already.`);
     }
 
-    let transceiver = this.pc
-      .getTransceivers()
-      .find(
-        (t) =>
-          t === this.transceiverRegistry[trackType] &&
-          t.sender.track &&
-          t.sender.track?.kind === this.trackKindMapping[trackType],
-      );
-
-    /**
-     * An event handler which listens for the 'ended' event on the track.
-     * Once the track has ended, it will notify the SFU and update the state.
-     */
-    const handleTrackEnded = () => {
-      this.logger(
-        'info',
-        `Track ${TrackType[trackType]} has ended abruptly, notifying the SFU`,
-      );
-      // cleanup, this event listener needs to run only once.
-      track.removeEventListener('ended', handleTrackEnded);
-      this.notifyTrackMuteStateChanged(mediaStream, trackType, true).catch(
-        (err) => this.logger('warn', `Couldn't notify track mute state`, err),
-      );
-    };
-
-    if (!transceiver) {
-      const { settings } = this.state;
-      const targetResolution = settings?.video
-        .target_resolution as TargetResolutionResponse;
-      const screenShareBitrate =
-        settings?.screensharing.target_resolution?.bitrate;
-
-      const videoEncodings =
-        trackType === TrackType.VIDEO
-          ? findOptimalVideoLayers(track, targetResolution, opts)
-          : trackType === TrackType.SCREEN_SHARE
-            ? findOptimalScreenSharingLayers(track, opts, screenShareBitrate)
-            : undefined;
+    // enable the track if it is disabled
+    if (!track.enabled) track.enabled = true;
 
+    const transceiver = this.transceiverCache.get(trackType);
+    if (!transceiver || !transceiver.sender.track) {
       // listen for 'ended' event on the track as it might be ended abruptly
-      // by an external factor as permission revokes, device disconnected, etc.
+      // by an external factors such as permission revokes, a disconnected device, etc.
       // keep in mind that `track.stop()` doesn't trigger this event.
-      track.addEventListener('ended', handleTrackEnded);
-      if (!track.enabled) {
-        track.enabled = true;
-      }
-
-      transceiver = this.pc.addTransceiver(track, {
-        direction: 'sendonly',
-        streams:
-          trackType === TrackType.VIDEO || trackType === TrackType.SCREEN_SHARE
-            ? [mediaStream]
-            : undefined,
-        sendEncodings: videoEncodings,
-      });
-
-      this.logger('debug', `Added ${TrackType[trackType]} transceiver`);
-      this.transceiverInitOrder.push(trackType);
-      this.transceiverRegistry[trackType] = transceiver;
-      this.publishOptionsPerTrackType.set(trackType, opts);
-
-      const { preferredCodec } = opts;
-      const codec =
-        isReactNative() && trackType === TrackType.VIDEO && !preferredCodec
-          ? getRNOptimalCodec()
-          : preferredCodec;
-
-      const codecPreferences =
-        'setCodecPreferences' in transceiver
-          ? this.getCodecPreferences(trackType, codec)
-          : undefined;
-      if (codecPreferences) {
-        this.logger(
-          'info',
-          `Setting ${TrackType[trackType]} codec preferences`,
-          codecPreferences,
+      const handleTrackEnded = () => {
+        this.logger('info', `Track ${TrackType[trackType]} has ended abruptly`);
+        track.removeEventListener('ended', handleTrackEnded);
+        this.notifyTrackMuteStateChanged(mediaStream, trackType, true).catch(
+          (err) => this.logger('warn', `Couldn't notify track mute state`, err),
         );
-        try {
-          transceiver.setCodecPreferences(codecPreferences);
-        } catch (err) {
-          this.logger('warn', `Couldn't set codec preferences`, err);
-        }
-      }
+      };
+      track.addEventListener('ended', handleTrackEnded);
+      this.addTransceiver(trackType, track, opts, mediaStream);
     } else {
-      const previousTrack = transceiver.sender.track;
-      // don't stop the track if we are re-publishing the same track
-      if (previousTrack && previousTrack !== track) {
-        previousTrack.stop();
-        previousTrack.removeEventListener('ended', handleTrackEnded);
-        track.addEventListener('ended', handleTrackEnded);
-      }
-      if (!track.enabled) {
-        track.enabled = true;
-      }
-      await transceiver.sender.replaceTrack(track);
+      await this.updateTransceiver(transceiver, track);
     }
 
     await this.notifyTrackMuteStateChanged(mediaStream, trackType, false);
   };
 
+  /**
+   * Adds a new transceiver to the peer connection.
+   * This needs to be called when a new track kind is added to the peer connection.
+   * In other cases, use `updateTransceiver` method.
+   */
+  private addTransceiver = (
+    trackType: TrackType,
+    track: MediaStreamTrack,
+    opts: PublishOptions,
+    mediaStream: MediaStream,
+  ) => {
+    const { forceCodec, preferredCodec } = opts;
+    const codecInUse = forceCodec || getOptimalVideoCodec(preferredCodec);
+    const videoEncodings = this.computeLayers(trackType, track, opts);
+    const transceiver = this.pc.addTransceiver(track, {
+      direction: 'sendonly',
+      streams:
+        trackType === TrackType.VIDEO || trackType === TrackType.SCREEN_SHARE
+          ? [mediaStream]
+          : undefined,
+      sendEncodings: isSvcCodec(codecInUse)
+        ? toSvcEncodings(videoEncodings)
+        : videoEncodings,
+    });
+
+    this.logger('debug', `Added ${TrackType[trackType]} transceiver`);
+    this.transceiverInitOrder.push(trackType);
+    this.transceiverCache.set(trackType, transceiver);
+    this.publishOptsForTrack.set(trackType, opts);
+
+    // handle codec preferences
+    if (!('setCodecPreferences' in transceiver)) return;
+
+    const codecPreferences = this.getCodecPreferences(
+      trackType,
+      trackType === TrackType.VIDEO ? codecInUse : undefined,
+    );
+    if (!codecPreferences) return;
+
+    try {
+      this.logger(
+        'info',
+        `Setting ${TrackType[trackType]} codec preferences`,
+        codecPreferences,
+      );
+      transceiver.setCodecPreferences(codecPreferences);
+    } catch (err) {
+      this.logger('warn', `Couldn't set codec preferences`, err);
+    }
+  };
+
+  /**
+   * Updates the given transceiver with the new track.
+   * Stops the previous track and replaces it with the new one.
+   */
+  private updateTransceiver = async (
+    transceiver: RTCRtpTransceiver,
+    track: MediaStreamTrack,
+  ) => {
+    const previousTrack = transceiver.sender.track;
+    // don't stop the track if we are re-publishing the same track
+    if (previousTrack && previousTrack !== track) {
+      previousTrack.stop();
+    }
+    await transceiver.sender.replaceTrack(track);
+  };
+
   /**
    * Stops publishing the given track type to the SFU, if it is currently being published.
    * Underlying track will be stopped and removed from the publisher.
@@ -334,9 +293,7 @@ export class Publisher {
    * @param stopTrack specifies whether track should be stopped or just disabled
    */
   unpublishStream = async (trackType: TrackType, stopTrack: boolean) => {
-    const transceiver = this.pc
-      .getTransceivers()
-      .find((t) => t === this.transceiverRegistry[trackType] && t.sender.track);
+    const transceiver = this.transceiverCache.get(trackType);
     if (
       transceiver &&
       transceiver.sender.track &&
@@ -360,7 +317,7 @@ export class Publisher {
    * @param trackType the track type to check.
    */
   isPublishing = (trackType: TrackType): boolean => {
-    const transceiver = this.transceiverRegistry[trackType];
+    const transceiver = this.transceiverCache.get(trackType);
     if (!transceiver || !transceiver.sender) return false;
     const track = transceiver.sender.track;
     return !!track && track.readyState === 'live' && track.enabled;
@@ -406,14 +363,14 @@ export class Publisher {
     });
   };
 
-  updateVideoPublishQuality = async (enabledLayers: VideoLayerSetting[]) => {
+  private changePublishQuality = async (enabledLayers: VideoLayerSetting[]) => {
     this.logger(
       'info',
       'Update publish quality, requested layers by SFU:',
       enabledLayers,
     );
 
-    const videoSender = this.transceiverRegistry[TrackType.VIDEO]?.sender;
+    const videoSender = this.transceiverCache.get(TrackType.VIDEO)?.sender;
     if (!videoSender) {
       this.logger('warn', 'Update publish quality, no video sender found.');
       return;
@@ -428,79 +385,64 @@ export class Publisher {
       return;
     }
 
+    const [codecInUse] = params.codecs;
+    const usesSvcCodec = codecInUse && isSvcCodec(codecInUse.mimeType);
+
     let changed = false;
-    let enabledRids = enabledLayers
-      .filter((ly) => ly.active)
-      .map((ly) => ly.name);
-    params.encodings.forEach((enc) => {
+    for (const encoder of params.encodings) {
+      const layer = usesSvcCodec
+        ? // for SVC, we only have one layer (q) and often rid is omitted
+          enabledLayers[0]
+        : // for non-SVC, we need to find the layer by rid (simulcast)
+          enabledLayers.find((l) => l.name === encoder.rid);
+
       // flip 'active' flag only when necessary
-      const shouldEnable = enabledRids.includes(enc.rid!);
-      if (shouldEnable !== enc.active) {
-        enc.active = shouldEnable;
+      const shouldActivate = !!layer?.active;
+      if (shouldActivate !== encoder.active) {
+        encoder.active = shouldActivate;
         changed = true;
       }
-      if (shouldEnable) {
-        let layer = enabledLayers.find((vls) => vls.name === enc.rid);
-        if (layer !== undefined) {
-          if (
-            layer.scaleResolutionDownBy >= 1 &&
-            layer.scaleResolutionDownBy !== enc.scaleResolutionDownBy
-          ) {
-            this.logger(
-              'debug',
-              '[dynascale]: setting scaleResolutionDownBy from server',
-              'layer',
-              layer.name,
-              'scale-resolution-down-by',
-              layer.scaleResolutionDownBy,
-            );
-            enc.scaleResolutionDownBy = layer.scaleResolutionDownBy;
-            changed = true;
-          }
 
-          if (layer.maxBitrate > 0 && layer.maxBitrate !== enc.maxBitrate) {
-            this.logger(
-              'debug',
-              '[dynascale] setting max-bitrate from the server',
-              'layer',
-              layer.name,
-              'max-bitrate',
-              layer.maxBitrate,
-            );
-            enc.maxBitrate = layer.maxBitrate;
-            changed = true;
-          }
-
-          if (
-            layer.maxFramerate > 0 &&
-            layer.maxFramerate !== enc.maxFramerate
-          ) {
-            this.logger(
-              'debug',
-              '[dynascale]: setting maxFramerate from server',
-              'layer',
-              layer.name,
-              'max-framerate',
-              layer.maxFramerate,
-            );
-            enc.maxFramerate = layer.maxFramerate;
-            changed = true;
-          }
-        }
+      // skip the rest of the settings if the layer is disabled or not found
+      if (!layer) continue;
+
+      const {
+        maxFramerate,
+        scaleResolutionDownBy,
+        maxBitrate,
+        scalabilityMode,
+      } = layer;
+      if (
+        scaleResolutionDownBy >= 1 &&
+        scaleResolutionDownBy !== encoder.scaleResolutionDownBy
+      ) {
+        encoder.scaleResolutionDownBy = scaleResolutionDownBy;
+        changed = true;
       }
-    });
+      if (maxBitrate > 0 && maxBitrate !== encoder.maxBitrate) {
+        encoder.maxBitrate = maxBitrate;
+        changed = true;
+      }
+      if (maxFramerate > 0 && maxFramerate !== encoder.maxFramerate) {
+        encoder.maxFramerate = maxFramerate;
+        changed = true;
+      }
+      // @ts-expect-error scalabilityMode is not in the typedefs yet
+      if (scalabilityMode && scalabilityMode !== encoder.scalabilityMode) {
+        // @ts-expect-error scalabilityMode is not in the typedefs yet
+        encoder.scalabilityMode = scalabilityMode;
+        changed = true;
+      }
+    }
 
     const activeLayers = params.encodings.filter((e) => e.active);
-    if (changed) {
-      await videoSender.setParameters(params);
-      this.logger(
-        'info',
-        `Update publish quality, enabled rids: `,
-        activeLayers,
-      );
-    } else {
-      this.logger('info', `Update publish quality, no change: `, activeLayers);
+    if (!changed) {
+      this.logger('info', `Update publish quality, no change:`, activeLayers);
+      return;
     }
+
+    await videoSender.setParameters(params);
+    this.logger('info', `Update publish quality, enabled rids:`, activeLayers);
   };
 
   /**
@@ -514,7 +456,7 @@ export class Publisher {
 
   private getCodecPreferences = (
     trackType: TrackType,
-    preferredCodec?: string | null,
+    preferredCodec?: string,
   ) => {
     if (trackType === TrackType.VIDEO) {
       return getPreferredCodecs('video', preferredCodec || 'vp8');
@@ -582,23 +524,22 @@ export class Publisher {
    */
   private negotiate = async (options?: RTCOfferOptions) => {
     const offer = await this.pc.createOffer(options);
-    let sdp = this.mungeCodecs(offer.sdp);
-    if (sdp && this.isPublishing(TrackType.SCREEN_SHARE_AUDIO)) {
-      sdp = this.enableHighQualityAudio(sdp);
+    if (offer.sdp) {
+      offer.sdp = toggleDtx(offer.sdp, this.isDtxEnabled);
+      if (this.isPublishing(TrackType.SCREEN_SHARE_AUDIO)) {
+        offer.sdp = this.enableHighQualityAudio(offer.sdp);
+      }
     }
 
-    // set the munged SDP back to the offer
-    offer.sdp = sdp;
-
     const trackInfos = this.getAnnouncedTracks(offer.sdp);
     if (trackInfos.length === 0) {
       throw new Error(`Can't negotiate without announcing any tracks`);
     }
 
-    this.isIceRestarting = options?.iceRestart ?? false;
-    await this.pc.setLocalDescription(offer);
-
     try {
+      this.isIceRestarting = options?.iceRestart ?? false;
+      await this.pc.setLocalDescription(offer);
+
       const { response } = await this.sfuClient.setPublisher({
         sdp: offer.sdp || '',
         tracks: trackInfos,
@@ -623,61 +564,14 @@ export class Publisher {
   };
 
   private enableHighQualityAudio = (sdp: string) => {
-    const transceiver = this.transceiverRegistry[TrackType.SCREEN_SHARE_AUDIO];
+    const transceiver = this.transceiverCache.get(TrackType.SCREEN_SHARE_AUDIO);
     if (!transceiver) return sdp;
 
-    const mid = this.extractMid(transceiver, sdp, TrackType.SCREEN_SHARE_AUDIO);
-    return enableHighQualityAudio(sdp, mid);
-  };
-
-  private mungeCodecs = (sdp?: string) => {
-    if (sdp) {
-      sdp = toggleDtx(sdp, this.isDtxEnabled);
-    }
-    return sdp;
-  };
-
-  private extractMid = (
-    transceiver: RTCRtpTransceiver,
-    sdp: string | undefined,
-    trackType: TrackType,
-  ): string => {
-    if (transceiver.mid) return transceiver.mid;
-
-    if (!sdp) {
-      this.logger('warn', 'No SDP found. Returning empty mid');
-      return '';
-    }
-
-    this.logger(
-      'debug',
-      `No 'mid' found for track. Trying to find it from the Offer SDP`,
+    const transceiverInitIndex = this.transceiverInitOrder.indexOf(
+      TrackType.SCREEN_SHARE_AUDIO,
     );
-
-    const track = transceiver.sender.track!;
-    const parsedSdp = SDP.parse(sdp);
-    const media = parsedSdp.media.find((m) => {
-      return (
-        m.type === track.kind &&
-        // if `msid` is not present, we assume that the track is the first one
-        (m.msid?.includes(track.id) ?? true)
-      );
-    });
-    if (typeof media?.mid === 'undefined') {
-      this.logger(
-        'debug',
-        `No mid found in SDP for track type ${track.kind} and id ${track.id}. Attempting to find it heuristically`,
-      );
-
-      const heuristicMid = this.transceiverInitOrder.indexOf(trackType);
-      if (heuristicMid !== -1) {
-        return String(heuristicMid);
-      }
-
-      this.logger('debug', 'No heuristic mid found. Returning empty mid');
-      return '';
-    }
-    return String(media.mid);
+    const mid = extractMid(transceiver, transceiverInitIndex, sdp);
+    return enableHighQualityAudio(sdp, mid);
   };
 
   /**
@@ -688,35 +582,23 @@ export class Publisher {
    */
   getAnnouncedTracks = (sdp?: string): TrackInfo[] => {
     sdp = sdp || this.pc.localDescription?.sdp;
-
-    const { settings } = this.state;
-    const targetResolution = settings?.video
-      .target_resolution as TargetResolutionResponse;
     return this.pc
       .getTransceivers()
       .filter((t) => t.direction === 'sendonly' && t.sender.track)
       .map<TrackInfo>((transceiver) => {
-        const trackType: TrackType = Number(
-          Object.keys(this.transceiverRegistry).find(
-            (key) =>
-              this.transceiverRegistry[key as any as TrackType] === transceiver,
-          ),
-        );
+        let trackType!: TrackType;
+        this.transceiverCache.forEach((value, key) => {
+          if (value === transceiver) trackType = key;
+        });
         const track = transceiver.sender.track!;
         let optimalLayers: OptimalVideoLayer[];
         const isTrackLive = track.readyState === 'live';
         if (isTrackLive) {
-          const publishOpts = this.publishOptionsPerTrackType.get(trackType);
-          optimalLayers =
-            trackType === TrackType.VIDEO
-              ? findOptimalVideoLayers(track, targetResolution, publishOpts)
-              : trackType === TrackType.SCREEN_SHARE
-                ? findOptimalScreenSharingLayers(track, publishOpts)
-                : [];
-          this.trackLayersCache[trackType] = optimalLayers;
+          optimalLayers = this.computeLayers(trackType, track) || [];
+          this.trackLayersCache.set(trackType, optimalLayers);
         } else {
           // we report the last known optimal layers for ended tracks
-          optimalLayers = this.trackLayersCache[trackType] || [];
+          optimalLayers = this.trackLayersCache.get(trackType) || [];
           this.logger(
             'debug',
             `Track ${TrackType[trackType]} is ended. Announcing last known optimal layers`,
@@ -728,7 +610,7 @@ export class Publisher {
           rid: optimalLayer.rid || '',
           bitrate: optimalLayer.maxBitrate || 0,
           fps: optimalLayer.maxFramerate || 0,
-          quality: this.ridToVideoQuality(optimalLayer.rid || ''),
+          quality: ridToVideoQuality(optimalLayer.rid || ''),
           videoDimension: {
             width: optimalLayer.width,
             height: optimalLayer.height,
@@ -742,13 +624,13 @@ export class Publisher {
 
         const trackSettings = track.getSettings();
         const isStereo = isAudioTrack && trackSettings.channelCount === 2;
-
+        const transceiverInitIndex =
+          this.transceiverInitOrder.indexOf(trackType);
         return {
           trackId: track.id,
           layers: layers,
           trackType,
-          mid: this.extractMid(transceiver, sdp, trackType),
-
+          mid: extractMid(transceiver, transceiverInitIndex, sdp),
           stereo: isStereo,
           dtx: isAudioTrack && this.isDtxEnabled,
           red: isAudioTrack && this.isRedEnabled,
@@ -757,6 +639,26 @@ export class Publisher {
       });
   };
 
+  private computeLayers = (
+    trackType: TrackType,
+    track: MediaStreamTrack,
+    opts?: PublishOptions,
+  ): OptimalVideoLayer[] | undefined => {
+    const { settings } = this.state;
+    const targetResolution = settings?.video
+      .target_resolution as TargetResolutionResponse;
+    const screenShareBitrate =
+      settings?.screensharing.target_resolution?.bitrate;
+
+    const publishOpts = opts || this.publishOptsForTrack.get(trackType);
+    const codecInUse = getOptimalVideoCodec(publishOpts?.preferredCodec);
+    return trackType === TrackType.VIDEO
+      ? findOptimalVideoLayers(track, targetResolution, codecInUse, publishOpts)
+      : trackType === TrackType.SCREEN_SHARE
+        ? findOptimalScreenSharingLayers(track, publishOpts, screenShareBitrate)
+        : undefined;
+  };
+
   private onIceCandidateError = (e: Event) => {
     const errorMessage =
       e instanceof RTCPeerConnectionIceErrorEvent &&
@@ -789,12 +691,4 @@ export class Publisher {
   private onSignalingStateChange = () => {
     this.logger('debug', `Signaling state changed`, this.pc.signalingState);
   };
-
-  private ridToVideoQuality = (rid: string): VideoQuality => {
-    return rid === 'q'
-      ? VideoQuality.LOW_UNSPECIFIED
-      : rid === 'h'
-        ? VideoQuality.MID
-        : VideoQuality.HIGH; // default to HIGH
-  };
 }