@stream-io/video-client 0.3.12 → 0.3.13

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+### [0.3.13](https://github.com/GetStream/stream-video-js/compare/client0.3.12...client0.3.13) (2023-08-31)
+
+
+### Features
+
+* speaker management ([#1013](https://github.com/GetStream/stream-video-js/issues/1013)) ([05af437](https://github.com/GetStream/stream-video-js/commit/05af437181175758c3295fbd70ae6d81d6c65595))
+
 ### [0.3.12](https://github.com/GetStream/stream-video-js/compare/client0.3.11...client0.3.12) (2023-08-31)
 
 

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';
@@ -9510,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();
             };
         };
@@ -9665,6 +9676,127 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
+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) => {
         navigator.mediaDevices
@@ -10060,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());
@@ -10304,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`.
  */
@@ -10978,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)
@@ -11452,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(
@@ -12741,7 +12865,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.12';
+const version = '0.3.13';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;