@stream-io/video-client 0.4.2 → 0.4.4

package/dist/index.cjs.js

@@ -6587,11 +6587,8 @@ class Publisher {
                     ? transceiver.sender.track.stop()
                     : (transceiver.sender.track.enabled = false);
                 // We don't need to notify SFU if unpublishing in response to remote soft mute
-                if (!this.state.localParticipant?.publishedTracks.includes(trackType)) {
-                    return;
-                }
-                else {
-                    return this.notifyTrackMuteStateChanged(undefined, transceiver.sender.track, trackType, true);
+                if (this.state.localParticipant?.publishedTracks.includes(trackType)) {
+                    await this.notifyTrackMuteStateChanged(undefined, transceiver.sender.track, trackType, true);
                 }
             }
         };
@@ -9814,6 +9811,14 @@ class DynascaleManager {
                         audioElement.play().catch((e) => {
                             this.logger('warn', `Failed to play stream`, e);
                         });
+                        // audio output device shall be set after the audio element is played
+                        // otherwise, the browser will not pick it up, and will always
+                        // play audio through the system's default device
+                        const { selectedDevice } = this.call.speaker.state;
+                        if (selectedDevice && 'setSinkId' in audioElement) {
+                            // @ts-expect-error setSinkId is not yet in the lib
+                            audioElement.setSinkId(selectedDevice);
+                        }
                     }
                 });
             });
@@ -9979,22 +9984,43 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
-const getDevices = (constraints) => {
+/**
+ * Returns an Observable that emits the list of available devices
+ * that meet the given constraints.
+ *
+ * @param constraints the constraints to use when requesting the devices.
+ * @param kind the kind of devices to enumerate.
+ */
+const getDevices = (constraints, kind) => {
     return new rxjs.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();
-            });
+        const enumerate = async () => {
+            let devices = await navigator.mediaDevices.enumerateDevices();
+            // some browsers report empty device labels (Firefox).
+            // in that case, we need to request permissions (via getUserMedia)
+            // to be able to get the device labels
+            const needsGetUserMedia = devices.some((device) => device.kind === kind && device.label === '');
+            if (needsGetUserMedia) {
+                let mediaStream;
+                try {
+                    mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
+                    devices = await navigator.mediaDevices.enumerateDevices();
+                }
+                finally {
+                    if (mediaStream)
+                        disposeOfMediaStream(mediaStream);
+                }
+            }
+            return devices;
+        };
+        enumerate()
+            .then((devices) => {
+            // notify subscribers and complete
+            subscriber.next(devices);
+            subscriber.complete();
         })
             .catch((error) => {
-            getLogger(['devices'])('error', 'Failed to get devices', error);
+            const logger = getLogger(['devices']);
+            logger('error', 'Failed to enumerate devices', error);
             subscriber.error(error);
         });
     });
@@ -10008,7 +10034,7 @@ const checkIfAudioOutputChangeSupported = () => {
     if (typeof document === 'undefined')
         return false;
     const element = document.createElement('audio');
-    return element.sinkId !== undefined;
+    return 'setSinkId' in element;
 };
 /**
  * The default constraints used to request audio devices.
@@ -10059,10 +10085,13 @@ const getDeviceChangeObserver = memoizedObservable(() => {
     }).pipe(rxjs.debounceTime(500), rxjs.concatMap(() => rxjs.from(navigator.mediaDevices.enumerateDevices())), rxjs.shareReplay(1));
 });
 const getAudioDevicesObserver = memoizedObservable(() => {
-    return rxjs.merge(getDevices(audioDeviceConstraints), getDeviceChangeObserver()).pipe(rxjs.shareReplay(1));
+    return rxjs.merge(getDevices(audioDeviceConstraints, 'audioinput'), getDeviceChangeObserver()).pipe(rxjs.shareReplay(1));
+});
+const getAudioOutputDevicesObserver = memoizedObservable(() => {
+    return rxjs.merge(getDevices(audioDeviceConstraints, 'audiooutput'), getDeviceChangeObserver()).pipe(rxjs.shareReplay(1));
 });
 const getVideoDevicesObserver = memoizedObservable(() => {
-    return rxjs.merge(getDevices(videoDeviceConstraints), getDeviceChangeObserver()).pipe(rxjs.shareReplay(1));
+    return rxjs.merge(getDevices(videoDeviceConstraints, 'videoinput'), getDeviceChangeObserver()).pipe(rxjs.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.
@@ -10080,7 +10109,7 @@ const getVideoDevices = () => {
  * 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)
  */
 const getAudioOutputDevices = () => {
-    return getAudioDevicesObserver().pipe(rxjs.map((values) => values.filter((d) => d.kind === 'audiooutput')));
+    return getAudioOutputDevicesObserver().pipe(rxjs.map((values) => values.filter((d) => d.kind === 'audiooutput')));
 };
 const getStream = async (constraints) => {
     try {
@@ -13963,7 +13992,7 @@ class StreamClient {
             });
         };
         this.getUserAgent = () => {
-            const version = "0.4.2" ;
+            const version = "0.4.4" ;
             return (this.userAgent ||
                 `stream-video-javascript-client-${this.node ? 'node' : 'browser'}-${version}`);
         };