@stream-io/video-client 0.3.11 → 0.3.13

package/dist/index.browser.es.js

@@ -4,7 +4,7 @@ import { ServiceType, stackIntercept } from '@protobuf-ts/runtime-rpc';
 import axios, { AxiosHeaders } from 'axios';
 export { AxiosError } from 'axios';
 import { TwirpFetchTransport } from '@protobuf-ts/twirp-transport';
-import { ReplaySubject, BehaviorSubject, map as map$2, takeWhile, distinctUntilChanged as distinctUntilChanged$1, distinctUntilKeyChanged, Observable, debounceTime, concatMap, from, shareReplay, merge, combineLatest, filter, pairwise, tap, debounce, timer } from 'rxjs';
+import { ReplaySubject, BehaviorSubject, map as map$2, takeWhile, distinctUntilChanged as distinctUntilChanged$1, distinctUntilKeyChanged, combineLatest, Observable, debounceTime, concatMap, from, shareReplay, merge, filter, pairwise, tap, debounce, timer } from 'rxjs';
 import * as SDP from 'sdp-transform';
 import { UAParser } from 'ua-parser-js';
 import WebSocket from 'isomorphic-ws';
@@ -5836,204 +5836,6 @@ const createSignalClient = (options) => {
     return new SignalServerClient(transport);
 };
 
