@stream-io/video-client 1.8.3 → 1.9.0

package/dist/index.cjs.js

@@ -1733,28 +1733,6 @@ const SignalServer = new runtimeRpc.ServiceType('stream.video.sfu.signal.SignalS
 // @generated by protobuf-ts 2.9.4 with parameter long_type_string,client_generic,server_none,eslint_disable,optimize_code_size
 // @generated from protobuf file "video/sfu/event/events.proto" (package "stream.video.sfu.event", syntax proto3)
 // tslint:disable
-/**
- * @generated from protobuf enum stream.video.sfu.event.VideoLayerSetting.Priority
- */
-var VideoLayerSetting_Priority;
-(function (VideoLayerSetting_Priority) {
-    /**
-     * @generated from protobuf enum value: PRIORITY_HIGH_UNSPECIFIED = 0;
-     */
-    VideoLayerSetting_Priority[VideoLayerSetting_Priority["HIGH_UNSPECIFIED"] = 0] = "HIGH_UNSPECIFIED";
-    /**
-     * @generated from protobuf enum value: PRIORITY_LOW = 1;
-     */
-    VideoLayerSetting_Priority[VideoLayerSetting_Priority["LOW"] = 1] = "LOW";
-    /**
-     * @generated from protobuf enum value: PRIORITY_MEDIUM = 2;
-     */
-    VideoLayerSetting_Priority[VideoLayerSetting_Priority["MEDIUM"] = 2] = "MEDIUM";
-    /**
-     * @generated from protobuf enum value: PRIORITY_VERY_LOW = 3;
-     */
-    VideoLayerSetting_Priority[VideoLayerSetting_Priority["VERY_LOW"] = 3] = "VERY_LOW";
-})(VideoLayerSetting_Priority || (VideoLayerSetting_Priority = {}));
 // @generated message type with reflection information, may provide speed optimized methods
 class SfuEvent$Type extends runtime.MessageType {
     constructor() {
@@ -2426,32 +2404,9 @@ class AudioLevelChanged$Type extends runtime.MessageType {
  */
 const AudioLevelChanged = new AudioLevelChanged$Type();
 // @generated message type with reflection information, may provide speed optimized methods
-class AudioMediaRequest$Type extends runtime.MessageType {
-    constructor() {
-        super('stream.video.sfu.event.AudioMediaRequest', [
-            {
-                no: 1,
-                name: 'channel_count',
-                kind: 'scalar',
-                T: 5 /*ScalarType.INT32*/,
-            },
-        ]);
-    }
-}
-/**
- * @generated MessageType for protobuf message stream.video.sfu.event.AudioMediaRequest
- */
-const AudioMediaRequest = new AudioMediaRequest$Type();
-// @generated message type with reflection information, may provide speed optimized methods
 class AudioSender$Type extends runtime.MessageType {
     constructor() {
         super('stream.video.sfu.event.AudioSender', [
-            {
-                no: 1,
-                name: 'media_request',
-                kind: 'message',
-                T: () => AudioMediaRequest,
-            },
             { no: 2, name: 'codec', kind: 'message', T: () => Codec },
         ]);
     }
@@ -2461,30 +2416,6 @@ class AudioSender$Type extends runtime.MessageType {
  */
 const AudioSender = new AudioSender$Type();
 // @generated message type with reflection information, may provide speed optimized methods
-class VideoMediaRequest$Type extends runtime.MessageType {
-    constructor() {
-        super('stream.video.sfu.event.VideoMediaRequest', [
-            {
-                no: 1,
-                name: 'ideal_height',
-                kind: 'scalar',
-                T: 5 /*ScalarType.INT32*/,
-            },
-            { no: 2, name: 'ideal_width', kind: 'scalar', T: 5 /*ScalarType.INT32*/ },
-            {
-                no: 3,
-                name: 'ideal_frame_rate',
-                kind: 'scalar',
-                T: 5 /*ScalarType.INT32*/,
-            },
-        ]);
-    }
-}
-/**
- * @generated MessageType for protobuf message stream.video.sfu.event.VideoMediaRequest
- */
-const VideoMediaRequest = new VideoMediaRequest$Type();
-// @generated message type with reflection information, may provide speed optimized methods
 class VideoLayerSetting$Type extends runtime.MessageType {
     constructor() {
         super('stream.video.sfu.event.VideoLayerSetting', [
@@ -2497,16 +2428,6 @@ class VideoLayerSetting$Type extends runtime.MessageType {
                 kind: 'scalar',
                 T: 2 /*ScalarType.FLOAT*/,
             },
-            {
-                no: 5,
-                name: 'priority',
-                kind: 'enum',
-                T: () => [
-                    'stream.video.sfu.event.VideoLayerSetting.Priority',
-                    VideoLayerSetting_Priority,
-                    'PRIORITY_',
-                ],
-            },
             { no: 6, name: 'codec', kind: 'message', T: () => Codec },
             {
                 no: 7,
@@ -2514,6 +2435,12 @@ class VideoLayerSetting$Type extends runtime.MessageType {
                 kind: 'scalar',
                 T: 13 /*ScalarType.UINT32*/,
             },
+            {
+                no: 8,
+                name: 'scalability_mode',
+                kind: 'scalar',
+                T: 9 /*ScalarType.STRING*/,
+            },
         ]);
     }
 }
@@ -2525,12 +2452,6 @@ const VideoLayerSetting = new VideoLayerSetting$Type();
 class VideoSender$Type extends runtime.MessageType {
     constructor() {
         super('stream.video.sfu.event.VideoSender', [
-            {
-                no: 1,
-                name: 'media_request',
-                kind: 'message',
-                T: () => VideoMediaRequest,
-            },
             { no: 2, name: 'codec', kind: 'message', T: () => Codec },
             {
                 no: 3,
@@ -2631,7 +2552,6 @@ var events = /*#__PURE__*/Object.freeze({
     __proto__: null,
     AudioLevel: AudioLevel,
     AudioLevelChanged: AudioLevelChanged,
-    AudioMediaRequest: AudioMediaRequest,
     AudioSender: AudioSender,
     CallEnded: CallEnded,
     CallGrantsUpdated: CallGrantsUpdated,
@@ -2662,8 +2582,6 @@ var events = /*#__PURE__*/Object.freeze({
     TrackPublished: TrackPublished,
     TrackUnpublished: TrackUnpublished,
     VideoLayerSetting: VideoLayerSetting,
-    get VideoLayerSetting_Priority () { return VideoLayerSetting_Priority; },
-    VideoMediaRequest: VideoMediaRequest,
     VideoSender: VideoSender
 });
 
@@ -3041,7 +2959,7 @@ const retryable = async (rpc, signal) => {
     return result;
 };
 
-const version = "1.8.3";
+const version = "1.9.0";
 const [major, minor, patch] = version.split('.');
 let sdkInfo = {
     type: SdkType.PLAIN_JAVASCRIPT,
@@ -3107,6 +3025,38 @@ const getClientDetails = () => {
     };
 };
 
+/**
+ * Checks whether the current browser is Safari.
+ */
+const isSafari = () => {
+    if (typeof navigator === 'undefined')
+        return false;
+    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');
+};
+/**
+ * Checks whether the current browser is Firefox.
+ */
+const isFirefox = () => {
+    if (typeof navigator === 'undefined')
+        return false;
+    return navigator.userAgent?.includes('Firefox');
+};
+/**
+ * Checks whether the current browser is Google Chrome.
+ */
+const isChrome = () => {
+    if (typeof navigator === 'undefined')
+        return false;
+    return navigator.userAgent?.includes('Chrome');
+};
+
+var browsers = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    isChrome: isChrome,
+    isFirefox: isFirefox,
+    isSafari: isSafari
+});
+
 /**
  * Returns back a list of sorted codecs, with the preferred codec first.
  *
@@ -3182,18 +3132,58 @@ const getGenericSdp = async (direction) => {
     return sdp;
 };
 /**
- * Returns the optimal codec for RN.
+ * Returns the optimal video codec for the device.
  */
-const getRNOptimalCodec = () => {
-    const osName = getOSInfo()?.name.toLowerCase();
-    // in ipads it was noticed that if vp8 codec is used
-    // then the bytes sent is 0 in the outbound-rtp
-    // so we are forcing h264 codec for ipads
-    if (osName === 'ipados')
+const getOptimalVideoCodec = (preferredCodec) => {
+    if (isReactNative()) {
+        const os = getOSInfo()?.name.toLowerCase();
+        if (os === 'android')
+            return preferredOr(preferredCodec, 'vp8');
+        if (os === 'ios' || os === 'ipados')
+            return 'h264';
+        return preferredOr(preferredCodec, 'h264');
+    }
+    if (isSafari())
         return 'h264';
-    if (osName === 'android')
+    if (isFirefox())
         return 'vp8';
-    return undefined;
+    return preferredOr(preferredCodec, 'vp8');
+};
+/**
+ * Determines if the platform supports the preferred codec.
+ * If not, it returns the fallback codec.
+ */
+const preferredOr = (codec, fallback) => {
+    if (!codec)
+        return fallback;
+    if (!('getCapabilities' in RTCRtpSender))
+        return fallback;
+    const capabilities = RTCRtpSender.getCapabilities('video');
+    if (!capabilities)
+        return fallback;
+    // Safari and Firefox do not have a good support encoding to SVC codecs,
+    // so we disable it for them.
+    if (isSvcCodec(codec) && (isSafari() || isFirefox()))
+        return fallback;
+    const { codecs } = capabilities;
+    const codecMimeType = `video/${codec}`.toLowerCase();
+    return codecs.some((c) => c.mimeType.toLowerCase() === codecMimeType)
+        ? codec
+        : fallback;
+};
+/**
+ * Returns whether the codec is an SVC codec.
+ *
+ * @param codecOrMimeType the codec to check.
+ */
+const isSvcCodec = (codecOrMimeType) => {
+    if (!codecOrMimeType)
+        return false;
+    codecOrMimeType = codecOrMimeType.toLowerCase();
+    return (codecOrMimeType === 'vp9' ||
+        codecOrMimeType === 'av1' ||
+        codecOrMimeType === 'video/vp9' ||
+        codecOrMimeType === 'video/av1');
 };
 
 const sfuEventKinds = {
@@ -3301,6 +3291,57 @@ function getIceCandidate(candidate) {
     }
 }
 
+const bitrateLookupTable = {
+    h264: {
+        2160: 5000000,
+        1440: 3500000,
+        1080: 2750000,
+        720: 1250000,
+        540: 750000,
+        360: 400000,
+        default: 1250000,
+    },
+    vp8: {
+        2160: 5000000,
+        1440: 2750000,
+        1080: 2000000,
+        720: 1250000,
+        540: 600000,
+        360: 350000,
+        default: 1250000,
+    },
+    vp9: {
+        2160: 3000000,
+        1440: 2000000,
+        1080: 1500000,
+        720: 1250000,
+        540: 500000,
+        360: 275000,
+        default: 1250000,
+    },
+    av1: {
+        2160: 2000000,
+        1440: 1550000,
+        1080: 1000000,
+        720: 600000,
+        540: 350000,
+        360: 200000,
+        default: 600000,
+    },
+};
+const getOptimalBitrate = (codec, frameHeight) => {
+    const codecLookup = bitrateLookupTable[codec];
+    if (!codecLookup)
+        throw new Error(`Unknown codec: ${codec}`);
+    let bitrate = codecLookup[frameHeight];
+    if (!bitrate) {
+        const keys = Object.keys(codecLookup).map(Number);
+        const nearest = keys.reduce((a, b) => Math.abs(b - frameHeight) < Math.abs(a - frameHeight) ? b : a);
+        bitrate = codecLookup[nearest];
+    }
+    return bitrate ?? codecLookup.default;
+};
+
 const DEFAULT_BITRATE = 1250000;
 const defaultTargetResolution = {
     bitrate: DEFAULT_BITRATE,
@@ -3312,38 +3353,74 @@ const defaultBitratePerRid = {
     h: 750000,
     f: DEFAULT_BITRATE,
 };
+/**
+ * In SVC, we need to send only one video encoding (layer).
+ * this layer will have the additional spatial and temporal layers
+ * defined via the scalabilityMode property.
+ *
+ * @param layers the layers to process.
+ */
+const toSvcEncodings = (layers) => {
+    // we take the `f` layer, and we rename it to `q`.
+    return layers?.filter((l) => l.rid === 'f').map((l) => ({ ...l, rid: 'q' }));
+};
+/**
+ * Converts the rid to a video quality.
+ */
+const ridToVideoQuality = (rid) => {
+    return rid === 'q'
+        ? VideoQuality.LOW_UNSPECIFIED
+        : rid === 'h'
+            ? VideoQuality.MID
+            : VideoQuality.HIGH; // default to HIGH
+};
 /**
  * Determines the most optimal video layers for simulcasting
  * for the given track.
  *
  * @param videoTrack the video track to find optimal layers for.
  * @param targetResolution the expected target resolution.
+ * @param codecInUse the codec in use.
  * @param publishOptions the publish options for the track.
  */
-const findOptimalVideoLayers = (videoTrack, targetResolution = defaultTargetResolution, publishOptions) => {
+const findOptimalVideoLayers = (videoTrack, targetResolution = defaultTargetResolution, codecInUse, publishOptions) => {
     const optimalVideoLayers = [];
     const settings = videoTrack.getSettings();
-    const { width: w = 0, height: h = 0 } = settings;
-    const { preferredBitrate, bitrateDownscaleFactor = 2 } = publishOptions || {};
-    const maxBitrate = getComputedMaxBitrate(targetResolution, w, h, preferredBitrate);
+    const { width = 0, height = 0 } = settings;
+    const { scalabilityMode, bitrateDownscaleFactor = 2 } = publishOptions || {};
+    const maxBitrate = getComputedMaxBitrate(targetResolution, width, height, codecInUse, publishOptions);
     let downscaleFactor = 1;
     let bitrateFactor = 1;
-    ['f', 'h', 'q'].forEach((rid) => {
-        // Reversing the order [f, h, q] to [q, h, f] as Chrome uses encoding index
-        // when deciding which layer to disable when CPU or bandwidth is constrained.
-        // Encodings should be ordered in increasing spatial resolution order.
-        optimalVideoLayers.unshift({
+    const svcCodec = isSvcCodec(codecInUse);
+    for (const rid of ['f', 'h', 'q']) {
+        const layer = {
             active: true,
             rid,
-            width: Math.round(w / downscaleFactor),
-            height: Math.round(h / downscaleFactor),
-            maxBitrate: Math.round(maxBitrate / bitrateFactor) || defaultBitratePerRid[rid],
-            scaleResolutionDownBy: downscaleFactor,
+            width,
+            height,
+            maxBitrate,
             maxFramerate: 30,
-        });
-        downscaleFactor *= 2;
-        bitrateFactor *= bitrateDownscaleFactor;
-    });
+        };
+        if (svcCodec) {
+            // for SVC codecs, we need to set the scalability mode, and the
+            // codec will handle the rest (layers, temporal layers, etc.)
+            layer.scalabilityMode = scalabilityMode || 'L3T2_KEY';
+        }
+        else {
+            // for non-SVC codecs, we need to downscale proportionally (simulcast)
+            layer.width = Math.round(width / downscaleFactor);
+            layer.height = Math.round(height / downscaleFactor);
+            const bitrate = Math.round(maxBitrate / bitrateFactor);
+            layer.maxBitrate = bitrate || defaultBitratePerRid[rid];
+            layer.scaleResolutionDownBy = downscaleFactor;
+            downscaleFactor *= 2;
+            bitrateFactor *= bitrateDownscaleFactor;
+        }
+        // Reversing the order [f, h, q] to [q, h, f] as Chrome uses encoding index
+        // when deciding which layer to disable when CPU or bandwidth is constrained.
+        // Encodings should be ordered in increasing spatial resolution order.
+        optimalVideoLayers.unshift(layer);
+    }
     // for simplicity, we start with all layers enabled, then this function
     // will clear/reassign the layers that are not needed
     return withSimulcastConstraints(settings, optimalVideoLayers);
@@ -3358,13 +3435,17 @@ const findOptimalVideoLayers = (videoTrack, targetResolution = defaultTargetReso
  * @param targetResolution the target resolution.
  * @param currentWidth the current width of the track.
  * @param currentHeight the current height of the track.
- * @param preferredBitrate the preferred bitrate for the track.
+ * @param codecInUse the codec in use.
+ * @param publishOptions the publish options.
  */
-const getComputedMaxBitrate = (targetResolution, currentWidth, currentHeight, preferredBitrate) => {
+const getComputedMaxBitrate = (targetResolution, currentWidth, currentHeight, codecInUse, publishOptions) => {
     // if the current resolution is lower than the target resolution,
     // we want to proportionally reduce the target bitrate
     const { width: targetWidth, height: targetHeight, bitrate: targetBitrate, } = targetResolution;
-    const bitrate = preferredBitrate || targetBitrate;
+    const { preferredBitrate } = publishOptions || {};
+    const frameHeight = currentWidth > currentHeight ? currentHeight : currentWidth;
+    const bitrate = preferredBitrate ||
+        (codecInUse ? getOptimalBitrate(codecInUse, frameHeight) : targetBitrate);
     if (currentWidth < targetWidth || currentHeight < targetHeight) {
         const currentPixels = currentWidth * currentHeight;
         const targetPixels = targetWidth * targetHeight;
@@ -5034,19 +5115,14 @@ const getOpusFmtp = (sdp) => {
  */
 const toggleDtx = (sdp, enable) => {
     const opusFmtp = getOpusFmtp(sdp);
-    if (opusFmtp) {
-        const matchDtx = /usedtx=(\d)/.exec(opusFmtp.config);
-        const requiredDtxConfig = `usedtx=${enable ? '1' : '0'}`;
-        if (matchDtx) {
-            const newFmtp = opusFmtp.original.replace(/usedtx=(\d)/, requiredDtxConfig);
-            return sdp.replace(opusFmtp.original, newFmtp);
-        }
-        else {
-            const newFmtp = `${opusFmtp.original};${requiredDtxConfig}`;
-            return sdp.replace(opusFmtp.original, newFmtp);
-        }
-    }
-    return sdp;
+    if (!opusFmtp)
+        return sdp;
+    const matchDtx = /usedtx=(\d)/.exec(opusFmtp.config);
+    const requiredDtxConfig = `usedtx=${enable ? '1' : '0'}`;
+    const newFmtp = matchDtx
+        ? opusFmtp.original.replace(/usedtx=(\d)/, requiredDtxConfig)
+        : `${opusFmtp.original};${requiredDtxConfig}`;
+    return sdp.replace(opusFmtp.original, newFmtp);
 };
 /**
  * Enables high-quality audio through SDP munging for the given trackMid.
@@ -5083,6 +5159,31 @@ const enableHighQualityAudio = (sdp, trackMid, maxBitrate = 510000) => {
     }
     return SDP__namespace.write(parsedSdp);
 };
+/**
+ * Extracts the mid from the transceiver or the SDP.
+ *
+ * @param transceiver the transceiver.
+ * @param transceiverInitIndex the index of the transceiver in the transceiver's init array.
+ * @param sdp the SDP.
+ */
+const extractMid = (transceiver, transceiverInitIndex, sdp) => {
+    if (transceiver.mid)
+        return transceiver.mid;
+    if (!sdp)
+        return '';
+    const track = transceiver.sender.track;
+    const parsedSdp = SDP__namespace.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')
+        return String(media.mid);
+    if (transceiverInitIndex === -1)
+        return '';
+    return String(transceiverInitIndex);
+};
 
 /**
  * The `Publisher` is responsible for publishing/unpublishing media streams to/from the SFU
@@ -5092,26 +5193,11 @@ const enableHighQualityAudio = (sdp, trackMid, maxBitrate = 510000) => {
 class Publisher {
     /**
      * 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, sfuClient, dispatcher, state, isDtxEnabled, isRedEnabled, onUnrecoverableError, logTag, }) {
-        this.transceiverRegistry = {
-            [TrackType.AUDIO]: undefined,
-            [TrackType.VIDEO]: undefined,
-            [TrackType.SCREEN_SHARE]: undefined,
-            [TrackType.SCREEN_SHARE_AUDIO]: undefined,
-            [TrackType.UNSPECIFIED]: undefined,
-        };
-        this.publishOptionsPerTrackType = new Map();
+        this.transceiverCache = new Map();
+        this.trackLayersCache = new Map();
+        this.publishOptsForTrack = new Map();
         /**
          * An array maintaining the order how transceivers were added to the peer connection.
          * This is needed because some browsers (Firefox) don't reliably report
@@ -5120,20 +5206,6 @@ class Publisher {
          * @internal
          */
         this.transceiverInitOrder = [];
-        this.trackKindMapping = {
-            [TrackType.AUDIO]: 'audio',
-            [TrackType.VIDEO]: 'video',
-            [TrackType.SCREEN_SHARE]: 'video',
-            [TrackType.SCREEN_SHARE_AUDIO]: 'audio',
-            [TrackType.UNSPECIFIED]: undefined,
-        };
-        this.trackLayersCache = {
-            [TrackType.AUDIO]: undefined,
-            [TrackType.VIDEO]: undefined,
-            [TrackType.SCREEN_SHARE]: undefined,
-            [TrackType.SCREEN_SHARE_AUDIO]: undefined,
-            [TrackType.UNSPECIFIED]: undefined,
-        };
         this.isIceRestarting = false;
         this.createPeerConnection = (connectionConfig) => {
             const pc = new RTCPeerConnection(connectionConfig);
@@ -5151,14 +5223,8 @@ class Publisher {
         this.close = ({ stopTracks }) => {
             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();
             this.pc.close();
@@ -5170,6 +5236,7 @@ class Publisher {
          */
         this.detachEventHandlers = () => {
             this.unsubscribeOnIceRestart();
+            this.unsubscribeChangePublishQuality();
             this.pc.removeEventListener('icecandidate', this.onIceCandidate);
             this.pc.removeEventListener('negotiationneeded', this.onNegotiationNeeded);
             this.pc.removeEventListener('icecandidateerror', this.onIceCandidateError);
@@ -5192,81 +5259,75 @@ class Publisher {
             if (track.readyState === 'ended') {
                 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;
-                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.
+                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));
+                };
                 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);
-                    try {
-                        transceiver.setCodecPreferences(codecPreferences);
-                    }
-                    catch (err) {
-                        this.logger('warn', `Couldn't set codec preferences`, err);
-                    }
-                }
+                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.
+         */
+        this.addTransceiver = (trackType, track, opts, 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.
+         */
+        this.updateTransceiver = async (transceiver, track) => {
+            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.
@@ -5274,9 +5335,7 @@ class Publisher {
          * @param stopTrack specifies whether track should be stopped or just disabled
          */
         this.unpublishStream = async (trackType, stopTrack) => {
-            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 &&
                 (stopTrack
@@ -5297,7 +5356,7 @@ class Publisher {
          * @param trackType the track type to check.
          */
         this.isPublishing = (trackType) => {
-            const transceiver = this.transceiverRegistry[trackType];
+            const transceiver = this.transceiverCache.get(trackType);
             if (!transceiver || !transceiver.sender)
                 return false;
             const track = transceiver.sender.track;
@@ -5337,9 +5396,9 @@ class Publisher {
                 }
             });
         };
-        this.updateVideoPublishQuality = async (enabledLayers) => {
+        this.changePublishQuality = async (enabledLayers) => {
             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;
@@ -5349,48 +5408,52 @@ class Publisher {
                 this.logger('warn', 'Update publish quality, No suitable video encoding quality found');
                 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);
+            const activeLayers = params.encodings.filter((e) => e.active);
+            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);
         };
         /**
          * Returns the result of the `RTCPeerConnection.getStats()` method
@@ -5458,19 +5521,19 @@ class Publisher {
          */
         this.negotiate = async (options) => {
             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,
@@ -5493,44 +5556,13 @@ class Publisher {
             });
         };
         this.enableHighQualityAudio = (sdp) => {
-            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);
+            const transceiverInitIndex = this.transceiverInitOrder.indexOf(TrackType.SCREEN_SHARE_AUDIO);
+            const mid = extractMid(transceiver, transceiverInitIndex, sdp);
             return enableHighQualityAudio(sdp, mid);
         };
-        this.mungeCodecs = (sdp) => {
-            if (sdp) {
-                sdp = toggleDtx(sdp, this.isDtxEnabled);
-            }
-            return sdp;
-        };
-        this.extractMid = (transceiver, sdp, trackType) => {
-            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 track = transceiver.sender.track;
-            const parsedSdp = SDP__namespace.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);
-        };
         /**
          * Returns a list of tracks that are currently being published.
          *
@@ -5539,37 +5571,32 @@ class Publisher {
          */
         this.getAnnouncedTracks = (sdp) => {
             sdp = sdp || this.pc.localDescription?.sdp;
-            const { settings } = this.state;
-            const targetResolution = settings?.video
-                .target_resolution;
             return this.pc
                 .getTransceivers()
                 .filter((t) => t.direction === 'sendonly' && t.sender.track)
                 .map((transceiver) => {
-                const trackType = Number(Object.keys(this.transceiverRegistry).find((key) => this.transceiverRegistry[key] === transceiver));
+                let trackType;
+                this.transceiverCache.forEach((value, key) => {
+                    if (value === transceiver)
+                        trackType = key;
+                });
                 const track = transceiver.sender.track;
                 let optimalLayers;
                 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`, optimalLayers);
                 }
                 const layers = optimalLayers.map((optimalLayer) => ({
                     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,
@@ -5581,11 +5608,12 @@ class Publisher {
                 ].includes(trackType);
                 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,
@@ -5593,6 +5621,19 @@ class Publisher {
                 };
             });
         };
+        this.computeLayers = (trackType, track, opts) => {
+            const { settings } = this.state;
+            const targetResolution = settings?.video
+                .target_resolution;
+            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;
+        };
         this.onIceCandidateError = (e) => {
             const errorMessage = e instanceof RTCPeerConnectionIceErrorEvent &&
                 `${e.errorCode}: ${e.errorText}`;
@@ -5619,13 +5660,6 @@ class Publisher {
         this.onSignalingStateChange = () => {
             this.logger('debug', `Signaling state changed`, this.pc.signalingState);
         };
-        this.ridToVideoQuality = (rid) => {
-            return rid === 'q'
-                ? VideoQuality.LOW_UNSPECIFIED
-                : rid === 'h'
-                    ? VideoQuality.MID
-                    : VideoQuality.HIGH; // default to HIGH
-        };
         this.logger = getLogger(['Publisher', logTag]);
         this.pc = this.createPeerConnection(connectionConfig);
         this.sfuClient = sfuClient;
@@ -5641,6 +5675,17 @@ 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);
+            });
+        });
     }
 }
 
@@ -6368,18 +6413,6 @@ const watchCallGrantsUpdated = (state) => {
     };
 };
 
-/**
- * An event responder which handles the `changePublishQuality` event.
- */
-const watchChangePublishQuality = (dispatcher, call) => {
-    return dispatcher.on('changePublishQuality', (e) => {
-        const { videoSenders } = e;
-        videoSenders.forEach((videoSender) => {
-            const { layers } = videoSender;
-            call.updatePublishQuality(layers.filter((l) => l.active));
-        });
-    });
-};
 const watchConnectionQualityChanged = (dispatcher, state) => {
     return dispatcher.on('connectionQualityChanged', (e) => {
         const { connectionQualityUpdates } = e;
@@ -6648,7 +6681,6 @@ const registerEventHandlers = (call, dispatcher) => {
         watchSfuCallEnded(call),
         watchLiveEnded(dispatcher, call),
         watchSfuErrorReports(dispatcher),
-        watchChangePublishQuality(dispatcher, call),
         watchConnectionQualityChanged(dispatcher, state),
         watchParticipantCountChanged(dispatcher, state),
         call.on('participantJoined', watchParticipantJoined(state)),
@@ -7083,38 +7115,6 @@ class ViewportTracker {
     }
 }
 
-/**
- * Checks whether the current browser is Safari.
- */
-const isSafari = () => {
-    if (typeof navigator === 'undefined')
-        return false;
-    return /^((?!chrome|android).)*safari/i.test(navigator.userAgent || '');
-};
-/**
- * Checks whether the current browser is Firefox.
- */
-const isFirefox = () => {
-    if (typeof navigator === 'undefined')
-        return false;
-    return navigator.userAgent?.includes('Firefox');
-};
-/**
- * Checks whether the current browser is Google Chrome.
- */
-const isChrome = () => {
-    if (typeof navigator === 'undefined')
-        return false;
-    return navigator.userAgent?.includes('Chrome');
-};
-
-var browsers = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    isChrome: isChrome,
-    isFirefox: isFirefox,
-    isSafari: isSafari
-});
-
 const DEFAULT_VIEWPORT_VISIBILITY_STATE = {
     videoTrack: exports.VisibilityState.UNKNOWN,
     screenShareTrack: exports.VisibilityState.UNKNOWN,
@@ -8536,6 +8536,14 @@ class CameraManagerState extends InputMediaDeviceManagerState {
     }
 }
 
+/**
+ * Checks if the current platform is a mobile device.
+ *
+ * See:
+ * https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent
+ */
+const isMobile = () => /Mobi/i.test(navigator.userAgent);
+
 class CameraManager extends InputMediaDeviceManager {
     /**
      * Constructs a new CameraManager.
@@ -8555,10 +8563,15 @@ class CameraManager extends InputMediaDeviceManager {
      * @param direction the direction of the camera to select.
      */
     async selectDirection(direction) {
-        this.state.setDirection(direction);
-        // Providing both device id and direction doesn't work, so we deselect the device
-        this.state.setDevice(undefined);
-        await this.applySettingsToStream();
+        if (isMobile()) {
+            this.state.setDirection(direction);
+            // Providing both device id and direction doesn't work, so we deselect the device
+            this.state.setDevice(undefined);
+            await this.applySettingsToStream();
+        }
+        else {
+            this.logger('warn', 'Camera direction ignored for desktop devices');
+        }
     }
     /**
      * Flips the camera direction: if it's front it will change to back, if it's back, it will change to front.
@@ -8585,10 +8598,11 @@ class CameraManager extends InputMediaDeviceManager {
                 this.logger('warn', 'could not apply target resolution', error);
             }
         }
-        if (this.enabled) {
-            const { width, height } = this.state
-                .mediaStream.getVideoTracks()[0]
-                ?.getSettings();
+        if (this.enabled && this.state.mediaStream) {
+            const [videoTrack] = this.state.mediaStream.getVideoTracks();
+            if (!videoTrack)
+                return;
+            const { width, height } = videoTrack.getSettings();
             if (width !== this.targetResolution.width ||
                 height !== this.targetResolution.height) {
                 await this.applySettingsToStream();
@@ -8600,36 +8614,11 @@ class CameraManager extends InputMediaDeviceManager {
      * Sets the preferred codec for encoding the video.
      *
      * @internal internal use only, not part of the public API.
+     * @deprecated use {@link call.updatePublishOptions} instead.
      * @param codec the codec to use for encoding the video.
      */
     setPreferredCodec(codec) {
-        this.updatePublishOptions({ preferredCodec: codec });
-    }
-    /**
-     * Updates the preferred publish options for the video stream.
-     *
-     * @internal
-     * @param options the options to use.
-     */
-    updatePublishOptions(options) {
-        this.publishOptions = { ...this.publishOptions, ...options };
-    }
-    /**
-     * Returns the capture resolution of the camera.
-     */
-    getCaptureResolution() {
-        const { mediaStream } = this.state;
-        if (!mediaStream)
-            return;
-        const [videoTrack] = mediaStream.getVideoTracks();
-        if (!videoTrack)
-            return;
-        const settings = videoTrack.getSettings();
-        return {
-            width: settings.width,
-            height: settings.height,
-            frameRate: settings.frameRate,
-        };
+        this.call.updatePublishOptions({ preferredCodec: codec });
     }
     getDevices() {
         return getVideoDevices();
@@ -8639,14 +8628,14 @@ class CameraManager extends InputMediaDeviceManager {
         constraints.height = this.targetResolution.height;
         // We can't set both device id and facing mode
         // Device id has higher priority
-        if (!constraints.deviceId && this.state.direction) {
+        if (!constraints.deviceId && this.state.direction && isMobile()) {
             constraints.facingMode =
                 this.state.direction === 'front' ? 'user' : 'environment';
         }
         return getVideoStream(constraints);
     }
     publishStream(stream) {
-        return this.call.publishVideoStream(stream, this.publishOptions);
+        return this.call.publishVideoStream(stream);
     }
     stopPublishStream(stopTracks) {
         return this.call.stopPublish(TrackType.VIDEO, stopTracks);
@@ -9136,9 +9125,7 @@ class ScreenShareManager extends InputMediaDeviceManager {
         return getScreenShareStream(constraints);
     }
     publishStream(stream) {
-        return this.call.publishScreenShareStream(stream, {
-            screenShareSettings: this.state.settings,
-        });
+        return this.call.publishScreenShareStream(stream);
     }
     async stopPublishStream(stopTracks) {
         await this.call.stopPublish(TrackType.SCREEN_SHARE, stopTracks);
@@ -10050,16 +10037,13 @@ class Call {
                         break;
                     case TrackType.VIDEO:
                         const videoStream = this.camera.state.mediaStream;
-                        if (videoStream) {
-                            await this.publishVideoStream(videoStream, this.camera.publishOptions);
-                        }
+                        if (videoStream)
+                            await this.publishVideoStream(videoStream);
                         break;
                     case TrackType.SCREEN_SHARE:
                         const screenShareStream = this.screenShare.state.mediaStream;
                         if (screenShareStream) {
-                            await this.publishScreenShareStream(screenShareStream, {
-                                screenShareSettings: this.screenShare.getSettings(),
-                            });
+                            await this.publishScreenShareStream(screenShareStream);
                         }
                         break;
                     // screen share audio can't exist without a screen share, so we handle it there
@@ -10090,9 +10074,8 @@ class Call {
          * The previous video stream will be stopped.
          *
          * @param videoStream the video stream to publish.
-         * @param opts the options to use when publishing the stream.
          */
-        this.publishVideoStream = async (videoStream, opts = {}) => {
+        this.publishVideoStream = async (videoStream) => {
             if (!this.sfuClient)
                 throw new Error(`Call not joined yet.`);
             // joining is in progress, and we should wait until the client is ready
@@ -10108,7 +10091,7 @@ class Call {
             if (!this.trackPublishOrder.includes(TrackType.VIDEO)) {
                 this.trackPublishOrder.push(TrackType.VIDEO);
             }
-            await this.publisher.publishStream(videoStream, videoTrack, TrackType.VIDEO, opts);
+            await this.publisher.publishStream(videoStream, videoTrack, TrackType.VIDEO, this.publishOptions);
         };
         /**
          * Starts publishing the given audio stream to the call.
@@ -10144,9 +10127,8 @@ class Call {
          * The previous screen-share stream will be stopped.
          *
          * @param screenShareStream the screen-share stream to publish.
-         * @param opts the options to use when publishing the stream.
          */
-        this.publishScreenShareStream = async (screenShareStream, opts = {}) => {
+        this.publishScreenShareStream = async (screenShareStream) => {
             if (!this.sfuClient)
                 throw new Error(`Call not joined yet.`);
             // joining is in progress, and we should wait until the client is ready
@@ -10163,6 +10145,9 @@ class Call {
             if (!this.trackPublishOrder.includes(TrackType.SCREEN_SHARE)) {
                 this.trackPublishOrder.push(TrackType.SCREEN_SHARE);
             }
+            const opts = {
+                screenShareSettings: this.screenShare.getSettings(),
+            };
             await this.publisher.publishStream(screenShareStream, screenShareTrack, TrackType.SCREEN_SHARE, opts);
             const [screenShareAudioTrack] = screenShareStream.getAudioTracks();
             if (screenShareAudioTrack) {
@@ -10239,15 +10224,6 @@ class Call {
         this.setSortParticipantsBy = (criteria) => {
             return this.state.setSortParticipantsBy(criteria);
         };
-        /**
-         * Updates the list of video layers to publish.
-         *
-         * @internal
-         * @param enabledLayers the list of layers to enable.
-         */
-        this.updatePublishQuality = async (enabledLayers) => {
-            return this.publisher?.updateVideoPublishQuality(enabledLayers);
-        };
         /**
          * Sends a reaction to the other call participants.
          *
@@ -10662,7 +10638,7 @@ class Call {
                 if (this.camera.enabled &&
                     this.camera.state.mediaStream &&
                     !this.publisher?.isPublishing(TrackType.VIDEO)) {
-                    await this.publishVideoStream(this.camera.state.mediaStream, this.camera.publishOptions);
+                    await this.publishVideoStream(this.camera.state.mediaStream);
                 }
                 // Start camera if backend config specifies, and there is no local setting
                 if (this.camera.state.status === undefined &&
@@ -10951,6 +10927,15 @@ class Call {
     get isCreatedByMe() {
         return this.state.createdBy?.id === this.currentUserId;
     }
+    /**
+     * Updates the preferred publishing options
+     *
+     * @internal
+     * @param options the options to use.
+     */
+    updatePublishOptions(options) {
+        this.publishOptions = { ...this.publishOptions, ...options };
+    }
 }
 
 class InsightMetrics {
@@ -12488,7 +12473,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "1.8.3";
+            const version = "1.9.0";
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };