@stream-io/video-client 0.3.0 → 0.3.1

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, takeWhile, filter, pairwise, tap, debounce, timer, map as map$2, Observable, debounceTime, concatMap, from, shareReplay, merge, combineLatest } from 'rxjs';
+import { ReplaySubject, BehaviorSubject, distinctUntilChanged as distinctUntilChanged$1, Observable, debounceTime, concatMap, from, shareReplay, merge, map as map$2, combineLatest, filter, pairwise, takeWhile, tap, debounce, timer } from 'rxjs';
 import * as SDP from 'sdp-transform';
 import WebSocket from 'isomorphic-ws';
 import { take, map as map$1, distinctUntilChanged } from 'rxjs/operators';
@@ -9514,6 +9514,591 @@ const getClientDetails = () => {
     };
 };
 
+class InputMediaDeviceManagerState {
+    constructor() {
+        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();
+    }
+    /**
+     * 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();
+        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
+            .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);
+    }
+    catch (e) {
+        getLogger(['devices'])('error', `Failed get user media`, {
+            error: e,
+            constraints: constraints,
+        });
+        throw e;
+    }
+});
+/**
+ * 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));
+    }
+    catch (e) {
+        getLogger(['devices'])('error', 'Failed to get screen share stream', e);
+        throw e;
+    }
+});
+const watchForDisconnectedDevice = (kind, deviceId$) => {
+    let devices$;
+    switch (kind) {
+        case 'audioinput':
+            devices$ = getAudioDevices();
+            break;
+        case 'videoinput':
+            devices$ = getVideoDevices();
+            break;
+        case 'audiooutput':
+            devices$ = getAudioOutputDevices();
+            break;
+    }
+    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);
+    }
+    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 InputMediaDeviceManager {
+    constructor(call, state) {
+        this.call = call;
+        this.state = state;
+    }
+    /**
+     * Lists the available audio/video 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 this.getDevices();
+    }
+    /**
+     * Starts camera/microphone
+     */
+    enable() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.state.status === 'enabled') {
+                return;
+            }
+            yield this.startStream();
+            this.state.setStatus('enabled');
+        });
+    }
+    /**
+     * Stops camera/microphone
+     * @returns
+     */
+    disable() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.state.status === 'disabled') {
+                return;
+            }
+            yield this.stopStream();
+            this.state.setStatus('disabled');
+        });
+    }
+    /**
+     * If current device statis is disabled, it will enable the device, else it will disable it.
+     * @returns
+     */
+    toggle() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.state.status === 'enabled') {
+                return this.disable();
+            }
+            else {
+                return this.enable();
+            }
+        });
+    }
+    /**
+     * Select device
+     *
+     * Note: this method is not supported in React Native
+     *
+     * @param deviceId
+     */
+    select(deviceId) {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (isReactNative()) {
+                throw new Error('This method is not supported in React Native');
+            }
+            if (deviceId === this.state.selectedDevice) {
+                return;
+            }
+            this.state.setDevice(deviceId);
+            yield this.applySettingsToStream();
+        });
+    }
+    applySettingsToStream() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.state.status === 'enabled') {
+                yield this.stopStream();
+                yield this.startStream();
+            }
+        });
+    }
+    stopStream() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.state.mediaStream) {
+                return;
+            }
+            if (this.call.state.callingState === CallingState.JOINED) {
+                yield this.stopPublishStream();
+            }
+            else if (this.state.mediaStream) {
+                disposeOfMediaStream(this.state.mediaStream);
+            }
+            this.state.setMediaStream(undefined);
+        });
+    }
+    startStream() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.state.mediaStream) {
+                return;
+            }
+            const constraints = { deviceId: this.state.selectedDevice };
+            const stream = yield this.getStream(constraints);
+            if (this.call.state.callingState === CallingState.JOINED) {
+                yield this.publishStream(stream);
+            }
+            this.state.setMediaStream(stream);
+        });
+    }
+}
+
+class CameraManager extends InputMediaDeviceManager {
+    constructor(call) {
+        super(call, new CameraManagerState());
+    }
+    /**
+     * Select the camera direaction
+     * @param direction
+     */
+    selectDirection(direction) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.state.setDirection(direction);
+            // Providing both device id and direction doesn't work, so we deselect the device
+            this.state.setDevice(undefined);
+            yield this.applySettingsToStream();
+        });
+    }
+    /**
+     * Flips the camera direction: if it's front it will change to back, if it's back, it will change to front.
+     *
+     * Note: if there is no available camera with the desired direction, this method will do nothing.
+     * @returns
+     */
+    flip() {
+        return __awaiter(this, void 0, void 0, function* () {
+            const newDirection = this.state.direction === 'front' ? 'back' : 'front';
+            this.selectDirection(newDirection);
+        });
+    }
+    getDevices() {
+        return getVideoDevices();
+    }
+    getStream(constraints) {
+        // We can't set both device id and facing mode
+        // Device id has higher priority
+        if (!constraints.deviceId && this.state.direction) {
+            constraints.facingMode =
+                this.state.direction === 'front' ? 'user' : 'environment';
+        }
+        return getVideoStream(constraints);
+    }
+    publishStream(stream) {
+        return this.call.publishVideoStream(stream);
+    }
+    stopPublishStream() {
+        return this.call.stopPublish(TrackType.VIDEO);
+    }
+    /**
+     * Disables the video tracks of the camera
+     */
+    pause() {
+        var _a;
+        (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getVideoTracks().forEach((track) => {
+            track.enabled = false;
+        });
+    }
+    /**
+     * (Re)enables the video tracks of the camera
+     */
+    resume() {
+        var _a;
+        (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getVideoTracks().forEach((track) => {
+            track.enabled = true;
+        });
+    }
+}
+
+class MicrophoneManagerState extends InputMediaDeviceManagerState {
+    getDeviceIdFromStream(stream) {
+        var _a;
+        return (_a = stream.getAudioTracks()[0]) === null || _a === void 0 ? void 0 : _a.getSettings().deviceId;
+    }
+}
+
+class MicrophoneManager extends InputMediaDeviceManager {
+    constructor(call) {
+        super(call, new MicrophoneManagerState());
+    }
+    getDevices() {
+        return getAudioDevices();
+    }
+    getStream(constraints) {
+        return getAudioStream(constraints);
+    }
+    publishStream(stream) {
+        return this.call.publishAudioStream(stream);
+    }
+    stopPublishStream() {
+        return this.call.stopPublish(TrackType.AUDIO);
+    }
+    /**
+     * Disables the audio tracks of the microphone
+     */
+    pause() {
+        var _a;
+        (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getAudioTracks().forEach((track) => {
+            track.enabled = false;
+        });
+    }
+    /**
+     * (Re)enables the audio tracks of the microphone
+     */
+    resume() {
+        var _a;
+        (_a = this.state.mediaStream) === null || _a === void 0 ? void 0 : _a.getAudioTracks().forEach((track) => {
+            track.enabled = true;
+        });
+    }
+}
+
 /**
  * An object representation of a `Call`.
  */
@@ -9680,7 +10265,7 @@ class Call {
          * @returns a promise which resolves once the call join-flow has finished.
          */
         this.join = (data) => __awaiter(this, void 0, void 0, function* () {
-            var _e, _f, _g;
+            var _e, _f, _g, _h;
             const callingState = this.state.callingState;
             if ([CallingState.JOINED, CallingState.JOINING].includes(callingState)) {
                 this.logger('warn', 'Join method called twice, you should only call this once');
@@ -9949,6 +10534,11 @@ class Call {
                 this.state.setServerSidePins(pins);
                 this.reconnectAttempts = 0; // reset the reconnect attempts counter
                 this.state.setCallingState(CallingState.JOINED);
+                // React uses a different device management for now
+                if (((_h = getSdkInfo()) === null || _h === void 0 ? void 0 : _h.type) !== SdkType.REACT) {
+                    this.initCamera();
+                    this.initMic();
+                }
                 // 3. once we have the "joinResponse", and possibly reconciled the local state
                 // we schedule a fast subscription update for all remote participants
                 // that were visible before we reconnected or migrated to a new SFU.
@@ -10071,9 +10661,9 @@ class Call {
          * @param trackType the track type to stop publishing.
          */
         this.stopPublish = (trackType) => __awaiter(this, void 0, void 0, function* () {
-            var _h;
+            var _j;
             this.logger('info', `stopPublish ${TrackType[trackType]}`);
-            yield ((_h = this.publisher) === null || _h === void 0 ? void 0 : _h.unpublishStream(trackType));
+            yield ((_j = this.publisher) === null || _j === void 0 ? void 0 : _j.unpublishStream(trackType));
         });
         /**
          * Update track subscription configuration for one or more participants.
@@ -10174,6 +10764,8 @@ class Call {
          *
          *
          * @param deviceId the selected device, pass `undefined` to clear the device selection
+         *
+         * @deprecated use call.microphone.select
          */
         this.setAudioDevice = (deviceId) => {
             if (!this.sfuClient)
@@ -10188,6 +10780,8 @@ class Call {
          * This method only stores the selection, if you want to start publishing a media stream call the [`publishVideoStream` method](#publishvideostream) that will set `videoDeviceId` as well.
          *
          * @param deviceId the selected device, pass `undefined` to clear the device selection
+         *
+         * @deprecated use call.camera.select
          */
         this.setVideoDevice = (deviceId) => {
             if (!this.sfuClient)
@@ -10220,8 +10814,8 @@ class Call {
          * @returns
          */
         this.updatePublishQuality = (enabledRids) => __awaiter(this, void 0, void 0, function* () {
-            var _j;
-            return (_j = this.publisher) === null || _j === void 0 ? void 0 : _j.updateVideoPublishQuality(enabledRids);
+            var _k;
+            return (_k = this.publisher) === null || _k === void 0 ? void 0 : _k.updateVideoPublishQuality(enabledRids);
         });
         this.assertCallJoined = () => {
             return new Promise((resolve) => {
@@ -10564,6 +11158,8 @@ class Call {
         this.leaveCallHooks.push(registerEventHandlers(this, this.state, this.dispatcher));
         this.registerEffects();
         this.leaveCallHooks.push(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);
     }
     registerEffects() {
         this.leaveCallHooks.push(
@@ -10671,6 +11267,64 @@ class Call {
         var _a;
         return ((_a = this.state.createdBy) === null || _a === void 0 ? void 0 : _a.id) === this.currentUserId;
     }
+    initCamera() {
+        var _a, _b, _c;
+        if (((_a = this.state.localParticipant) === null || _a === void 0 ? void 0 : _a.videoStream) ||
+            !this.permissionsContext.hasPermission('send-video')) {
+            return;
+        }
+        // Set camera direction if it's not yet set
+        // This will also start publishing if camera is enabled
+        if (!this.camera.state.direction && !this.camera.state.selectedDevice) {
+            let defaultDirection = 'front';
+            const backendSetting = (_b = this.state.settings) === null || _b === void 0 ? void 0 : _b.video.camera_facing;
+            if (backendSetting) {
+                defaultDirection = backendSetting === 'front' ? 'front' : 'back';
+            }
+            this.camera.selectDirection(defaultDirection);
+        }
+        else if (this.camera.state.status === 'enabled') {
+            // Publish already started media streams (this is the case if there is a lobby screen before join)
+            // Wait for media stream
+            this.camera.state.mediaStream$
+                .pipe(takeWhile((s) => s === undefined, true))
+                .subscribe((stream) => {
+                var _a;
+                if (!((_a = this.state.localParticipant) === null || _a === void 0 ? void 0 : _a.videoStream)) {
+                    this.publishVideoStream(stream);
+                }
+            });
+        }
+        // Apply backend config (this is the case if there is no lobby screen before join)
+        if (this.camera.state.status === undefined &&
+            ((_c = this.state.settings) === null || _c === void 0 ? void 0 : _c.video.camera_default_on)) {
+            void this.camera.enable();
+        }
+    }
+    initMic() {
+        var _a, _b;
+        if (((_a = this.state.localParticipant) === null || _a === void 0 ? void 0 : _a.audioStream) ||
+            !this.permissionsContext.hasPermission('send-audio')) {
+            return;
+        }
+        // Publish already started media streams (this is the case if there is a lobby screen before join)
+        if (this.microphone.state.status === 'enabled') {
+            // Wait for media stream
+            this.microphone.state.mediaStream$
+                .pipe(takeWhile((s) => s === undefined, true))
+                .subscribe((stream) => {
+                var _a;
+                if (!((_a = this.state.localParticipant) === null || _a === void 0 ? void 0 : _a.audioStream)) {
+                    this.publishAudioStream(stream);
+                }
+            });
+        }
+        // Apply backend config (this is the case if there is no lobby screen before join)
+        if (this.microphone.state.status === undefined &&
+            ((_b = this.state.settings) === null || _b === void 0 ? void 0 : _b.audio.mic_default_on)) {
+            void this.microphone.enable();
+        }
+    }
 }
 
 var https = null;
@@ -11781,7 +12435,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.0';
+const version = '0.3.1';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;
@@ -12755,254 +13409,6 @@ class StreamVideoServerClient extends StreamVideoClient {
     }
 }
 
-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);
-    }
-    catch (e) {
-        getLogger(['devices'])('error', `Failed get user media`, {
-            error: e,
-            constraints: constraints,
-        });
-        throw e;
-    }
-});
-/**
- * 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));
-    }
-    catch (e) {
-        getLogger(['devices'])('error', 'Failed to get screen share stream', e);
-        throw e;
-    }
-});
-const watchForDisconnectedDevice = (kind, deviceId$) => {
-    let devices$;
-    switch (kind) {
-        case 'audioinput':
-            devices$ = getAudioDevices();
-            break;
-        case 'videoinput':
-            devices$ = getVideoDevices();
-            break;
-        case 'audiooutput':
-            devices$ = getAudioOutputDevices();
-            break;
-    }
-    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);
-    }
-    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();
-    }
-};
-
 const DETECTION_FREQUENCY_IN_MS = 500;
 const AUDIO_LEVEL_THRESHOLD = 150;
 const FFT_SIZE = 128;
@@ -13083,5 +13489,5 @@ var browsers = /*#__PURE__*/Object.freeze({
     isSafari: isSafari
 });
 
-export { AudioSettingsDefaultDeviceEnum, AudioSettingsRequestDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CreateDeviceRequestPushProviderEnum, DebounceType, ErrorFromResponse, OwnCapability, RecordSettingsModeEnum, RecordSettingsQualityEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, events as SfuEvents, models as SfuModels, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoServerClient, StreamVideoWriteableStateStore, TranscriptionSettingsModeEnum, TranscriptionSettingsRequestModeEnum, VideoSettingsCameraFacingEnum, VideoSettingsRequestCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceInfo, getLogger, getOSInfo, getScreenShareStream, getSdkInfo, getVideoDevices, getVideoStream, isStreamVideoLocalParticipant, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setSdkInfo, speakerLayoutSortPreset, speaking, watchForAddedDefaultAudioDevice, watchForAddedDefaultAudioOutputDevice, watchForAddedDefaultVideoDevice, watchForDisconnectedAudioDevice, watchForDisconnectedAudioOutputDevice, watchForDisconnectedVideoDevice };
+export { AudioSettingsDefaultDeviceEnum, AudioSettingsRequestDefaultDeviceEnum, browsers as Browsers, Call, CallState, CallType, CallTypes, CallingState, CameraManager, CreateDeviceRequestPushProviderEnum, DebounceType, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, MicrophoneManager, OwnCapability, RecordSettingsModeEnum, RecordSettingsQualityEnum, RecordSettingsRequestModeEnum, RecordSettingsRequestQualityEnum, rxUtils as RxUtils, events as SfuEvents, models as SfuModels, StreamSfuClient, StreamVideoClient, StreamVideoReadOnlyStateStore, StreamVideoServerClient, StreamVideoWriteableStateStore, TranscriptionSettingsModeEnum, TranscriptionSettingsRequestModeEnum, VideoSettingsCameraFacingEnum, VideoSettingsRequestCameraFacingEnum, ViewportTracker, VisibilityState, checkIfAudioOutputChangeSupported, combineComparators, conditional, createSoundDetector, defaultSortPreset, descending, disposeOfMediaStream, dominantSpeaker, getAudioDevices, getAudioOutputDevices, getAudioStream, getClientDetails, getDeviceInfo, getLogger, getOSInfo, getScreenShareStream, getSdkInfo, getVideoDevices, getVideoStream, isStreamVideoLocalParticipant, livestreamOrAudioRoomSortPreset, logLevels, logToConsole, name, noopComparator, pinned, publishingAudio, publishingVideo, reactionType, role, screenSharing, setDeviceInfo, setLogLevel, setLogger, setOSInfo, setSdkInfo, speakerLayoutSortPreset, speaking, watchForAddedDefaultAudioDevice, watchForAddedDefaultAudioOutputDevice, watchForAddedDefaultVideoDevice, watchForDisconnectedAudioDevice, watchForDisconnectedAudioOutputDevice, watchForDisconnectedVideoDevice };
 //# sourceMappingURL=index.browser.es.js.map