@stream-io/video-client 0.3.0 → 0.3.1

package/dist/index.cjs.js

@@ -9537,6 +9537,591 @@ const getClientDetails = () => {
     };
 };
 
+class InputMediaDeviceManagerState {
+    constructor() {
+        this.statusSubject = new rxjs.BehaviorSubject(undefined);
+        this.mediaStreamSubject = new rxjs.BehaviorSubject(undefined);
+        this.selectedDeviceSubject = new rxjs.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(rxjs.distinctUntilChanged());
+        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 rxjs.BehaviorSubject(undefined);
+        this.direction$ = this.directionSubject
+            .asObservable()
+            .pipe(rxjs.distinctUntilChanged());
+    }
+    /**
+     * 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 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();
+            });
+        })
+            .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 rxjs.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(rxjs.debounceTime(500), rxjs.concatMap(() => rxjs.from(navigator.mediaDevices.enumerateDevices())), rxjs.shareReplay(1));
+const audioDevices$ = rxjs.merge(getDevices(audioDeviceConstraints), deviceChange$).pipe(rxjs.shareReplay(1));
+const videoDevices$ = rxjs.merge(getDevices(videoDeviceConstraints), deviceChange$).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.
+ *
+ * @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(rxjs.map((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(rxjs.map((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(rxjs.map((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 rxjs.combineLatest([devices$, deviceId$]).pipe(rxjs.filter(([devices, deviceId]) => !!deviceId && !devices.find((d) => d.deviceId === deviceId)), rxjs.map(() => 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(rxjs.pairwise(), rxjs.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);
+    }), rxjs.map(() => 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 === exports.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 === exports.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`.
  */
@@ -9703,7 +10288,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 ([exports.CallingState.JOINED, exports.CallingState.JOINING].includes(callingState)) {
                 this.logger('warn', 'Join method called twice, you should only call this once');
@@ -9972,6 +10557,11 @@ class Call {
                 this.state.setServerSidePins(pins);
                 this.reconnectAttempts = 0; // reset the reconnect attempts counter
                 this.state.setCallingState(exports.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.
@@ -10094,9 +10684,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.
@@ -10197,6 +10787,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)
@@ -10211,6 +10803,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)
@@ -10243,8 +10837,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) => {
@@ -10587,6 +11181,8 @@ class Call {
         this.leaveCallHooks.push(registerEventHandlers(this, this.state, this.dispatcher));
         this.registerEffects();
         this.leaveCallHooks.push(createSubscription(this.trackSubscriptionsSubject.pipe(rxjs.debounce((v) => rxjs.timer(v.type)), rxjs.map((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(
@@ -10694,6 +11290,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(rxjs.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(rxjs.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();
+        }
+    }
 }
 
 class InsightMetrics {
@@ -11805,7 +12459,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/`;
@@ -12779,254 +13433,6 @@ class StreamVideoServerClient extends StreamVideoClient {
     }
 }
 
-const getDevices = (constraints) => {
-    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();
-            });
-        })
-            .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 rxjs.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(rxjs.debounceTime(500), rxjs.concatMap(() => rxjs.from(navigator.mediaDevices.enumerateDevices())), rxjs.shareReplay(1));
-const audioDevices$ = rxjs.merge(getDevices(audioDeviceConstraints), deviceChange$).pipe(rxjs.shareReplay(1));
-const videoDevices$ = rxjs.merge(getDevices(videoDeviceConstraints), deviceChange$).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.
- *
- * @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(rxjs.map((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(rxjs.map((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(rxjs.map((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 rxjs.combineLatest([devices$, deviceId$]).pipe(rxjs.filter(([devices, deviceId]) => !!deviceId && !devices.find((d) => d.deviceId === deviceId)), rxjs.map(() => 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(rxjs.pairwise(), rxjs.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);
-    }), rxjs.map(() => 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;
@@ -13118,8 +13524,12 @@ exports.Call = Call;
 exports.CallState = CallState;
 exports.CallType = CallType;
 exports.CallTypes = CallTypes;
+exports.CameraManager = CameraManager;
 exports.CreateDeviceRequestPushProviderEnum = CreateDeviceRequestPushProviderEnum;
 exports.ErrorFromResponse = ErrorFromResponse;
+exports.InputMediaDeviceManager = InputMediaDeviceManager;
+exports.InputMediaDeviceManagerState = InputMediaDeviceManagerState;
+exports.MicrophoneManager = MicrophoneManager;
 exports.OwnCapability = OwnCapability;
 exports.RecordSettingsModeEnum = RecordSettingsModeEnum;
 exports.RecordSettingsQualityEnum = RecordSettingsQualityEnum;