@stream-io/video-client 0.3.28 → 0.3.30

package/dist/src/Call.d.ts

@@ -2,12 +2,12 @@ import { Publisher, SfuEventKinds, SfuEventListener, Subscriber } from './rtc';
 import { TrackType } from './gen/video/sfu/models/models';
 import { CallState } from './store';
 import { AcceptCallResponse, BlockUserResponse, EndCallResponse, GetCallResponse, GetOrCreateCallRequest, GetOrCreateCallResponse, GoLiveRequest, GoLiveResponse, ListRecordingsResponse, MuteUsersResponse, PinRequest, PinResponse, QueryMembersRequest, QueryMembersResponse, RejectCallResponse, RequestPermissionRequest, RequestPermissionResponse, SendEventResponse, SendReactionRequest, SendReactionResponse, StartHLSBroadcastingResponse, StartRecordingResponse, StopHLSBroadcastingResponse, StopLiveResponse, StopRecordingResponse, UnblockUserResponse, UnpinRequest, UnpinResponse, UpdateCallMembersRequest, UpdateCallMembersResponse, UpdateCallRequest, UpdateCallResponse, UpdateUserPermissionsRequest, UpdateUserPermissionsResponse } from './gen/coordinator';
-import { CallConstructor, CallLeaveOptions, DebounceType, JoinCallData, PublishOptions, SubscriptionChanges, VideoTrackType } from './types';
+import { AudioTrackType, CallConstructor, CallLeaveOptions, DebounceType, JoinCallData, PublishOptions, SubscriptionChanges, TrackMuteType, VideoTrackType } from './types';
 import { DynascaleManager } from './helpers/DynascaleManager';
 import { PermissionsContext } from './permissions';
 import { StreamClient } from './coordinator/connection/client';
 import { CallEventHandler, CallEventTypes, EventTypes, Logger } from './coordinator/connection/types';
-import { CameraManager, MicrophoneManager, SpeakerManager } from './devices';
+import { CameraManager, MicrophoneManager, ScreenShareManager, SpeakerManager } from './devices';
 /**
  * An object representation of a `Call`.
  */