-/**
- * Checks whether we are using React Native
- */
-const isReactNative = () => {
-    var _a;
-    if (typeof navigator === 'undefined')
-        return false;
-    return ((_a = navigator.product) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'reactnative';
-};
-
-const getRtpMap = (line) => {
-    // Example: a=rtpmap:110 opus/48000/2
-    const rtpRegex = /^a=rtpmap:(\d*) ([\w\-.]*)(?:\s*\/(\d*)(?:\s*\/(\S*))?)?/;
-    // The first captured group is the payload type number, the second captured group is the encoding name, the third captured group is the clock rate, and the fourth captured group is any additional parameters.
-    const rtpMatch = rtpRegex.exec(line);
-    if (rtpMatch) {
-        return {
-            original: rtpMatch[0],
-            payload: rtpMatch[1],
-            codec: rtpMatch[2],
-        };
-    }
-};
-const getFmtp = (line) => {
-    // Example: a=fmtp:111 minptime=10; useinbandfec=1
-    const fmtpRegex = /^a=fmtp:(\d*) (.*)/;
-    const fmtpMatch = fmtpRegex.exec(line);
-    // The first captured group is the payload type number, the second captured group is any additional parameters.
-    if (fmtpMatch) {
-        return {
-            original: fmtpMatch[0],
-            payload: fmtpMatch[1],
-            config: fmtpMatch[2],
-        };
-    }
-};
-/**
- * gets the media section for the specified media type.
- * The media section contains the media type, port, codec, and payload type.
- * Example: m=video 9 UDP/TLS/RTP/SAVPF 100 101 96 97 35 36 102 125 127
- */
-const getMedia = (line, mediaType) => {
-    const regex = new RegExp(`(m=${mediaType} \\d+ [\\w/]+) ([\\d\\s]+)`);
-    const match = regex.exec(line);
-    if (match) {
-        return {
-            original: match[0],
-            mediaWithPorts: match[1],
-            codecOrder: match[2],
-        };
-    }
-};
-const getMediaSection = (sdp, mediaType) => {
-    let media;
-    const rtpMap = [];
-    const fmtp = [];
-    let isTheRequiredMediaSection = false;
-    sdp.split(/(\r\n|\r|\n)/).forEach((line) => {
-        const isValidLine = /^([a-z])=(.*)/.test(line);
-        if (!isValidLine)
-            return;
-        /*
-          NOTE: according to https://www.rfc-editor.org/rfc/rfc8866.pdf
-          Each media description starts with an "m=" line and continues to the next media description or the end of the whole session description, whichever comes first
-        */
-        const type = line[0];
-        if (type === 'm') {
-            const _media = getMedia(line, mediaType);
-            isTheRequiredMediaSection = !!_media;
-            if (_media) {
-                media = _media;
-            }
-        }
-        else if (isTheRequiredMediaSection && type === 'a') {
-            const rtpMapLine = getRtpMap(line);
-            const fmtpLine = getFmtp(line);
-            if (rtpMapLine) {
-                rtpMap.push(rtpMapLine);
-            }
-            else if (fmtpLine) {
-                fmtp.push(fmtpLine);
-            }
-        }
-    });
-    if (media) {
-        return {
-            media,
-            rtpMap,
-            fmtp,
-        };
-    }
-};
-/**
- * Returns a string of codec IDs with the preferred codec ID in front of the other codec IDs.
- * It is used to ensure that a preferred codec is used when decoding a media stream.
- * Example: Suppose we want to prefer VP8 which has id 96
- * 1. If codec order is 100 101 96 97 35 36 102 125 127
- * 2. The function returns 96 100 101 97 35 36 102 125 127
- */
-const moveCodecToFront = (codecOrder, preferredCodecId) => {
-    const codecIds = codecOrder.split(' ');
-    const index = codecIds.indexOf(preferredCodecId);
-    if (index > -1) {
-        codecIds.splice(index, 1);
-        codecIds.unshift(preferredCodecId);
-    }
-    return codecIds.join(' ');
-};
-/**
- * Returns a string of codec IDs with the given codec ID removed
- * It is used to ensure that a codec is disabled when processing a media stream.
- * Example: Suppose we want to prefer RED which has id 63
- * 1. If codec order is 111 63 103 104 9 102 0 8 106 105 13 110 112 113 126
- * 2. The function returns 111 103 104 9 102 0 8 106 105 13 110 112 113 126
- */
-const removeCodecFromOrder = (codecOrder, codecIdToRemove) => {
-    const codecIds = codecOrder.split(' ');
-    return codecIds.filter((codecID) => codecID !== codecIdToRemove).join(' ');
-};
-/**
- * Returns an SDP with the preferred codec in front of the other codecs.
- * Example: Suppose we want to prefer VP8
- * 1. find video media specification m=video 9 UDP/TLS/RTP/SAVPF 100 101 96 97 35 36 102 125 127
- * 2. look for specified codec (VP8)  a=rtpmap:96 VP8/90000
- * 3. extract 96 as an identifier of VP8
- * 4. move 96 to the front
- * 5. now media looks like this: m=video 9 UDP/TLS/RTP/SAVPF 96 100 101 97 35 36 102 125 127
- */
-const setPreferredCodec = (sdp, mediaType, preferredCodec) => {
-    const section = getMediaSection(sdp, mediaType);
-    if (!section)
-        return sdp;
-    const rtpMap = section.rtpMap.find((r) => r.codec.toLowerCase() === preferredCodec.toLowerCase());
-    const codecId = rtpMap === null || rtpMap === void 0 ? void 0 : rtpMap.payload;
-    if (!codecId)
-        return sdp;
-    const newCodecOrder = moveCodecToFront(section.media.codecOrder, codecId);
-    return sdp.replace(section.media.original, `${section.media.mediaWithPorts} ${newCodecOrder}`);
-};
-/**
- * Returns an SDP with the specified codec removed.
- * Example: Suppose we want to remove RED
- *  1. find audio media specification m=video 9 UDP/TLS/RTP/SAVPF 100 101 96 97 35 36 102 125 127
- *  2. look for specified codec (RED)  a=rtpmap:127 red/90000
- *  3. extract 127 as an identifier of RED
- *  4. remove 127 from the codec order
- *  5. remove a=rtpmap:127 red/90000
- *  6. remove a=fmtp:127 ...
- */
-const removeCodec = (sdp, mediaType, codecToRemove) => {
-    const section = getMediaSection(sdp, mediaType);
-    const mediaSection = section === null || section === void 0 ? void 0 : section.media;
-    if (!mediaSection) {
-        return sdp;
-    }
-    const rtpMap = section === null || section === void 0 ? void 0 : section.rtpMap.find((r) => r.codec.toLowerCase() === codecToRemove.toLowerCase());
-    const codecId = rtpMap === null || rtpMap === void 0 ? void 0 : rtpMap.payload;
-    if (!codecId) {
-        return sdp;
-    }
-    const newCodecOrder = removeCodecFromOrder(mediaSection.codecOrder, codecId);
-    const fmtp = section === null || section === void 0 ? void 0 : section.fmtp.find((f) => f.payload === codecId);
-    return sdp
-        .replace(mediaSection.original, `${mediaSection.mediaWithPorts} ${newCodecOrder}`)
-        .replace(new RegExp(`${rtpMap.original}[\r\n]+`), '') // remove the corresponding rtpmap line
-        .replace((fmtp === null || fmtp === void 0 ? void 0 : fmtp.original) ? new RegExp(`${fmtp === null || fmtp === void 0 ? void 0 : fmtp.original}[\r\n]+`) : '', ''); // remove the corresponding fmtp line
-};
-/**
- * Gets the fmtp line corresponding to opus
- */
-const getOpusFmtp = (sdp) => {
-    const section = getMediaSection(sdp, 'audio');
-    const rtpMap = section === null || section === void 0 ? void 0 : section.rtpMap.find((r) => r.codec.toLowerCase() === 'opus');
-    const codecId = rtpMap === null || rtpMap === void 0 ? void 0 : rtpMap.payload;
-    if (codecId) {
-        return section === null || section === void 0 ? void 0 : section.fmtp.find((f) => f.payload === codecId);
-    }
-};
-/**
- * Returns an SDP with DTX enabled or disabled.
- */
-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;
-};
-
 // log levels, sorted by verbosity
 const logLevels = Object.freeze({
     trace: 0,
@@ -6125,39 +5927,13 @@ const getPreferredCodecs = (kind, preferredCodec, codecToRemove) => {
     logger === null || logger === void 0 ? void 0 : logger('info', `Preffered codecs: `, result);
     return result;
 };
-const getGenericSdp = (direction, isRedEnabled, preferredVideoCodec) => __awaiter(void 0, void 0, void 0, function* () {
+const getGenericSdp = (direction) => __awaiter(void 0, void 0, void 0, function* () {
     var _a;
     const tempPc = new RTCPeerConnection();
     tempPc.addTransceiver('video', { direction });
-    // if ('setCodecPreferences' in videoTransceiver) {
-    //   const videoCodecPreferences = getPreferredCodecs(
-    //     'audio',
-    //     preferredVideoCodec ?? 'vp8',
-    //   );
-    //   videoTransceiver.setCodecPreferences([...(videoCodecPreferences ?? [])]);
-    // }
     tempPc.addTransceiver('audio', { direction });
-    const preferredAudioCodec = isRedEnabled ? 'red' : 'opus';
-    const audioCodecToRemove = !isRedEnabled ? 'red' : undefined;
-    // if ('setCodecPreferences' in audioTransceiver) {
-    //   const audioCodecPreferences = getPreferredCodecs(
-    //     'audio',
-    //     preferredAudioCodec,
-    //     // audioCodecToRemove,
-    //   );
-    //   audioTransceiver.setCodecPreferences([...(audioCodecPreferences || [])]);
-    // }
     const offer = yield tempPc.createOffer();
     let sdp = (_a = offer.sdp) !== null && _a !== void 0 ? _a : '';
-    if (isReactNative()) {
-        if (preferredVideoCodec) {
-            sdp = setPreferredCodec(sdp, 'video', preferredVideoCodec);
-        }
-        sdp = setPreferredCodec(sdp, 'audio', preferredAudioCodec);
-        if (audioCodecToRemove) {
-            sdp = removeCodec(sdp, 'audio', audioCodecToRemove);
-        }
-    }
     tempPc.getTransceivers().forEach((t) => {
         t.stop();
     });
@@ -6266,6 +6042,16 @@ function getIceCandidate(candidate) {
     }
 }
 
+/**
+ * Checks whether we are using React Native
+ */
+const isReactNative = () => {
+    var _a;
+    if (typeof navigator === 'undefined')
+        return false;
+    return ((_a = navigator.product) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === 'reactnative';
+};
+
 let sdkInfo;
 let osInfo;
 let deviceInfo;
@@ -6462,6 +6248,119 @@ const muteTypeToTrackType = (muteType) => {
     }
 };
 
+const getRtpMap = (line) => {
+    // Example: a=rtpmap:110 opus/48000/2
+    const rtpRegex = /^a=rtpmap:(\d*) ([\w\-.]*)(?:\s*\/(\d*)(?:\s*\/(\S*))?)?/;
+    // The first captured group is the payload type number, the second captured group is the encoding name, the third captured group is the clock rate, and the fourth captured group is any additional parameters.
+    const rtpMatch = rtpRegex.exec(line);
+    if (rtpMatch) {
+        return {
+            original: rtpMatch[0],
+            payload: rtpMatch[1],
+            codec: rtpMatch[2],
+        };
+    }
+};
+const getFmtp = (line) => {
+    // Example: a=fmtp:111 minptime=10; useinbandfec=1
+    const fmtpRegex = /^a=fmtp:(\d*) (.*)/;
+    const fmtpMatch = fmtpRegex.exec(line);
+    // The first captured group is the payload type number, the second captured group is any additional parameters.
+    if (fmtpMatch) {
+        return {
+            original: fmtpMatch[0],
+            payload: fmtpMatch[1],
+            config: fmtpMatch[2],
+        };
+    }
+};
+/**
+ * gets the media section for the specified media type.
+ * The media section contains the media type, port, codec, and payload type.
+ * Example: m=video 9 UDP/TLS/RTP/SAVPF 100 101 96 97 35 36 102 125 127
+ */
+const getMedia = (line, mediaType) => {
+    const regex = new RegExp(`(m=${mediaType} \\d+ [\\w/]+) ([\\d\\s]+)`);
+    const match = regex.exec(line);
+    if (match) {
+        return {
+            original: match[0],
+            mediaWithPorts: match[1],
+            codecOrder: match[2],
+        };
+    }
+};
+const getMediaSection = (sdp, mediaType) => {
+    let media;
+    const rtpMap = [];
+    const fmtp = [];
+    let isTheRequiredMediaSection = false;
+    sdp.split(/(\r\n|\r|\n)/).forEach((line) => {
+        const isValidLine = /^([a-z])=(.*)/.test(line);
+        if (!isValidLine)
+            return;
+        /*
+          NOTE: according to https://www.rfc-editor.org/rfc/rfc8866.pdf
+          Each media description starts with an "m=" line and continues to the next media description or the end of the whole session description, whichever comes first
+        */
+        const type = line[0];
+        if (type === 'm') {
+            const _media = getMedia(line, mediaType);
+            isTheRequiredMediaSection = !!_media;
+            if (_media) {
+                media = _media;
+            }
+        }
+        else if (isTheRequiredMediaSection && type === 'a') {
+            const rtpMapLine = getRtpMap(line);
+            const fmtpLine = getFmtp(line);
+            if (rtpMapLine) {
+                rtpMap.push(rtpMapLine);
+            }
+            else if (fmtpLine) {
+                fmtp.push(fmtpLine);
+            }
+        }
+    });
+    if (media) {
+        return {
+            media,
+            rtpMap,
+            fmtp,
+        };
+    }
+};
+/**
+ * Gets the fmtp line corresponding to opus
+ */
+const getOpusFmtp = (sdp) => {
+    const section = getMediaSection(sdp, 'audio');
+    const rtpMap = section === null || section === void 0 ? void 0 : section.rtpMap.find((r) => r.codec.toLowerCase() === 'opus');
+    const codecId = rtpMap === null || rtpMap === void 0 ? void 0 : rtpMap.payload;
+    if (codecId) {
+        return section === null || section === void 0 ? void 0 : section.fmtp.find((f) => f.payload === codecId);
+    }
+};
+/**
+ * Returns an SDP with DTX enabled or disabled.
+ */
+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;
+};
+
 const logger$3 = getLogger(['Publisher']);
 /**
  * The `Publisher` is responsible for publishing/unpublishing media streams to/from the SFU
@@ -9611,15 +9510,26 @@ class DynascaleManager {
                     }
                 });
             });
-            const sinkIdSubscription = this.call.state.localParticipant$.subscribe((p) => {
-                if (p && p.audioOutputDeviceId && 'setSinkId' in audioElement) {
+            const sinkIdSubscription = combineLatest([
+                this.call.state.localParticipant$,
+                this.call.speaker.state.selectedDevice$,
+            ]).subscribe(([p, selectedDevice]) => {
+                var _a;
+                const deviceId = ((_a = getSdkInfo()) === null || _a === void 0 ? void 0 : _a.type) === SdkType.REACT
+                    ? p === null || p === void 0 ? void 0 : p.audioOutputDeviceId
+                    : selectedDevice;
+                if ('setSinkId' in audioElement) {
                     // @ts-expect-error setSinkId is not yet in the lib
-                    audioElement.setSinkId(p.audioOutputDeviceId);
+                    audioElement.setSinkId(deviceId);
                 }
             });
+            const volumeSubscription = this.call.speaker.state.volume$.subscribe((volume) => {
+                audioElement.volume = volume;
+            });
             audioElement.autoplay = true;
             return () => {
                 sinkIdSubscription.unsubscribe();
+                volumeSubscription.unsubscribe();
                 updateMediaStreamSubscription.unsubscribe();
             };
         };
@@ -9747,24 +9657,145 @@ class CallTypesRegistry {
         }, {});
     }
 }
-/**
- * The default call types registry.
- * You can use this instance to dynamically register and unregister call types.
- */
-const CallTypes = new CallTypesRegistry([
-    new CallType('default', {
-        sortParticipantsBy: defaultSortPreset,
-    }),
-    new CallType('development', {
-        sortParticipantsBy: defaultSortPreset,
-    }),
-    new CallType('livestream', {
-        sortParticipantsBy: livestreamOrAudioRoomSortPreset,
-    }),
-    new CallType('audio_room', {
-        sortParticipantsBy: livestreamOrAudioRoomSortPreset,
-    }),
-]);
+/**
+ * The default call types registry.
+ * You can use this instance to dynamically register and unregister call types.
+ */
+const CallTypes = new CallTypesRegistry([
+    new CallType('default', {
+        sortParticipantsBy: defaultSortPreset,
+    }),
+    new CallType('development', {
+        sortParticipantsBy: defaultSortPreset,
+    }),
+    new CallType('livestream', {
+        sortParticipantsBy: livestreamOrAudioRoomSortPreset,
+    }),
+    new CallType('audio_room', {
+        sortParticipantsBy: livestreamOrAudioRoomSortPreset,
+    }),
+]);
+
+class InputMediaDeviceManagerState {
+    constructor(disableMode = 'stop-tracks') {
+        this.disableMode = disableMode;
+        this.statusSubject = new BehaviorSubject(undefined);
+        this.mediaStreamSubject = new BehaviorSubject(undefined);
+        this.selectedDeviceSubject = new BehaviorSubject(undefined);
+        /**
+         * Gets the current value of an observable, or undefined if the observable has
+         * not emitted a value yet.
+         *
+         * @param observable$ the observable to get the value from.
+         */
+        this.getCurrentValue = getCurrentValue;
+        /**
+         * Updates the value of the provided Subject.
+         * An `update` can either be a new value or a function which takes
+         * the current value and returns a new value.
+         *
+         * @internal
+         *
+         * @param subject the subject to update.
+         * @param update the update to apply to the subject.
+         * @return the updated value.
+         */
+        this.setCurrentValue = setCurrentValue;
+        this.mediaStream$ = this.mediaStreamSubject.asObservable();
+        this.selectedDevice$ = this.selectedDeviceSubject
+            .asObservable()
+            .pipe(distinctUntilChanged$1());
+        this.status$ = this.statusSubject
+            .asObservable()
+            .pipe(distinctUntilChanged$1());
+    }
+    /**
+     * The device status
+     */
+    get status() {
+        return this.getCurrentValue(this.status$);
+    }
+    /**
+     * The currently selected device
+     */
+    get selectedDevice() {
+        return this.getCurrentValue(this.selectedDevice$);
+    }
+    /**
+     * The current media stream, or `undefined` if the device is currently disabled.
+     */
+    get mediaStream() {
+        return this.getCurrentValue(this.mediaStream$);
+    }
+    /**
+     * @internal
+     * @param status
+     */
+    setStatus(status) {
+        this.setCurrentValue(this.statusSubject, status);
+    }
+    /**
+     * @internal
+     * @param stream
+     */
+    setMediaStream(stream) {
+        this.setCurrentValue(this.mediaStreamSubject, stream);
+        if (stream) {
+            this.setDevice(this.getDeviceIdFromStream(stream));
+        }
+    }
+    /**
+     * @internal
+     * @param stream
+     */
+    setDevice(deviceId) {
+        this.setCurrentValue(this.selectedDeviceSubject, deviceId);
+    }
+}
+
+class CameraManagerState extends InputMediaDeviceManagerState {
+    constructor() {
+        super('stop-tracks');
+        this.directionSubject = new BehaviorSubject(undefined);
+        this.direction$ = this.directionSubject
+            .asObservable()
+            .pipe(distinctUntilChanged$1());
+    }
+    /**
+     * The preferred camera direction
+     * front - means the camera facing the user
+     * back - means the camera facing the environment
+     */
+    get direction() {
+        return this.getCurrentValue(this.direction$);
+    }
+    /**
+     * @internal
+     */
+    setDirection(direction) {
+        this.setCurrentValue(this.directionSubject, direction);
+    }
+    /**
+     * @internal
+     */
+    setMediaStream(stream) {
+        var _a;
+        super.setMediaStream(stream);
+        if (stream) {
+            // RN getSettings() doesn't return facingMode, so we don't verify camera direction
+            const direction = isReactNative()
+                ? this.direction
+                : ((_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().facingMode) === 'environment'
+                    ? 'back'
+                    : 'front';
+            this.setDirection(direction);
+        }
+    }
+    getDeviceIdFromStream(stream) {
+        var _a;
+        return (_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().deviceId;
+    }
+}
 
 const getDevices = (constraints) => {
     return new Observable((subscriber) => {
@@ -10161,127 +10192,6 @@ class InputMediaDeviceManager {
     }
 }
 
-class InputMediaDeviceManagerState {
-    constructor(disableMode = 'stop-tracks') {
-        this.disableMode = disableMode;
-        this.statusSubject = new BehaviorSubject(undefined);
-        this.mediaStreamSubject = new BehaviorSubject(undefined);
-        this.selectedDeviceSubject = new BehaviorSubject(undefined);
-        /**
-         * Gets the current value of an observable, or undefined if the observable has
-         * not emitted a value yet.
-         *
-         * @param observable$ the observable to get the value from.
-         */
-        this.getCurrentValue = getCurrentValue;
-        /**
-         * Updates the value of the provided Subject.
-         * An `update` can either be a new value or a function which takes
-         * the current value and returns a new value.
-         *
-         * @internal
-         *
-         * @param subject the subject to update.
-         * @param update the update to apply to the subject.
-         * @return the updated value.
-         */
-        this.setCurrentValue = setCurrentValue;
-        this.mediaStream$ = this.mediaStreamSubject.asObservable();
-        this.selectedDevice$ = this.selectedDeviceSubject
-            .asObservable()
-            .pipe(distinctUntilChanged$1());
-        this.status$ = this.statusSubject
-            .asObservable()
-            .pipe(distinctUntilChanged$1());
-    }
-    /**
-     * The device status
-     */
-    get status() {
-        return this.getCurrentValue(this.status$);
-    }
-    /**
-     * The currently selected device
-     */
-    get selectedDevice() {
-        return this.getCurrentValue(this.selectedDevice$);
-    }
-    /**
-     * The current media stream, or `undefined` if the device is currently disabled.
-     */
-    get mediaStream() {
-        return this.getCurrentValue(this.mediaStream$);
-    }
-    /**
-     * @internal
-     * @param status
-     */
-    setStatus(status) {
-        this.setCurrentValue(this.statusSubject, status);
-    }
-    /**
-     * @internal
-     * @param stream
-     */
-    setMediaStream(stream) {
-        this.setCurrentValue(this.mediaStreamSubject, stream);
-        if (stream) {
-            this.setDevice(this.getDeviceIdFromStream(stream));
-        }
-    }
-    /**
-     * @internal
-     * @param stream
-     */
-    setDevice(deviceId) {
-        this.setCurrentValue(this.selectedDeviceSubject, deviceId);
-    }
-}
-
-class CameraManagerState extends InputMediaDeviceManagerState {
-    constructor() {
-        super('stop-tracks');
-        this.directionSubject = new BehaviorSubject(undefined);
-        this.direction$ = this.directionSubject
-            .asObservable()
-            .pipe(distinctUntilChanged$1());
-    }
-    /**
-     * The preferred camera direction
-     * front - means the camera facing the user
-     * back - means the camera facing the environment
-     */
-    get direction() {
-        return this.getCurrentValue(this.direction$);
-    }
-    /**
-     * @internal
-     */
-    setDirection(direction) {
-        this.setCurrentValue(this.directionSubject, direction);
-    }
-    /**
-     * @internal
-     */
-    setMediaStream(stream) {
-        var _a;
-        super.setMediaStream(stream);
-        if (stream) {
-            // RN getSettings() doesn't return facingMode, so we don't verify camera direction
-            const direction = isReactNative()
-                ? this.direction
-                : ((_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().facingMode) === 'environment'
-                    ? 'back'
-                    : 'front';
-            this.setDirection(direction);
-        }
-    }
-    getDeviceIdFromStream(stream) {
-        var _a;
-        return (_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().deviceId;
-    }
-}
-
 class CameraManager extends InputMediaDeviceManager {
     constructor(call) {
         super(call, new CameraManagerState());
@@ -10405,6 +10315,116 @@ class MicrophoneManager extends InputMediaDeviceManager {
     }
 }
 
+class SpeakerState {
+    constructor() {
+        this.selectedDeviceSubject = new BehaviorSubject('');
+        this.volumeSubject = new BehaviorSubject(1);
+        /**
+         * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
+         */
+        this.isDeviceSelectionSupported = checkIfAudioOutputChangeSupported();
+        /**
+         * Gets the current value of an observable, or undefined if the observable has
+         * not emitted a value yet.
+         *
+         * @param observable$ the observable to get the value from.
+         */
+        this.getCurrentValue = getCurrentValue;
+        /**
+         * Updates the value of the provided Subject.
+         * An `update` can either be a new value or a function which takes
+         * the current value and returns a new value.
+         *
+         * @internal
+         *
+         * @param subject the subject to update.
+         * @param update the update to apply to the subject.
+         * @return the updated value.
+         */
+        this.setCurrentValue = setCurrentValue;
+        this.selectedDevice$ = this.selectedDeviceSubject
+            .asObservable()
+            .pipe(distinctUntilChanged$1());
+        this.volume$ = this.volumeSubject
+            .asObservable()
+            .pipe(distinctUntilChanged$1());
+    }
+    /**
+     * The currently selected device
+     *
+     * Note: this feature is not supported in React Native
+     */
+    get selectedDevice() {
+        return this.getCurrentValue(this.selectedDevice$);
+    }
+    /**
+     * The currently selected volume
+     *
+     * Note: this feature is not supported in React Native
+     */
+    get volume() {
+        return this.getCurrentValue(this.volume$);
+    }
+    /**
+     * @internal
+     * @param deviceId
+     */
+    setDevice(deviceId) {
+        this.setCurrentValue(this.selectedDeviceSubject, deviceId);
+    }
+    /**
+     * @internal
+     * @param volume
+     */
+    setVolume(volume) {
+        this.setCurrentValue(this.volumeSubject, volume);
+    }
+}
+
+class SpeakerManager {
+    constructor() {
+        this.state = new SpeakerState();
+    }
+    /**
+     * Lists the available audio output devices
+     *
+     * Note: It prompts the user for a permission to use devices (if not already granted)
+     *
+     * @returns an Observable that will be updated if a device is connected or disconnected
+     */
+    listDevices() {
+        return getAudioOutputDevices();
+    }
+    /**
+     * Select device
+     *
+     * Note: this method is not supported in React Native
+     *
+     * @param deviceId empty string means the system default
+     */
+    select(deviceId) {
+        if (isReactNative()) {
+            throw new Error('This feature is not supported in React Native');
+        }
+        this.state.setDevice(deviceId);
+    }
+    /**
+     * Set the volume of the audio elements
+     * @param volume a number between 0 and 1
+     *
+     * Note: this method is not supported in React Native
+     */
+    setVolume(volume) {
+        if (isReactNative()) {
+            throw new Error('This feature is not supported in React Native');
+        }
+        if (volume && (volume < 0 || volume > 1)) {
+            throw new Error('Volume must be between 0 and 1');
+        }
+        this.state.setVolume(volume);
+    }
+}
+
 /**
  * An object representation of a `Call`.
  */
@@ -10788,7 +10808,7 @@ class Call {
                     // prepare a generic SDP and send it to the SFU.
                     // this is a throw-away SDP that the SFU will use to determine
                     // the capabilities of the client (codec support, etc.)
-                    .then(() => getGenericSdp('recvonly', isRedEnabled, this.streamClient.options.preferredVideoCodec))
+                    .then(() => getGenericSdp('recvonly'))
                     .then((sdp) => {
                     var _a;
                     const subscriptions = getCurrentValue(this.trackSubscriptionsSubject);
@@ -11079,6 +11099,8 @@ class Call {
          *
          *
          * @param deviceId the selected device, `undefined` means the user wants to use the system's default audio output
+         *
+         * @deprecated use `call.speaker` instead
          */
         this.setAudioOutputDevice = (deviceId) => {
             if (!this.sfuClient)
@@ -11553,6 +11575,7 @@ class Call {
         this.leaveCallHooks.add(createSubscription(this.trackSubscriptionsSubject.pipe(debounce((v) => timer(v.type)), map$2((v) => v.data)), (subscriptions) => { var _a; return (_a = this.sfuClient) === null || _a === void 0 ? void 0 : _a.updateSubscriptions(subscriptions); }));
         this.camera = new CameraManager(this);
         this.microphone = new MicrophoneManager(this);
+        this.speaker = new SpeakerManager();
     }
     registerEffects() {
         this.leaveCallHooks.add(
@@ -12842,7 +12865,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.11';
+const version = '0.3.13';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;