@stream-io/video-client 0.3.0 → 0.3.2

package/dist/index.browser.es.js

@@ -4,11 +4,11 @@ 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 { UAParser } from 'ua-parser-js';
 import WebSocket from 'isomorphic-ws';
 import { take, map as map$1, distinctUntilChanged } from 'rxjs/operators';
-import { UAParser } from 'ua-parser-js';
 import { fromByteArray } from 'base64-js';
 
 /**
@@ -6266,6 +6266,56 @@ function getIceCandidate(candidate) {
     }
 }
 
+let sdkInfo;
+let osInfo;
+let deviceInfo;
+const setSdkInfo = (info) => {
+    sdkInfo = info;
+};
+const getSdkInfo = () => {
+    return sdkInfo;
+};
+const setOSInfo = (info) => {
+    osInfo = info;
+};
+const getOSInfo = () => {
+    return osInfo;
+};
+const setDeviceInfo = (info) => {
+    deviceInfo = info;
+};
+const getDeviceInfo = () => {
+    return deviceInfo;
+};
+const getClientDetails = () => {
+    if (isReactNative()) {
+        // Since RN doesn't support web, sharing browser info is not required
+        return {
+            sdk: getSdkInfo(),
+            os: getOSInfo(),
+            device: getDeviceInfo(),
+        };
+    }
+    const userAgent = new UAParser(navigator.userAgent);
+    const { browser, os, device, cpu } = userAgent.getResult();
+    return {
+        sdk: getSdkInfo(),
+        browser: {
+            name: browser.name || navigator.userAgent,
+            version: browser.version || '',
+        },
+        os: {
+            name: os.name || '',
+            version: os.version || '',
+            architecture: cpu.architecture || '',
+        },
+        device: {
+            name: `${device.vendor || ''} ${device.model || ''} ${device.type || ''}`,
+            version: '',
+        },
+    };
+};
+
 const DEFAULT_BITRATE = 1250000;
 const defaultTargetResolution = {
     bitrate: DEFAULT_BITRATE,
@@ -6280,9 +6330,11 @@ const defaultTargetResolution = {
  * @param targetResolution the expected target resolution.
  */
 const findOptimalVideoLayers = (videoTrack, targetResolution = defaultTargetResolution) => {
+    var _a;
     const optimalVideoLayers = [];
     const settings = videoTrack.getSettings();
     const { width: w = 0, height: h = 0 } = settings;
+    const isRNIos = isReactNative() && ((_a = getOSInfo()) === null || _a === void 0 ? void 0 : _a.name.toLowerCase()) === 'ios';
     const maxBitrate = getComputedMaxBitrate(targetResolution, w, h);
     let downscaleFactor = 1;
     ['f', 'h', 'q'].forEach((rid) => {
@@ -6296,10 +6348,11 @@ const findOptimalVideoLayers = (videoTrack, targetResolution = defaultTargetReso
             height: Math.round(h / downscaleFactor),
             maxBitrate: Math.round(maxBitrate / downscaleFactor),
             scaleResolutionDownBy: downscaleFactor,
+            // Simulcast on iOS React-Native requires all encodings to share the same framerate
             maxFramerate: {
                 f: 30,
-                h: 25,
-                q: 20,
+                h: isRNIos ? 30 : 25,
+                q: isRNIos ? 30 : 20,
             }[rid],
         });
         downscaleFactor *= 2;
@@ -6498,6 +6551,7 @@ class Publisher {
          * @param opts
          */
         this.publishStream = (mediaStream, track, trackType, opts = {}) => __awaiter(this, void 0, void 0, function* () {
+            var _a;
             if (track.readyState === 'ended') {
                 throw new Error(`Can't publish a track that has ended already.`);
             }
@@ -6525,7 +6579,14 @@ class Publisher {
                 const videoEncodings = trackType === TrackType.VIDEO
                     ? findOptimalVideoLayers(track, targetResolution)
                     : undefined;
-                const codecPreferences = this.getCodecPreferences(trackType, opts.preferredCodec);
+                let preferredCodec = opts.preferredCodec;
+                if (!preferredCodec && trackType === TrackType.VIDEO) {
+                    const isRNAndroid = isReactNative() && ((_a = getOSInfo()) === null || _a === void 0 ? void 0 : _a.name.toLowerCase()) === 'android';
+                    if (isRNAndroid) {
+                        preferredCodec = 'VP8';
+                    }
+                }
+                const codecPreferences = this.getCodecPreferences(trackType, preferredCodec);
                 // listen for 'ended' event on the track as it might be ended abruptly
                 // by an external factor as permission revokes, device disconnected, etc.
                 // keep in mind that `track.stop()` doesn't trigger this event.
@@ -6619,9 +6680,9 @@ class Publisher {
             });
         };
         this.updateVideoPublishQuality = (enabledRids) => __awaiter(this, void 0, void 0, function* () {
-            var _a;
+            var _b;
             logger$3('info', 'Update publish quality, requested rids by SFU:', enabledRids);
-            const videoSender = (_a = this.transceiverRegistry[TrackType.VIDEO]) === null || _a === void 0 ? void 0 : _a.sender;
+            const videoSender = (_b = this.transceiverRegistry[TrackType.VIDEO]) === null || _b === void 0 ? void 0 : _b.sender;
             if (!videoSender) {
                 logger$3('warn', 'Update publish quality, no video sender found.');
                 return;
@@ -6719,8 +6780,8 @@ class Publisher {
          * @param options the optional offer options to use.
          */
         this.negotiate = (options) => __awaiter(this, void 0, void 0, function* () {
-            var _b;
-            this.isIceRestarting = (_b = options === null || options === void 0 ? void 0 : options.iceRestart) !== null && _b !== void 0 ? _b : false;
+            var _c;
+            this.isIceRestarting = (_c = options === null || options === void 0 ? void 0 : options.iceRestart) !== null && _c !== void 0 ? _c : false;
             const offer = yield this.pc.createOffer(options);
             offer.sdp = this.mungeCodecs(offer.sdp);
             const trackInfos = this.getCurrentTrackInfos(offer.sdp);
@@ -6758,15 +6819,6 @@ class Publisher {
         this.mungeCodecs = (sdp) => {
             if (sdp) {
                 sdp = toggleDtx(sdp, this.isDtxEnabled);
-                if (isReactNative()) {
-                    if (this.preferredVideoCodec) {
-                        sdp = setPreferredCodec(sdp, 'video', this.preferredVideoCodec);
-                    }
-                    sdp = setPreferredCodec(sdp, 'audio', this.isRedEnabled ? 'red' : 'opus');
-                    if (!this.isRedEnabled) {
-                        sdp = removeCodec(sdp, 'audio', 'red');
-                    }
-                }
             }
             return sdp;
         };
@@ -9464,195 +9516,730 @@ const CallTypes = new CallTypesRegistry([
     }),
 ]);
 
-let sdkInfo;
-let osInfo;
-let deviceInfo;
-const setSdkInfo = (info) => {
-    sdkInfo = info;
-};
-const getSdkInfo = () => {
-    return sdkInfo;
-};
-const setOSInfo = (info) => {
-    osInfo = info;
-};
-const getOSInfo = () => {
-    return osInfo;
-};
-const setDeviceInfo = (info) => {
-    deviceInfo = info;
-};
-const getDeviceInfo = () => {
-    return deviceInfo;
-};
-const getClientDetails = () => {
-    if (isReactNative()) {
-        // Since RN doesn't support web, sharing browser info is not required
-        return {
-            sdk: getSdkInfo(),
-            os: getOSInfo(),
-            device: getDeviceInfo(),
-        };
-    }
-    const userAgent = new UAParser(navigator.userAgent);
-    const { browser, os, device, cpu } = userAgent.getResult();
-    return {
-        sdk: getSdkInfo(),
-        browser: {
-            name: browser.name || navigator.userAgent,
-            version: browser.version || '',
-        },
-        os: {
-            name: os.name || '',
-            version: os.version || '',
-            architecture: cpu.architecture || '',
-        },
-        device: {
-            name: `${device.vendor || ''} ${device.model || ''} ${device.type || ''}`,
-            version: '',
-        },
-    };
-};
-
-/**
- * An object representation of a `Call`.
- */
-class Call {
-    /**
-     * Constructs a new `Call` instance.
-     *
-     * NOTE: Don't call the constructor directly, instead
-     * Use the [`StreamVideoClient.call`](./StreamVideoClient.md/#call)
-     * method to construct a `Call` instance.
-     */
-    constructor({ type, id, streamClient, members, ownCapabilities, sortParticipantsBy, clientStore, ringing = false, watching = false, }) {
-        /**
-         * ViewportTracker instance
-         */
-        this.viewportTracker = new ViewportTracker();
-        /**
-         * The state of this call.
-         */
-        this.state = new CallState();
-        /**
-         * The permissions context of this call.
-         */
-        this.permissionsContext = new PermissionsContext();
-        /**
-         * The event dispatcher instance dedicated to this Call instance.
-         * @private
-         */
-        this.dispatcher = new Dispatcher();
-        this.trackSubscriptionsSubject = new BehaviorSubject({ type: DebounceType.MEDIUM, data: [] });
-        this.reconnectAttempts = 0;
-        this.maxReconnectAttempts = 10;
-        /**
-         * A list hooks/functions to invoke when the call is left.
-         * A typical use case is to clean up some global event handlers.
-         * @private
-         */
-        this.leaveCallHooks = [];
-        this.streamClientEventHandlers = new Map();
-        /**
-         * Leave the call and stop the media streams that were published by the call.
-         */
-        this.leave = ({ reject = false } = {}) => __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d;
-            const callingState = this.state.callingState;
-            if (callingState === CallingState.LEFT) {
-                throw new Error('Cannot leave call that has already been left.');
-            }
-            if (callingState === CallingState.JOINING) {
-                yield this.assertCallJoined();
-            }
-            if (this.ringing) {
-                // I'm the one who started the call, so I should cancel it.
-                const hasOtherParticipants = this.state.remoteParticipants.length > 0;
-                if (this.isCreatedByMe && !hasOtherParticipants) {
-                    // Signals other users that I have cancelled my call to them
-                    // before they accepted it.
-                    yield this.reject();
-                }
-                else if (reject && callingState === CallingState.RINGING) {
-                    // Signals other users that I have rejected the incoming call.
-                    yield this.reject();
-                }
-            }
-            (_a = this.statsReporter) === null || _a === void 0 ? void 0 : _a.stop();
-            this.statsReporter = undefined;
-            (_b = this.subscriber) === null || _b === void 0 ? void 0 : _b.close();
-            this.subscriber = undefined;
-            (_c = this.publisher) === null || _c === void 0 ? void 0 : _c.close();
-            this.publisher = undefined;
-            (_d = this.sfuClient) === null || _d === void 0 ? void 0 : _d.close();
-            this.sfuClient = undefined;
-            this.dispatcher.offAll();
-            // Call all leave call hooks, e.g. to clean up global event handlers
-            this.leaveCallHooks.forEach((hook) => hook());
-            this.clientStore.unregisterCall(this);
-            this.state.setCallingState(CallingState.LEFT);
-        });
+class InputMediaDeviceManagerState {
+    constructor() {
+        this.statusSubject = new BehaviorSubject(undefined);
+        this.mediaStreamSubject = new BehaviorSubject(undefined);
+        this.selectedDeviceSubject = new BehaviorSubject(undefined);
         /**
-         * Loads the information about the call.
+         * Gets the current value of an observable, or undefined if the observable has
+         * not emitted a value yet.
          *
-         * @param params.ring if set to true, a `call.ring` event will be sent to the call members.
-         * @param params.notify if set to true, a `call.notification` event will be sent to the call members.
-         * @param params.members_limit the members limit.
+         * @param observable$ the observable to get the value from.
          */
-        this.get = (params) => __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.streamClient.get(this.streamClientBasePath, params);
-            if ((params === null || params === void 0 ? void 0 : params.ring) && !this.ringing) {
-                this.ringingSubject.next(true);
-            }
-            this.state.updateFromCallResponse(response.call);
-            this.state.setMembers(response.members);
-            this.state.setOwnCapabilities(response.own_capabilities);
-            if (this.streamClient._hasConnectionID()) {
-                this.watching = true;
-                this.clientStore.registerCall(this);
-            }
-            return response;
-        });
+        this.getCurrentValue = getCurrentValue;
         /**
-         * Loads the information about the call and creates it if it doesn't exist.
+         * 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.
          *
-         * @param data the data to create the call with.
-         */
-        this.getOrCreate = (data) => __awaiter(this, void 0, void 0, function* () {
-            const response = yield this.streamClient.post(this.streamClientBasePath, data);
-            if ((data === null || data === void 0 ? void 0 : data.ring) && !this.ringing) {
-                this.ringingSubject.next(true);
-            }
-            this.state.updateFromCallResponse(response.call);
-            this.state.setMembers(response.members);
-            this.state.setOwnCapabilities(response.own_capabilities);
-            if (this.streamClient._hasConnectionID()) {
-                this.watching = true;
-                this.clientStore.registerCall(this);
-            }
-            return response;
-        });
-        /**
-         * Creates a call
+         * @internal
          *
-         * @param data the data to create the call with.
-         */
-        this.create = (data) => __awaiter(this, void 0, void 0, function* () {
-            return this.getOrCreate(data);
-        });
-        /**
-         * A shortcut for {@link Call.get} with `ring` parameter set to `true`.
-         * Will send a `call.ring` event to the call members.
-         */
-        this.ring = () => __awaiter(this, void 0, void 0, function* () {
-            return yield this.get({ ring: true });
-        });
-        /**
-         * A shortcut for {@link Call.get} with `notify` parameter set to `true`.
-         * Will send a `call.notification` event to the call members.
+         * @param subject the subject to update.
+         * @param update the update to apply to the subject.
+         * @return the updated value.
          */
-        this.notify = () => __awaiter(this, void 0, void 0, function* () {
-            return yield this.get({ notify: true });
+        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`.
+ */
+class Call {
+    /**
+     * Constructs a new `Call` instance.
+     *
+     * NOTE: Don't call the constructor directly, instead
+     * Use the [`StreamVideoClient.call`](./StreamVideoClient.md/#call)
+     * method to construct a `Call` instance.
+     */
+    constructor({ type, id, streamClient, members, ownCapabilities, sortParticipantsBy, clientStore, ringing = false, watching = false, }) {
+        /**
+         * ViewportTracker instance
+         */
+        this.viewportTracker = new ViewportTracker();
+        /**
+         * The state of this call.
+         */
+        this.state = new CallState();
+        /**
+         * The permissions context of this call.
+         */
+        this.permissionsContext = new PermissionsContext();
+        /**
+         * The event dispatcher instance dedicated to this Call instance.
+         * @private
+         */
+        this.dispatcher = new Dispatcher();
+        this.trackSubscriptionsSubject = new BehaviorSubject({ type: DebounceType.MEDIUM, data: [] });
+        this.reconnectAttempts = 0;
+        this.maxReconnectAttempts = 10;
+        /**
+         * A list hooks/functions to invoke when the call is left.
+         * A typical use case is to clean up some global event handlers.
+         * @private
+         */
+        this.leaveCallHooks = [];
+        this.streamClientEventHandlers = new Map();
+        /**
+         * Leave the call and stop the media streams that were published by the call.
+         */
+        this.leave = ({ reject = false } = {}) => __awaiter(this, void 0, void 0, function* () {
+            var _a, _b, _c, _d;
+            const callingState = this.state.callingState;
+            if (callingState === CallingState.LEFT) {
+                throw new Error('Cannot leave call that has already been left.');
+            }
+            if (callingState === CallingState.JOINING) {
+                yield this.assertCallJoined();
+            }
+            if (this.ringing) {
+                // I'm the one who started the call, so I should cancel it.
+                const hasOtherParticipants = this.state.remoteParticipants.length > 0;
+                if (this.isCreatedByMe && !hasOtherParticipants) {
+                    // Signals other users that I have cancelled my call to them
+                    // before they accepted it.
+                    yield this.reject();
+                }
+                else if (reject && callingState === CallingState.RINGING) {
+                    // Signals other users that I have rejected the incoming call.
+                    yield this.reject();
+                }
+            }
+            (_a = this.statsReporter) === null || _a === void 0 ? void 0 : _a.stop();
+            this.statsReporter = undefined;
+            (_b = this.subscriber) === null || _b === void 0 ? void 0 : _b.close();
+            this.subscriber = undefined;
+            (_c = this.publisher) === null || _c === void 0 ? void 0 : _c.close();
+            this.publisher = undefined;
+            (_d = this.sfuClient) === null || _d === void 0 ? void 0 : _d.close();
+            this.sfuClient = undefined;
+            this.dispatcher.offAll();
+            // Call all leave call hooks, e.g. to clean up global event handlers
+            this.leaveCallHooks.forEach((hook) => hook());
+            this.clientStore.unregisterCall(this);
+            this.state.setCallingState(CallingState.LEFT);
+        });
+        /**
+         * Loads the information about the call.
+         *
+         * @param params.ring if set to true, a `call.ring` event will be sent to the call members.
+         * @param params.notify if set to true, a `call.notification` event will be sent to the call members.
+         * @param params.members_limit the members limit.
+         */
+        this.get = (params) => __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.streamClient.get(this.streamClientBasePath, params);
+            if ((params === null || params === void 0 ? void 0 : params.ring) && !this.ringing) {
+                this.ringingSubject.next(true);
+            }
+            this.state.updateFromCallResponse(response.call);
+            this.state.setMembers(response.members);
+            this.state.setOwnCapabilities(response.own_capabilities);
+            if (this.streamClient._hasConnectionID()) {
+                this.watching = true;
+                this.clientStore.registerCall(this);
+            }
+            return response;
+        });
+        /**
+         * Loads the information about the call and creates it if it doesn't exist.
+         *
+         * @param data the data to create the call with.
+         */
+        this.getOrCreate = (data) => __awaiter(this, void 0, void 0, function* () {
+            const response = yield this.streamClient.post(this.streamClientBasePath, data);
+            if ((data === null || data === void 0 ? void 0 : data.ring) && !this.ringing) {
+                this.ringingSubject.next(true);
+            }
+            this.state.updateFromCallResponse(response.call);
+            this.state.setMembers(response.members);
+            this.state.setOwnCapabilities(response.own_capabilities);
+            if (this.streamClient._hasConnectionID()) {
+                this.watching = true;
+                this.clientStore.registerCall(this);
+            }
+            return response;
+        });
+        /**
+         * Creates a call
+         *
+         * @param data the data to create the call with.
+         */
+        this.create = (data) => __awaiter(this, void 0, void 0, function* () {
+            return this.getOrCreate(data);
+        });
+        /**
+         * A shortcut for {@link Call.get} with `ring` parameter set to `true`.
+         * Will send a `call.ring` event to the call members.
+         */
+        this.ring = () => __awaiter(this, void 0, void 0, function* () {
+            return yield this.get({ ring: true });
+        });
+        /**
+         * A shortcut for {@link Call.get} with `notify` parameter set to `true`.
+         * Will send a `call.notification` event to the call members.
+         */
+        this.notify = () => __awaiter(this, void 0, void 0, function* () {
+            return yield this.get({ notify: true });
         });
         /**
          * Marks the incoming call as accepted.
@@ -9680,7 +10267,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 +10536,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 +10663,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 +10766,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 +10782,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 +10816,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 +11160,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 +11269,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 +12437,7 @@ class WSConnectionFallback {
     }
 }
 
-const version = '0.3.0';
+const version = '0.3.2';
 
 const logger = getLogger(['location']);
 const HINT_URL = `https://hint.stream-io-video.com/`;
@@ -12755,254 +13411,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 +13491,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, CameraManagerState, CreateDeviceRequestPushProviderEnum, DebounceType, ErrorFromResponse, InputMediaDeviceManager, InputMediaDeviceManagerState, MicrophoneManager, MicrophoneManagerState, 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