@stream-io/video-client 0.3.12 → 0.3.14

package/dist/index.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';
@@ -6493,6 +6493,9 @@ class Publisher {
                 // by an external factor as permission revokes, device disconnected, etc.
                 // keep in mind that `track.stop()` doesn't trigger this event.
                 track.addEventListener('ended', handleTrackEnded);
+                if (!track.enabled) {
+                    track.enabled = true;
+                }
                 transceiver = this.pc.addTransceiver(track, {
                     direction: 'sendonly',
                     streams: trackType === TrackType.VIDEO || trackType === TrackType.SCREEN_SHARE
@@ -6530,16 +6533,25 @@ class Publisher {
          * @param stopTrack specifies whether track should be stopped or just disabled
          */
         this.unpublishStream = (trackType, stopTrack) => __awaiter(this, void 0, void 0, function* () {
+            var _b;
             const transceiver = this.pc
                 .getTransceivers()
                 .find((t) => t === this.transceiverRegistry[trackType] && t.sender.track);
             if (transceiver &&
                 transceiver.sender.track &&
-                transceiver.sender.track.readyState === 'live') {
+                (stopTrack
+                    ? transceiver.sender.track.readyState === 'live'
+                    : transceiver.sender.track.enabled)) {
                 stopTrack
                     ? transceiver.sender.track.stop()
                     : (transceiver.sender.track.enabled = false);
-                return this.notifyTrackMuteStateChanged(undefined, transceiver.sender.track, trackType, true);
+                // We don't need to notify SFU if unpublishing in response to remote soft mute
+                if (!((_b = this.state.localParticipant) === null || _b === void 0 ? void 0 : _b.publishedTracks.includes(trackType))) {
+                    return;
+                }
+                else {
+                    return this.notifyTrackMuteStateChanged(undefined, transceiver.sender.track, trackType, true);
+                }
             }
         });
         /**
@@ -6548,6 +6560,21 @@ class Publisher {
          * @param trackType the track type to check.
          */
         this.isPublishing = (trackType) => {
+            const transceiverForTrackType = this.transceiverRegistry[trackType];
+            if (transceiverForTrackType && transceiverForTrackType.sender) {
+                const sender = transceiverForTrackType.sender;
+                return (!!sender.track &&
+                    sender.track.readyState === 'live' &&
+                    sender.track.enabled);
+            }
+            return false;
+        };
+        /**
+         * Returns true if the given track type is currently live
+         *
+         * @param trackType the track type to check.
+         */
+        this.isLive = (trackType) => {
             const transceiverForTrackType = this.transceiverRegistry[trackType];
             if (transceiverForTrackType && transceiverForTrackType.sender) {
                 const sender = transceiverForTrackType.sender;
@@ -6588,9 +6615,9 @@ class Publisher {
             });
         };
         this.updateVideoPublishQuality = (enabledRids) => __awaiter(this, void 0, void 0, function* () {
-            var _b;
+            var _c;
             logger$3('info', 'Update publish quality, requested rids by SFU:', enabledRids);
-            const videoSender = (_b = this.transceiverRegistry[TrackType.VIDEO]) === null || _b === void 0 ? void 0 : _b.sender;
+            const videoSender = (_c = this.transceiverRegistry[TrackType.VIDEO]) === null || _c === void 0 ? void 0 : _c.sender;
             if (!videoSender) {
                 logger$3('warn', 'Update publish quality, no video sender found.');
                 return;
@@ -6688,8 +6715,8 @@ class Publisher {
          * @param options the optional offer options to use.
          */
         this.negotiate = (options) => __awaiter(this, void 0, void 0, function* () {
-            var _c;
-            this.isIceRestarting = (_c = options === null || options === void 0 ? void 0 : options.iceRestart) !== null && _c !== void 0 ? _c : false;
+            var _d;
+            this.isIceRestarting = (_d = options === null || options === void 0 ? void 0 : options.iceRestart) !== null && _d !== void 0 ? _d : false;
             const offer = yield this.pc.createOffer(options);
             offer.sdp = this.mungeCodecs(offer.sdp);
             const trackInfos = this.getCurrentTrackInfos(offer.sdp);
@@ -7477,6 +7504,9 @@ const retryable = (rpc, logger) => __awaiter(void 0, void 0, void 0, function* (
         retryAttempt++;
     } while (((_a = rpcCallResult.response.error) === null || _a === void 0 ? void 0 : _a.shouldRetry) &&
         retryAttempt < MAX_RETRIES);
+    if (rpcCallResult.response.error) {
+        throw rpcCallResult.response.error;
+    }
     return rpcCallResult;
 });
 
@@ -9513,15 +9543,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();
             };
         };
@@ -9668,258 +9709,133 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
-const getDevices = (constraints) => {
-    return new Observable((subscriber) => {
-        navigator.mediaDevices
-            .getUserMedia(constraints)
-            .then((media) => {
-            // in Firefox, devices can be enumerated after userMedia is requested
-            // and permissions granted. Otherwise, device labels are empty
-            navigator.mediaDevices.enumerateDevices().then((devices) => {
-                subscriber.next(devices);
-                // If we stop the tracks before enumerateDevices -> the labels won't show up in Firefox
-                disposeOfMediaStream(media);
-                subscriber.complete();
-            });
-        })
-            .catch((error) => {
-            getLogger(['devices'])('error', 'Failed to get devices', error);
-            subscriber.error(error);
-        });
-    });
-};
-/**
- * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- */
-const checkIfAudioOutputChangeSupported = () => {
-    if (typeof document === 'undefined')
-        return false;
-    const element = document.createElement('audio');
-    return element.sinkId !== undefined;
-};
-/**
- * The default constraints used to request audio devices.
- */
-const audioDeviceConstraints = {
-    audio: {
-        autoGainControl: true,
-        noiseSuppression: true,
-        echoCancellation: true,
-    },
-};
-/**
- * The default constraints used to request video devices.
- */
-const videoDeviceConstraints = {
-    video: {
-        width: 1280,
-        height: 720,
-    },
-};
-// Audio and video devices are requested in two separate requests: that way users will be presented with two separate prompts -> they can give access to just camera, or just microphone
-const deviceChange$ = new Observable((subscriber) => {
-    var _a, _b;
-    const deviceChangeHandler = () => subscriber.next();
-    (_b = (_a = navigator.mediaDevices).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'devicechange', deviceChangeHandler);
-    return () => {
-        var _a, _b;
-        return (_b = (_a = navigator.mediaDevices).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'devicechange', deviceChangeHandler);
-    };
-}).pipe(debounceTime(500), concatMap(() => from(navigator.mediaDevices.enumerateDevices())), shareReplay(1));
-const audioDevices$ = merge(getDevices(audioDeviceConstraints), deviceChange$).pipe(shareReplay(1));
-const videoDevices$ = merge(getDevices(videoDeviceConstraints), deviceChange$).pipe(shareReplay(1));
-/**
- * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audioinput' devices, if devices are added/removed the list is updated.
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @returns
- */
-const getAudioDevices = () => audioDevices$.pipe(map$2((values) => values.filter((d) => d.kind === 'audioinput')));
-/**
- * Prompts the user for a permission to use video devices (if not already granted) and lists the available 'videoinput' devices, if devices are added/removed the list is updated.
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @returns
- */
-const getVideoDevices = () => videoDevices$.pipe(map$2((values) => values.filter((d) => d.kind === 'videoinput' && d.deviceId.length)));
-/**
- * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audiooutput' devices, if devices are added/removed the list is updated. Selecting 'audiooutput' device only makes sense if [the browser has support for changing audio output on 'audio' elements](#checkifaudiooutputchangesupported)
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @returns
- */
-const getAudioOutputDevices = () => {
-    return audioDevices$.pipe(map$2((values) => values.filter((d) => d.kind === 'audiooutput')));
-};
-const getStream = (constraints) => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-        return yield navigator.mediaDevices.getUserMedia(constraints);
+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());
     }
-    catch (e) {
-        getLogger(['devices'])('error', `Failed get user media`, {
-            error: e,
-            constraints: constraints,
-        });
-        throw e;
+    /**
+     * The device status
+     */
+    get status() {
+        return this.getCurrentValue(this.status$);
     }
-});
-/**
- * Returns an audio media stream that fulfills the given constraints.
- * If no constraints are provided, it uses the browser's default ones.
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param trackConstraints the constraints to use when requesting the stream.
- * @returns the new `MediaStream` fulfilling the given constraints.
- */
-const getAudioStream = (trackConstraints) => __awaiter(void 0, void 0, void 0, function* () {
-    const constraints = {
-        audio: Object.assign(Object.assign({}, audioDeviceConstraints.audio), trackConstraints),
-    };
-    return getStream(constraints);
-});
-/**
- * Returns a video media stream that fulfills the given constraints.
- * If no constraints are provided, it uses the browser's default ones.
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param trackConstraints the constraints to use when requesting the stream.
- * @returns a new `MediaStream` fulfilling the given constraints.
- */
-const getVideoStream = (trackConstraints) => __awaiter(void 0, void 0, void 0, function* () {
-    const constraints = {
-        video: Object.assign(Object.assign({}, videoDeviceConstraints.video), trackConstraints),
-    };
-    return getStream(constraints);
-});
-/**
- * Prompts the user for a permission to share a screen.
- * If the user grants the permission, a screen sharing stream is returned. Throws otherwise.
- *
- * The callers of this API are responsible to handle the possible errors.
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- *
- * @param options any additional options to pass to the [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) API.
- */
-const getScreenShareStream = (options) => __awaiter(void 0, void 0, void 0, function* () {
-    try {
-        return yield navigator.mediaDevices.getDisplayMedia(Object.assign({ video: true, audio: false }, options));
+    /**
+     * The currently selected device
+     */
+    get selectedDevice() {
+        return this.getCurrentValue(this.selectedDevice$);
     }
-    catch (e) {
-        getLogger(['devices'])('error', 'Failed to get screen share stream', e);
-        throw e;
+    /**
+     * The current media stream, or `undefined` if the device is currently disabled.
+     */
+    get mediaStream() {
+        return this.getCurrentValue(this.mediaStream$);
     }
-});
-const watchForDisconnectedDevice = (kind, deviceId$) => {
-    let devices$;
-    switch (kind) {
-        case 'audioinput':
-            devices$ = getAudioDevices();
-            break;
-        case 'videoinput':
-            devices$ = getVideoDevices();
-            break;
-        case 'audiooutput':
-            devices$ = getAudioOutputDevices();
-            break;
+    /**
+     * @internal
+     * @param status
+     */
+    setStatus(status) {
+        this.setCurrentValue(this.statusSubject, status);
     }
-    return combineLatest([devices$, deviceId$]).pipe(filter(([devices, deviceId]) => !!deviceId && !devices.find((d) => d.deviceId === deviceId)), map$2(() => true));
-};
-/**
- * Notifies the subscriber if a given 'audioinput' device is disconnected
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param deviceId$ an Observable that specifies which device to watch for
- * @returns
- */
-const watchForDisconnectedAudioDevice = (deviceId$) => {
-    return watchForDisconnectedDevice('audioinput', deviceId$);
-};
-/**
- * Notifies the subscriber if a given 'videoinput' device is disconnected
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param deviceId$ an Observable that specifies which device to watch for
- * @returns
- */
-const watchForDisconnectedVideoDevice = (deviceId$) => {
-    return watchForDisconnectedDevice('videoinput', deviceId$);
-};
-/**
- * Notifies the subscriber if a given 'audiooutput' device is disconnected
- *
- * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
- * @param deviceId$ an Observable that specifies which device to watch for
- * @returns
- */
-const watchForDisconnectedAudioOutputDevice = (deviceId$) => {
-    return watchForDisconnectedDevice('audiooutput', deviceId$);
-};
-const watchForAddedDefaultDevice = (kind) => {
-    let devices$;
-    switch (kind) {
-        case 'audioinput':
-            devices$ = getAudioDevices();
-            break;
-        case 'videoinput':
-            devices$ = getVideoDevices();
-            break;
-        case 'audiooutput':
-            devices$ = getAudioOutputDevices();
-            break;
-        default:
-            throw new Error('Unknown MediaDeviceKind', kind);
+    /**
+     * @internal
+     * @param stream
+     */
+    setMediaStream(stream) {
+        this.setCurrentValue(this.mediaStreamSubject, stream);
+        if (stream) {
+            this.setDevice(this.getDeviceIdFromStream(stream));
+        }
     }
-    return devices$.pipe(pairwise(), filter(([prev, current]) => {
-        const prevDefault = prev.find((device) => device.deviceId === 'default');
-        const currentDefault = current.find((device) => device.deviceId === 'default');
-        return !!(current.length > prev.length &&
-            prevDefault &&
-            currentDefault &&
-            prevDefault.groupId !== currentDefault.groupId);
-    }), map$2(() => true));
-};
-/**
- * Notifies the subscriber about newly added default audio input device.
- * @returns Observable<boolean>
- */
-const watchForAddedDefaultAudioDevice = () => watchForAddedDefaultDevice('audioinput');
-/**
- * Notifies the subscriber about newly added default audio output device.
- * @returns Observable<boolean>
- */
-const watchForAddedDefaultAudioOutputDevice = () => watchForAddedDefaultDevice('audiooutput');
-/**
- * Notifies the subscriber about newly added default video input device.
- * @returns Observable<boolean>
- */
-const watchForAddedDefaultVideoDevice = () => watchForAddedDefaultDevice('videoinput');
-/**
- * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
- *
- * @param stream MediaStream
- * @returns void
- */
-const disposeOfMediaStream = (stream) => {
-    if (!stream.active)
-        return;
-    stream.getTracks().forEach((track) => {
-        track.stop();
-        stream.removeTrack(track);
-    });
-    // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the stream
-    if (typeof stream.release === 'function') {
-        // @ts-expect-error
-        stream.release();
+    /**
+     * @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 InputMediaDeviceManager {
-    constructor(call, state) {
+    constructor(call, state, trackType) {
         this.call = call;
         this.state = state;
+        this.trackType = trackType;
+        this.logger = getLogger([`${TrackType[trackType].toLowerCase()} manager`]);
     }
     /**
      * Lists the available audio/video devices
@@ -10027,31 +9943,66 @@ class InputMediaDeviceManager {
         });
     }
     muteStream(stopTracks = true) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             if (!this.state.mediaStream) {
                 return;
             }
+            this.logger('debug', `${stopTracks ? 'Stopping' : 'Disabling'} stream`);
             if (this.call.state.callingState === CallingState.JOINED) {
                 yield this.stopPublishStream(stopTracks);
             }
-            else if (this.state.mediaStream) {
-                stopTracks
-                    ? disposeOfMediaStream(this.state.mediaStream)
-                    : this.muteTracks();
-            }
-            if (stopTracks) {
+            this.muteLocalStream(stopTracks);
+            if (((_a = this.getTrack()) === null || _a === void 0 ? void 0 : _a.readyState) === 'ended') {
+                // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the stream
+                if (typeof this.state.mediaStream.release === 'function') {
+                    // @ts-expect-error
+                    this.state.mediaStream.release();
+                }
                 this.state.setMediaStream(undefined);
             }
         });
     }
+    muteTrack() {
+        const track = this.getTrack();
+        if (!track || !track.enabled) {
+            return;
+        }
+        track.enabled = false;
+    }
+    unmuteTrack() {
+        const track = this.getTrack();
+        if (!track || track.enabled) {
+            return;
+        }
+        track.enabled = true;
+    }
+    stopTrack() {
+        const track = this.getTrack();
+        if (!track || track.readyState === 'ended') {
+            return;
+        }
+        track.stop();
+    }
+    muteLocalStream(stopTracks) {
+        if (!this.state.mediaStream) {
+            return;
+        }
+        stopTracks ? this.stopTrack() : this.muteTrack();
+    }
     unmuteStream() {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
+            this.logger('debug', 'Starting stream');
             let stream;
-            if (this.state.mediaStream) {
+            if (this.state.mediaStream && ((_a = this.getTrack()) === null || _a === void 0 ? void 0 : _a.readyState) === 'live') {
                 stream = this.state.mediaStream;
-                this.unmuteTracks();
+                this.unmuteTrack();
             }
             else {
+                if (this.state.mediaStream) {
+                    this.stopTrack();
+                }
                 const constraints = { deviceId: this.state.selectedDevice };
                 stream = yield this.getStream(constraints);
             }
@@ -10063,130 +10014,257 @@ 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));
-        }
+const getDevices = (constraints) => {
+    return new Observable((subscriber) => {
+        navigator.mediaDevices
+            .getUserMedia(constraints)
+            .then((media) => {
+            // in Firefox, devices can be enumerated after userMedia is requested
+            // and permissions granted. Otherwise, device labels are empty
+            navigator.mediaDevices.enumerateDevices().then((devices) => {
+                subscriber.next(devices);
+                // If we stop the tracks before enumerateDevices -> the labels won't show up in Firefox
+                disposeOfMediaStream(media);
+                subscriber.complete();
+            });
+        })
+            .catch((error) => {
+            getLogger(['devices'])('error', 'Failed to get devices', error);
+            subscriber.error(error);
+        });
+    });
+};
+/**
+ * [Tells if the browser supports audio output change on 'audio' elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId).
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ */
+const checkIfAudioOutputChangeSupported = () => {
+    if (typeof document === 'undefined')
+        return false;
+    const element = document.createElement('audio');
+    return element.sinkId !== undefined;
+};
+/**
+ * The default constraints used to request audio devices.
+ */
+const audioDeviceConstraints = {
+    audio: {
+        autoGainControl: true,
+        noiseSuppression: true,
+        echoCancellation: true,
+    },
+};
+/**
+ * The default constraints used to request video devices.
+ */
+const videoDeviceConstraints = {
+    video: {
+        width: 1280,
+        height: 720,
+    },
+};
+// Audio and video devices are requested in two separate requests: that way users will be presented with two separate prompts -> they can give access to just camera, or just microphone
+const deviceChange$ = new Observable((subscriber) => {
+    var _a, _b;
+    const deviceChangeHandler = () => subscriber.next();
+    (_b = (_a = navigator.mediaDevices).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'devicechange', deviceChangeHandler);
+    return () => {
+        var _a, _b;
+        return (_b = (_a = navigator.mediaDevices).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'devicechange', deviceChangeHandler);
+    };
+}).pipe(debounceTime(500), concatMap(() => from(navigator.mediaDevices.enumerateDevices())), shareReplay(1));
+const audioDevices$ = merge(getDevices(audioDeviceConstraints), deviceChange$).pipe(shareReplay(1));
+const videoDevices$ = merge(getDevices(videoDeviceConstraints), deviceChange$).pipe(shareReplay(1));
+/**
+ * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audioinput' devices, if devices are added/removed the list is updated.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @returns
+ */
+const getAudioDevices = () => audioDevices$.pipe(map$2((values) => values.filter((d) => d.kind === 'audioinput')));
+/**
+ * Prompts the user for a permission to use video devices (if not already granted) and lists the available 'videoinput' devices, if devices are added/removed the list is updated.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @returns
+ */
+const getVideoDevices = () => videoDevices$.pipe(map$2((values) => values.filter((d) => d.kind === 'videoinput' && d.deviceId.length)));
+/**
+ * Prompts the user for a permission to use audio devices (if not already granted) and lists the available 'audiooutput' devices, if devices are added/removed the list is updated. Selecting 'audiooutput' device only makes sense if [the browser has support for changing audio output on 'audio' elements](#checkifaudiooutputchangesupported)
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @returns
+ */
+const getAudioOutputDevices = () => {
+    return audioDevices$.pipe(map$2((values) => values.filter((d) => d.kind === 'audiooutput')));
+};
+const getStream = (constraints) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        return yield navigator.mediaDevices.getUserMedia(constraints);
     }
-    /**
-     * @internal
-     * @param stream
-     */
-    setDevice(deviceId) {
-        this.setCurrentValue(this.selectedDeviceSubject, deviceId);
+    catch (e) {
+        getLogger(['devices'])('error', `Failed get user media`, {
+            error: e,
+            constraints: constraints,
+        });
+        throw e;
     }
-}
-
-class CameraManagerState extends InputMediaDeviceManagerState {
-    constructor() {
-        super('stop-tracks');
-        this.directionSubject = new BehaviorSubject(undefined);
-        this.direction$ = this.directionSubject
-            .asObservable()
-            .pipe(distinctUntilChanged$1());
+});
+/**
+ * Returns an audio media stream that fulfills the given constraints.
+ * If no constraints are provided, it uses the browser's default ones.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param trackConstraints the constraints to use when requesting the stream.
+ * @returns the new `MediaStream` fulfilling the given constraints.
+ */
+const getAudioStream = (trackConstraints) => __awaiter(void 0, void 0, void 0, function* () {
+    const constraints = {
+        audio: Object.assign(Object.assign({}, audioDeviceConstraints.audio), trackConstraints),
+    };
+    return getStream(constraints);
+});
+/**
+ * Returns a video media stream that fulfills the given constraints.
+ * If no constraints are provided, it uses the browser's default ones.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param trackConstraints the constraints to use when requesting the stream.
+ * @returns a new `MediaStream` fulfilling the given constraints.
+ */
+const getVideoStream = (trackConstraints) => __awaiter(void 0, void 0, void 0, function* () {
+    const constraints = {
+        video: Object.assign(Object.assign({}, videoDeviceConstraints.video), trackConstraints),
+    };
+    return getStream(constraints);
+});
+/**
+ * Prompts the user for a permission to share a screen.
+ * If the user grants the permission, a screen sharing stream is returned. Throws otherwise.
+ *
+ * The callers of this API are responsible to handle the possible errors.
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ *
+ * @param options any additional options to pass to the [`getDisplayMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia) API.
+ */
+const getScreenShareStream = (options) => __awaiter(void 0, void 0, void 0, function* () {
+    try {
+        return yield navigator.mediaDevices.getDisplayMedia(Object.assign({ video: true, audio: false }, options));
     }
-    /**
-     * 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$);
+    catch (e) {
+        getLogger(['devices'])('error', 'Failed to get screen share stream', e);
+        throw e;
     }
-    /**
-     * @internal
-     */
-    setDirection(direction) {
-        this.setCurrentValue(this.directionSubject, direction);
+});
+const watchForDisconnectedDevice = (kind, deviceId$) => {
+    let devices$;
+    switch (kind) {
+        case 'audioinput':
+            devices$ = getAudioDevices();
+            break;
+        case 'videoinput':
+            devices$ = getVideoDevices();
+            break;
+        case 'audiooutput':
+            devices$ = getAudioOutputDevices();
+            break;
     }
-    /**
-     * @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);
-        }
+    return combineLatest([devices$, deviceId$]).pipe(filter(([devices, deviceId]) => !!deviceId && !devices.find((d) => d.deviceId === deviceId)), map$2(() => true));
+};
+/**
+ * Notifies the subscriber if a given 'audioinput' device is disconnected
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param deviceId$ an Observable that specifies which device to watch for
+ * @returns
+ */
+const watchForDisconnectedAudioDevice = (deviceId$) => {
+    return watchForDisconnectedDevice('audioinput', deviceId$);
+};
+/**
+ * Notifies the subscriber if a given 'videoinput' device is disconnected
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param deviceId$ an Observable that specifies which device to watch for
+ * @returns
+ */
+const watchForDisconnectedVideoDevice = (deviceId$) => {
+    return watchForDisconnectedDevice('videoinput', deviceId$);
+};
+/**
+ * Notifies the subscriber if a given 'audiooutput' device is disconnected
+ *
+ * @angular It's recommended to use the [`DeviceManagerService`](./DeviceManagerService.md) for a higher level API, use this low-level method only if the `DeviceManagerService` doesn't suit your requirements.
+ * @param deviceId$ an Observable that specifies which device to watch for
+ * @returns
+ */
+const watchForDisconnectedAudioOutputDevice = (deviceId$) => {
+    return watchForDisconnectedDevice('audiooutput', deviceId$);
+};
+const watchForAddedDefaultDevice = (kind) => {
+    let devices$;
+    switch (kind) {
+        case 'audioinput':
+            devices$ = getAudioDevices();
+            break;
+        case 'videoinput':
+            devices$ = getVideoDevices();
+            break;
+        case 'audiooutput':
+            devices$ = getAudioOutputDevices();
+            break;
+        default:
+            throw new Error('Unknown MediaDeviceKind', kind);
     }
-    getDeviceIdFromStream(stream) {
-        var _a;
-        return (_a = stream.getVideoTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().deviceId;
+    return devices$.pipe(pairwise(), filter(([prev, current]) => {
+        const prevDefault = prev.find((device) => device.deviceId === 'default');
+        const currentDefault = current.find((device) => device.deviceId === 'default');
+        return !!(current.length > prev.length &&
+            prevDefault &&
+            currentDefault &&
+            prevDefault.groupId !== currentDefault.groupId);
+    }), map$2(() => true));
+};
+/**
+ * Notifies the subscriber about newly added default audio input device.
+ * @returns Observable<boolean>
+ */
+const watchForAddedDefaultAudioDevice = () => watchForAddedDefaultDevice('audioinput');
+/**
+ * Notifies the subscriber about newly added default audio output device.
+ * @returns Observable<boolean>
+ */
+const watchForAddedDefaultAudioOutputDevice = () => watchForAddedDefaultDevice('audiooutput');
+/**
+ * Notifies the subscriber about newly added default video input device.
+ * @returns Observable<boolean>
+ */
+const watchForAddedDefaultVideoDevice = () => watchForAddedDefaultDevice('videoinput');
+/**
+ * Deactivates MediaStream (stops and removes tracks) to be later garbage collected
+ *
+ * @param stream MediaStream
+ * @returns void
+ */
+const disposeOfMediaStream = (stream) => {
+    if (!stream.active)
+        return;
+    stream.getTracks().forEach((track) => {
+        track.stop();
+        stream.removeTrack(track);
+    });
+    // @ts-expect-error release() is present in react-native-webrtc and must be called to dispose the stream
+    if (typeof stream.release === 'function') {
+        // @ts-expect-error
+        stream.release();
     }
-}
+};
 
 class CameraManager extends InputMediaDeviceManager {
     constructor(call) {
-        super(call, new CameraManagerState());
+        super(call, new CameraManagerState(), TrackType.VIDEO);
         this.targetResolution = {
             width: 1280,
             height: 720,
@@ -10238,6 +10316,7 @@ class CameraManager extends InputMediaDeviceManager {
                 if (width !== this.targetResolution.width ||
                     height !== this.targetResolution.height)
                     yield this.applySettingsToStream();
+                this.logger('debug', `${width}x${height} target resolution applied to media stream`);
             }
         });
     }
@@ -10261,13 +10340,9 @@ class CameraManager extends InputMediaDeviceManager {
     stopPublishStream(stopTracks) {
         return this.call.stopPublish(TrackType.VIDEO, stopTracks);
     }
-    muteTracks() {
-        var _a;
-        (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getVideoTracks().forEach((t) => (t.enabled = false));
-    }
-    unmuteTracks() {
+    getTrack() {
         var _a;
-        (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getVideoTracks().forEach((t) => (t.enabled = true));
+        return (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getVideoTracks()[0];
     }
 }
 
@@ -10283,7 +10358,7 @@ class MicrophoneManagerState extends InputMediaDeviceManagerState {
 
 class MicrophoneManager extends InputMediaDeviceManager {
     constructor(call) {
-        super(call, new MicrophoneManagerState());
+        super(call, new MicrophoneManagerState(), TrackType.AUDIO);
     }
     getDevices() {
         return getAudioDevices();
@@ -10297,13 +10372,119 @@ class MicrophoneManager extends InputMediaDeviceManager {
     stopPublishStream(stopTracks) {
         return this.call.stopPublish(TrackType.AUDIO, stopTracks);
     }
-    muteTracks() {
+    getTrack() {
         var _a;
-        (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getAudioTracks().forEach((t) => (t.enabled = false));
+        return (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getAudioTracks()[0];
     }
-    unmuteTracks() {
-        var _a;
-        (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getAudioTracks().forEach((t) => (t.enabled = true));
+}
+
+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);
     }
 }
 
@@ -10879,7 +11060,7 @@ class Call {
          */
         this.stopPublish = (trackType, stopTrack = true) => __awaiter(this, void 0, void 0, function* () {
             var _j;
-            this.logger('info', `stopPublish ${TrackType[trackType]}`);
+            this.logger('info', `stopPublish ${TrackType[trackType]}, stop tracks: ${stopTrack}`);
             yield ((_j = this.publisher) === null || _j === void 0 ? void 0 : _j.unpublishStream(trackType, stopTrack));
         });
         /**
@@ -10981,6 +11162,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)
@@ -11455,6 +11638,28 @@ 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.state.localParticipant$.subscribe((p) => __awaiter(this, void 0, void 0, function* () {
+            var _l, _m;
+            // Mute via device manager
+            // If integrator doesn't use device manager, we mute using stopPublish
+            if (!(p === null || p === void 0 ? void 0 : p.publishedTracks.includes(TrackType.VIDEO)) &&
+                ((_l = this.publisher) === null || _l === void 0 ? void 0 : _l.isPublishing(TrackType.VIDEO))) {
+                this.logger('info', `Local participant's video track is muted remotely`);
+                yield this.camera.disable();
+                if (this.publisher.isPublishing(TrackType.VIDEO)) {
+                    this.stopPublish(TrackType.VIDEO);
+                }
+            }
+            if (!(p === null || p === void 0 ? void 0 : p.publishedTracks.includes(TrackType.AUDIO)) &&
+                ((_m = this.publisher) === null || _m === void 0 ? void 0 : _m.isPublishing(TrackType.AUDIO))) {
+                this.logger('info', `Local participant's audio track is muted remotely`);
+                yield this.microphone.disable();
+                if (this.publisher.isPublishing(TrackType.AUDIO)) {
+                    this.stopPublish(TrackType.AUDIO);
+                }
+            }
+        }));
+        this.speaker = new SpeakerManager();
     }
     registerEffects() {
         this.leaveCallHooks.add(
@@ -11479,9 +11684,27 @@ class Call {
             };
             for (const [permission, trackType] of Object.entries(permissionToTrackType)) {
                 const hasPermission = this.permissionsContext.hasPermission(permission);
-                if (!hasPermission && this.publisher.isPublishing(trackType)) {
-                    this.stopPublish(trackType).catch((err) => {
+                if (!hasPermission &&
+                    (this.publisher.isPublishing(trackType) ||
+                        this.publisher.isLive(trackType))) {
+                    // Stop tracks, then notify device manager
+                    this.stopPublish(trackType)
+                        .catch((err) => {
                         this.logger('error', `Error stopping publish ${trackType}`, err);
+                    })
+                        .then(() => {
+                        if (trackType === TrackType.VIDEO &&
+                            this.camera.state.status === 'enabled') {
+                            this.camera
+                                .disable()
+                                .catch((err) => this.logger('error', `Error disabling camera after pemission revoked`, err));
+                        }
+                        if (trackType === TrackType.AUDIO &&
+                            this.microphone.state.status === 'enabled') {
+                            this.microphone
+                                .disable()
+                                .catch((err) => this.logger('error', `Error disabling microphone after pemission revoked`, err));
+                        }
                     });
                 }
             }
@@ -12745,11 +12968,11 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.12';
+const version = '0.3.14';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;
-const getLocationHint = (hintUrl = HINT_URL, timeout = 1500) => __awaiter(void 0, void 0, void 0, function* () {
+const getLocationHint = (hintUrl = HINT_URL, timeout = 2000) => __awaiter(void 0, void 0, void 0, function* () {
     const abortController = new AbortController();
     const timeoutId = setTimeout(() => abortController.abort(), timeout);
     try {
@@ -12762,7 +12985,7 @@ const getLocationHint = (hintUrl = HINT_URL, timeout = 1500) => __awaiter(void 0
         return awsPop.substring(0, 3); // AMS1-P2 -> AMS
     }
     catch (e) {
-        logger('error', `Failed to get location hint from ${HINT_URL}`, e);
+        logger('warn', `Failed to get location hint from ${HINT_URL}`, e);
         return 'ERR';
     }
     finally {