@@ -45,6 +45,10 @@ export declare class Call {
      * Device manager for the speaker.
      */
     readonly speaker: SpeakerManager;
+    /**
+     * Device manager for the screen.
+     */
+    readonly screenShare: ScreenShareManager;
     /**
      * The DynascaleManager instance.
      */
@@ -198,7 +202,6 @@ export declare class Call {
      * Consecutive calls to this method will replace the audio stream that is currently being published.
      * The previous audio stream will be stopped.
      *
-     *
      * @param audioStream the audio stream to publish.
      */
     publishAudioStream: (audioStream: MediaStream) => Promise<void>;
@@ -208,10 +211,10 @@ export declare class Call {
      * Consecutive calls to this method will replace the previous screen-share stream.
      * 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.
      */
-    publishScreenShareStream: (screenShareStream: MediaStream) => Promise<void>;
+    publishScreenShareStream: (screenShareStream: MediaStream, opts?: PublishOptions) => Promise<void>;
     /**
      * Stops publishing the given track type to the call, if it is currently being published.
      * Underlying track will be stopped and removed from the publisher.
@@ -322,26 +325,26 @@ export declare class Call {
      *
      * @param type the type of the mute operation.
      */
-    muteSelf: (type: 'audio' | 'video' | 'screenshare') => Promise<MuteUsersResponse> | undefined;
+    muteSelf: (type: TrackMuteType) => Promise<MuteUsersResponse> | undefined;
     /**
      * Mutes all the other participants.
      *
      * @param type the type of the mute operation.
      */
-    muteOthers: (type: 'audio' | 'video' | 'screenshare') => Promise<MuteUsersResponse> | undefined;
+    muteOthers: (type: TrackMuteType) => Promise<MuteUsersResponse> | undefined;
     /**
      * Mutes the user with the given `userId`.
      *
      * @param userId the id of the user to mute.
      * @param type the type of the mute operation.
      */
-    muteUser: (userId: string | string[], type: 'audio' | 'video' | 'screenshare') => Promise<MuteUsersResponse>;
+    muteUser: (userId: string | string[], type: TrackMuteType) => Promise<MuteUsersResponse>;
     /**
      * Will mute all users in the call.
      *
      * @param type the type of the mute operation.
      */
-    muteAllUsers: (type: 'audio' | 'video' | 'screenshare') => Promise<MuteUsersResponse>;
+    muteAllUsers: (type: TrackMuteType) => Promise<MuteUsersResponse>;
     /**
      * Starts recording the call
      */
@@ -521,8 +524,9 @@ export declare class Call {
      *
      * @param audioElement the audio element to bind to.
      * @param sessionId the session id.
+     * @param trackType the kind of audio.
      */
-    bindAudioElement: (audioElement: HTMLAudioElement, sessionId: string) => (() => void) | undefined;
+    bindAudioElement: (audioElement: HTMLAudioElement, sessionId: string, trackType?: AudioTrackType) => (() => void) | undefined;
     /**
      * Binds a DOM <img> element to this call's thumbnail (if enabled in settings).
      *

package/dist/src/devices/CameraManager.d.ts

@@ -28,5 +28,4 @@ export declare class CameraManager extends InputMediaDeviceManager<CameraManager
     protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
     protected publishStream(stream: MediaStream): Promise<void>;
     protected stopPublishStream(stopTracks: boolean): Promise<void>;
-    protected getTrack(): MediaStreamTrack | undefined;
 }

package/dist/src/devices/InputMediaDeviceManager.d.ts

@@ -3,7 +3,7 @@ import { Call } from '../Call';
 import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
 import { Logger } from '../coordinator/connection/types';
 import { TrackType } from '../gen/video/sfu/models/models';
-export declare abstract class InputMediaDeviceManager<T extends InputMediaDeviceManagerState> {
+export declare abstract class InputMediaDeviceManager<T extends InputMediaDeviceManagerState<C>, C = MediaTrackConstraints> {
     protected readonly call: Call;
     readonly state: T;
     protected readonly trackType: TrackType;
@@ -16,7 +16,7 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
      */
     disablePromise?: Promise<void>;
     logger: Logger;
-    constructor(call: Call, state: T, trackType: TrackType);
+    protected constructor(call: Call, state: T, trackType: TrackType);
     /**
      * Lists the available audio/video devices
      *
@@ -26,25 +26,28 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
      */
     listDevices(): Observable<MediaDeviceInfo[]>;
     /**
-     * Starts camera/microphone
+     * Starts stream.
      */
     enable(): Promise<void>;
     /**
-     * Stops camera/microphone
-     *
-     * @returns
+     * Stops the stream.
      */
     disable(): Promise<void>;
     /**
-     * If status was previously enabled, it will reenable the device.
+     * If status was previously enabled, it will re-enable the device.
      */
     resume(): Promise<void>;
     /**
-     * If current device statis is disabled, it will enable the device, else it will disable it.
-     *
-     * @returns
+     * If the current device status is disabled, it will enable the device,
+     * else it will disable it.
      */
     toggle(): Promise<void>;
+    /**
+     * Will set the default constraints for the device.
+     *
+     * @param constraints the constraints to set.
+     */
+    setDefaultConstraints(constraints: C): Promise<void>;
     /**
      * Select device
      *
@@ -55,14 +58,14 @@ export declare abstract class InputMediaDeviceManager<T extends InputMediaDevice
     select(deviceId: string | undefined): Promise<void>;
     protected applySettingsToStream(): Promise<void>;
     protected abstract getDevices(): Observable<MediaDeviceInfo[]>;
-    protected abstract getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
+    protected abstract getStream(constraints: C): Promise<MediaStream>;
     protected abstract publishStream(stream: MediaStream): Promise<void>;
     protected abstract stopPublishStream(stopTracks: boolean): Promise<void>;
-    protected abstract getTrack(): undefined | MediaStreamTrack;
+    protected getTracks(): MediaStreamTrack[];
     protected muteStream(stopTracks?: boolean): Promise<void>;
-    private muteTrack;
-    private unmuteTrack;
-    private stopTrack;
+    private muteTracks;
+    private unmuteTracks;
+    private stopTracks;
     private muteLocalStream;
     protected unmuteStream(): Promise<void>;
 }

package/dist/src/devices/InputMediaDeviceManagerState.d.ts

@@ -1,11 +1,12 @@
-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject } from 'rxjs';
 import { RxUtils } from '../store';
 export type InputDeviceStatus = 'enabled' | 'disabled' | undefined;
-export declare abstract class InputMediaDeviceManagerState {
+export declare abstract class InputMediaDeviceManagerState<C = MediaTrackConstraints> {
     readonly disableMode: 'stop-tracks' | 'disable-tracks';
     protected statusSubject: BehaviorSubject<InputDeviceStatus>;
     protected mediaStreamSubject: BehaviorSubject<MediaStream | undefined>;
     protected selectedDeviceSubject: BehaviorSubject<string | undefined>;
+    protected defaultConstraintsSubject: BehaviorSubject<C | undefined>;
     /**
      * @internal
      */
@@ -14,15 +15,19 @@ export declare abstract class InputMediaDeviceManagerState {
      * An Observable that emits the current media stream, or `undefined` if the device is currently disabled.
      *
      */
-    mediaStream$: Observable<MediaStream | undefined>;
+    mediaStream$: import("rxjs").Observable<MediaStream | undefined>;
     /**
      * An Observable that emits the currently selected device
      */
-    selectedDevice$: Observable<string | undefined>;
+    selectedDevice$: import("rxjs").Observable<string | undefined>;
     /**
      * An Observable that emits the device status
      */
-    status$: Observable<InputDeviceStatus>;
+    status$: import("rxjs").Observable<InputDeviceStatus>;
+    /**
+     * The default constraints for the device.
+     */
+    defaultConstraints$: import("rxjs").Observable<C | undefined>;
     constructor(disableMode?: 'stop-tracks' | 'disable-tracks');
     /**
      * The device status
@@ -42,7 +47,7 @@ export declare abstract class InputMediaDeviceManagerState {
      *
      * @param observable$ the observable to get the value from.
      */
-    getCurrentValue: <T>(observable$: Observable<T>) => T;
+    getCurrentValue: <T>(observable$: import("rxjs").Observable<T>) => T;
     /**
      * @internal
      * @param status
@@ -58,6 +63,17 @@ export declare abstract class InputMediaDeviceManagerState {
      * @param deviceId the device id to set.
      */
     setDevice(deviceId: string | undefined): void;
+    /**
+     * Gets the default constraints for the device.
+     */
+    get defaultConstraints(): C | undefined;
+    /**
+     * Sets the default constraints for the device.
+     *
+     * @internal
+     * @param constraints the constraints to set.
+     */
+    setDefaultConstraints(constraints: C | undefined): void;
     /**
      * Updates the value of the provided Subject.
      * An `update` can either be a new value or a function which takes

package/dist/src/devices/MicrophoneManager.d.ts

@@ -9,7 +9,6 @@ export declare class MicrophoneManager extends InputMediaDeviceManager<Microphon
     protected getStream(constraints: MediaTrackConstraints): Promise<MediaStream>;
     protected publishStream(stream: MediaStream): Promise<void>;
     protected stopPublishStream(stopTracks: boolean): Promise<void>;
-    protected getTrack(): MediaStreamTrack | undefined;
     private startSpeakingWhileMutedDetection;
     private stopSpeakingWhileMutedDetection;
 }

package/dist/src/devices/ScreenShareManager.d.ts

@@ -0,0 +1,39 @@
+import { Observable } from 'rxjs';
+import { InputMediaDeviceManager } from './InputMediaDeviceManager';
+import { ScreenShareState } from './ScreenShareState';
+import { Call } from '../Call';
+import { ScreenShareSettings } from '../types';
+export declare class ScreenShareManager extends InputMediaDeviceManager<ScreenShareState, DisplayMediaStreamOptions> {
+    constructor(call: Call);
+    /**
+     * Will enable screen share audio options on supported platforms.
+     *
+     * Note: for ongoing screen share, audio won't be enabled until you
+     * re-publish the screen share stream.
+     */
+    enableScreenShareAudio(): void;
+    /**
+     * Will disable screen share audio options on supported platforms.
+     */
+    disableScreenShareAudio(): Promise<void>;
+    /**
+     * Returns the current screen share settings.
+     */
+    getSettings(): ScreenShareSettings | undefined;
+    /**
+     * Sets the current screen share settings.
+     *
+     * @param settings the settings to set.
+     */
+    setSettings(settings: ScreenShareSettings | undefined): void;
+    protected getDevices(): Observable<MediaDeviceInfo[]>;
+    protected getStream(constraints: DisplayMediaStreamOptions): Promise<MediaStream>;
+    protected publishStream(stream: MediaStream): Promise<void>;
+    protected stopPublishStream(stopTracks: boolean): Promise<void>;
+    /**
+     * Overrides the default `select` method to throw an error.
+     *
+     * @param deviceId ignored.
+     */
+    select(deviceId: string | undefined): Promise<void>;
+}

package/dist/src/devices/ScreenShareState.d.ts

@@ -0,0 +1,36 @@
+import { InputMediaDeviceManagerState } from './InputMediaDeviceManagerState';
+import { ScreenShareSettings } from '../types';
+export declare class ScreenShareState extends InputMediaDeviceManagerState<DisplayMediaStreamOptions> {
+    private audioEnabledSubject;
+    private settingsSubject;
+    /**
+     * An Observable that emits the current screen share audio status.
+     */
+    audioEnabled$: import("rxjs").Observable<boolean>;
+    /**
+     * An Observable that emits the current screen share settings.
+     */
+    settings$: import("rxjs").Observable<ScreenShareSettings | undefined>;
+    /**
+     * @internal
+     */
+    protected getDeviceIdFromStream: (stream: MediaStream) => string | undefined;
+    /**
+     * The current screen share audio status.
+     */
+    get audioEnabled(): boolean;
+    /**
+     * Set the current screen share audio status.
+     */
+    setAudioEnabled(isEnabled: boolean): void;
+    /**
+     * The current screen share settings.
+     */
+    get settings(): ScreenShareSettings | undefined;
+    /**
+     * Set the current screen share settings.
+     *
+     * @param settings the screen share settings to set.
+     */
+    setSettings(settings: ScreenShareSettings | undefined): void;
+}

package/dist/src/devices/__tests__/ScreenShareManager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/devices/__tests__/mocks.d.ts

@@ -1,11 +1,7 @@
-import { CallState } from '../../store';
+import { Call } from '../../Call';
 export declare const mockVideoDevices: MediaDeviceInfo[];
 export declare const mockAudioDevices: MediaDeviceInfo[];
-export declare const mockCall: () => {
-    state: CallState;
-    publishVideoStream: import("@vitest/spy").Mock<any, any>;
-    publishAudioStream: import("@vitest/spy").Mock<any, any>;
-    stopPublish: import("@vitest/spy").Mock<any, any>;
-};
+export declare const mockCall: () => Partial<Call>;
 export declare const mockAudioStream: () => MediaStream;
 export declare const mockVideoStream: () => MediaStream;
+export declare const mockScreenShareStream: (includeAudio?: boolean) => MediaStream;

package/dist/src/devices/index.d.ts

@@ -5,5 +5,7 @@ export * from './CameraManager';
 export * from './CameraManagerState';
 export * from './MicrophoneManager';
 export * from './MicrophoneManagerState';
+export * from './ScreenShareManager';
+export * from './ScreenShareState';
 export * from './SpeakerManager';
 export * from './SpeakerState';

package/dist/src/helpers/DynascaleManager.d.ts

@@ -1,5 +1,5 @@
 import { Call } from '../Call';
-import { VideoTrackType } from '../types';
+import { AudioTrackType, VideoTrackType } from '../types';
 import { ViewportTracker } from './ViewportTracker';
 /**
  * A manager class that handles dynascale related tasks like:
@@ -64,7 +64,8 @@ export declare class DynascaleManager {
      *
      * @param audioElement the audio element to bind to.
      * @param sessionId the session id.
+     * @param trackType the kind of audio.
      * @returns a cleanup function that will unbind the audio element.
      */
-    bindAudioElement: (audioElement: HTMLAudioElement, sessionId: string) => (() => void) | undefined;
+    bindAudioElement: (audioElement: HTMLAudioElement, sessionId: string, trackType: AudioTrackType) => (() => void) | undefined;
 }

package/dist/src/helpers/__tests__/hq-audio-sdp.d.ts

@@ -0,0 +1 @@
+export declare const initialSdp: string;

package/dist/src/helpers/sdp-munging.d.ts

@@ -23,3 +23,11 @@ export declare const removeCodec: (sdp: string, mediaType: 'video' | 'audio', co
  * Returns an SDP with DTX enabled or disabled.
  */
 export declare const toggleDtx: (sdp: string, enable: boolean) => string;
+/**
+ * Enables high-quality audio through SDP munging for the given trackMid.
+ *
+ * @param sdp the SDP to munge.
+ * @param trackMid the trackMid.
+ * @param maxBitrate the max bitrate to set.
+ */
+export declare const enableHighQualityAudio: (sdp: string, trackMid: string, maxBitrate?: number) => string;

package/dist/src/rtc/Publisher.d.ts

@@ -20,6 +20,7 @@ export declare class Publisher {
     private pc;
     private readonly state;
     private readonly transceiverRegistry;
+    private readonly publishOptionsPerTrackType;
     /**
      * An array maintaining the order how transceivers were added to the peer connection.
      * This is needed because some browsers (Firefox) don't reliably report
@@ -63,10 +64,11 @@ export declare class Publisher {
      *
      * Consecutive calls to this method will replace the stream.
      * The previous stream will be stopped.
-     * @param mediaStream
-     * @param track
-     * @param trackType
-     * @param opts
+     *
+     * @param mediaStream the media stream to publish.
+     * @param track the track to publish.
+     * @param trackType the track type to publish.
+     * @param opts the optional publish options to use.
      */
     publishStream: (mediaStream: MediaStream, track: MediaStreamTrack, trackType: TrackType, opts?: PublishOptions) => Promise<void>;
     /**
@@ -123,6 +125,7 @@ export declare class Publisher {
      */
     private negotiate;
     private mungeCodecs;
+    private extractMid;
     getCurrentTrackInfos: (sdp?: string) => TrackInfo[];
     private onIceCandidateError;
     private onIceConnectionStateChange;

package/dist/src/rtc/helpers/tracks.d.ts

@@ -1,5 +1,6 @@
 import { TrackType } from '../../gen/video/sfu/models/models';
 import type { StreamVideoLocalParticipant, StreamVideoParticipant } from '../../types';
+import { TrackMuteType } from '../../types';
 export declare const trackTypeToParticipantStreamKey: (trackType: TrackType) => keyof StreamVideoParticipant;
 export declare const trackTypeToDeviceIdKey: (trackType: TrackType) => keyof StreamVideoLocalParticipant | undefined;
-export declare const muteTypeToTrackType: (muteType: 'audio' | 'video' | 'screenshare') => TrackType;
+export declare const muteTypeToTrackType: (muteType: TrackMuteType) => TrackType;

package/dist/src/rtc/videoLayers.d.ts

@@ -1,3 +1,4 @@
+import { ScreenShareSettings } from '../types';
 import { TargetResolution } from '../gen/coordinator';
 export type OptimalVideoLayer = RTCRtpEncodingParameters & {
     width: number;
@@ -23,4 +24,4 @@ export declare const findOptimalVideoLayers: (videoTrack: MediaStreamTrack, targ
  * @param currentHeight the current height of the track.
  */
 export declare const getComputedMaxBitrate: (targetResolution: TargetResolution, currentWidth: number, currentHeight: number) => number;
-export declare const findOptimalScreenSharingLayers: (videoTrack: MediaStreamTrack) => OptimalVideoLayer[];
+export declare const findOptimalScreenSharingLayers: (videoTrack: MediaStreamTrack, preferences?: ScreenShareSettings) => OptimalVideoLayer[];

package/dist/src/types.d.ts

@@ -32,6 +32,11 @@ export interface StreamVideoParticipant extends Participant {
      * and we are subscribed to it.
      */
     screenShareStream?: MediaStream;
+    /**
+     * The participant's screen audio stream, if they are sharing their audio,
+     * and we are subscribed to it.
+     */
+    screenShareAudioStream?: MediaStream;
     /**
      * The preferred video dimensions for this participant.
      * Set it to `undefined` to unsubscribe from this participant's video.
@@ -83,6 +88,8 @@ export interface StreamVideoLocalParticipant extends StreamVideoParticipant {
     audioOutputDeviceId?: string;
 }
 export type VideoTrackType = 'videoTrack' | 'screenShareTrack';
+export type AudioTrackType = 'audioTrack' | 'screenShareAudioTrack';
+export type TrackMuteType = 'audio' | 'video' | 'screenshare' | 'screenshare_audio';
 /**
  * Represents a participant's pin state.
  */
@@ -120,6 +127,19 @@ export type SubscriptionChanges = {
 };
 export type PublishOptions = {
     preferredCodec?: string | null;
+    screenShareSettings?: ScreenShareSettings;
+};
+export type ScreenShareSettings = {
+    /**
+     * Limits the maximum framerate (in frames per second) of the screen share.
+     * Defaults to 30.
+     */
+    maxFramerate?: number;
+    /**
+     * Limits the maximum bitrate (in bits per second) of the screen share.
+     * Defaults to 3000000 (3Mbps).
+     */
+    maxBitrate?: number;
 };
 export type CallLeaveOptions = {
     /**

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.3.28";
+export declare const version = "0.3.30";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stream-io/video-client",
-  "version": "0.3.28",
+  "version": "0.3.30",
   "packageManager": "yarn@3.2.4",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",

package/src/Call.ts

@@ -68,6 +68,7 @@ import {
 } from './gen/coordinator';
 import { join, reconcileParticipantLocalState } from './rtc/flows/join';
 import {
+  AudioTrackType,
   CallConstructor,
   CallLeaveOptions,
   DebounceType,
@@ -76,6 +77,7 @@ import {
   StreamVideoParticipant,
   StreamVideoParticipantPatches,
   SubscriptionChanges,
+  TrackMuteType,
   VideoTrackType,
   VisibilityState,
 } from './types';
@@ -120,6 +122,7 @@ import {
   CameraDirection,
   CameraManager,
   MicrophoneManager,
+  ScreenShareManager,
   SpeakerManager,
 } from './devices';
 
@@ -168,6 +171,11 @@ export class Call {
    */
   readonly speaker: SpeakerManager;
 
+  /**
+   * Device manager for the screen.
+   */
+  readonly screenShare: ScreenShareManager;
+
   /**
    * The DynascaleManager instance.
    */
@@ -281,6 +289,7 @@ export class Call {
     this.camera = new CameraManager(this);
     this.microphone = new MicrophoneManager(this);
     this.speaker = new SpeakerManager();
+    this.screenShare = new ScreenShareManager(this);
   }
 
   private registerEffects() {
@@ -768,9 +777,21 @@ export class Call {
         const {
           audioStream,
           videoStream,
-          screenShareStream: screenShare,
+          screenShareStream,
+          screenShareAudioStream,
         } = localParticipant;
 
+        let screenShare: MediaStream | undefined;
+        if (screenShareStream || screenShareAudioStream) {
+          screenShare = new MediaStream();
+          screenShareStream?.getVideoTracks().forEach((track) => {
+            screenShare?.addTrack(track);
+          });
+          screenShareAudioStream?.getAudioTracks().forEach((track) => {
+            screenShare?.addTrack(track);
+          });
+        }
+
         // restore previous publishing state
         if (audioStream) await this.publishAudioStream(audioStream);
         if (videoStream) await this.publishVideoStream(videoStream);
@@ -1081,7 +1102,6 @@ export class Call {
    * Consecutive calls to this method will replace the audio stream that is currently being published.
    * The previous audio stream will be stopped.
    *
-   *
    * @param audioStream the audio stream to publish.
    */
   publishAudioStream = async (audioStream: MediaStream) => {
@@ -1112,10 +1132,13 @@ export class Call {
    * Consecutive calls to this method will replace the previous screen-share stream.
    * 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.
    */
-  publishScreenShareStream = async (screenShareStream: MediaStream) => {
+  publishScreenShareStream = async (
+    screenShareStream: MediaStream,
+    opts: PublishOptions = {},
+  ) => {
     // we should wait until we get a JoinResponse from the SFU,
     // otherwise we risk breaking the ICETrickle flow.
     await this.assertCallJoined();
@@ -1140,7 +1163,18 @@ export class Call {
       screenShareStream,
       screenShareTrack,
       TrackType.SCREEN_SHARE,
+      opts,
     );
+
+    const [screenShareAudioTrack] = screenShareStream.getAudioTracks();
+    if (screenShareAudioTrack) {
+      await this.publisher.publishStream(
+        screenShareStream,
+        screenShareAudioTrack,
+        TrackType.SCREEN_SHARE_AUDIO,
+        opts,
+      );
+    }
   };
 
   /**
@@ -1252,6 +1286,13 @@ export class Call {
           dimension: p.screenShareDimension,
         });
       }
+      if (p.publishedTracks.includes(TrackType.SCREEN_SHARE_AUDIO)) {
+        subscriptions.push({
+          userId: p.userId,
+          sessionId: p.sessionId,
+          trackType: TrackType.SCREEN_SHARE_AUDIO,
+        });
+      }
     }
     // schedule update
     this.trackSubscriptionsSubject.next({ type, data: subscriptions });
@@ -1414,7 +1455,7 @@ export class Call {
    *
    * @param type the type of the mute operation.
    */
-  muteSelf = (type: 'audio' | 'video' | 'screenshare') => {
+  muteSelf = (type: TrackMuteType) => {
     const myUserId = this.currentUserId;
     if (myUserId) {
       return this.muteUser(myUserId, type);
@@ -1426,7 +1467,7 @@ export class Call {
    *
    * @param type the type of the mute operation.
    */
-  muteOthers = (type: 'audio' | 'video' | 'screenshare') => {
+  muteOthers = (type: TrackMuteType) => {
     const trackType = muteTypeToTrackType(type);
     if (!trackType) return;
     const userIdsToMute: string[] = [];
@@ -1445,10 +1486,7 @@ export class Call {
    * @param userId the id of the user to mute.
    * @param type the type of the mute operation.
    */
-  muteUser = (
-    userId: string | string[],
-    type: 'audio' | 'video' | 'screenshare',
-  ) => {
+  muteUser = (userId: string | string[], type: TrackMuteType) => {
     return this.streamClient.post<MuteUsersResponse, MuteUsersRequest>(
       `${this.streamClientBasePath}/mute_users`,
       {
@@ -1463,7 +1501,7 @@ export class Call {
    *
    * @param type the type of the mute operation.
    */
-  muteAllUsers = (type: 'audio' | 'video' | 'screenshare') => {
+  muteAllUsers = (type: TrackMuteType) => {
     return this.streamClient.post<MuteUsersResponse, MuteUsersRequest>(
       `${this.streamClientBasePath}/mute_users`,
       {
@@ -1952,11 +1990,17 @@ export class Call {
    *
    * @param audioElement the audio element to bind to.
    * @param sessionId the session id.
+   * @param trackType the kind of audio.
    */
-  bindAudioElement = (audioElement: HTMLAudioElement, sessionId: string) => {
+  bindAudioElement = (
+    audioElement: HTMLAudioElement,
+    sessionId: string,
+    trackType: AudioTrackType = 'audioTrack',
+  ) => {
     const unbind = this.dynascaleManager.bindAudioElement(
       audioElement,
       sessionId,
+      trackType,
     );
 
     if (!unbind) return;