fix: set initial device state regardless of call state (#869)

The initial device state shall be set regardless of the call state as
this is primarily driven by the backend.
Together with this change, I've improved the logging and the disposal of
temporary media streams created while enumerating the media devices.
Also, the `stopPublishingAudio/Video` methods can be awaited now.

packages/client/src/devices/devices.ts

@@ -22,15 +22,12 @@ const getDevices = (constraints?: MediaStreamConstraints) => {
         navigator.mediaDevices.enumerateDevices().then((devices) => {
           subscriber.next(devices);
           // If we stop the tracks before enumerateDevices -> the labels won't show up in Firefox
-          media.getTracks().forEach((t) => t.stop());
+          disposeOfMediaStream(media);
           subscriber.complete();
         });
       })
       .catch((error) => {
-        const logger = getLogger(['devices']);
-        if (logger) {
-          logger('error', 'Failed to get devices', error);
-        }
+        getLogger(['devices'])('error', 'Failed to get devices', error);
         subscriber.error(error);
       });
   });
@@ -138,7 +135,7 @@ const getStream = async (constraints: MediaStreamConstraints) => {
   try {
     return await navigator.mediaDevices.getUserMedia(constraints);
   } catch (e) {
-    getLogger(['devices'])?.('error', `Failed get user media`, {
+    getLogger(['devices'])('error', `Failed get user media`, {
       error: e,
       constraints: constraints,
     });
@@ -206,7 +203,7 @@ export const getScreenShareStream = async (
       ...options,
     });
   } catch (e) {
-    getLogger(['devices'])?.('error', 'Failed to get screen share stream', e);
+    getLogger(['devices'])('error', 'Failed to get screen share stream', e);
     throw e;
   }
 };

packages/react-sdk/src/core/contexts/MediaDevicesContext.tsx

@@ -133,11 +133,11 @@ export type MediaDevicesContextAPI = {
   /**
    * Stops publishing audio stream for currently selected audio input (microphone) device to other call participants.
    */
-  stopPublishingAudio: () => void;
+  stopPublishingAudio: () => Promise<void>;
   /**
    * Stops publishing video stream for currently selected video input (camera) device to other call participants.
    */
-  stopPublishingVideo: () => void;
+  stopPublishingVideo: () => Promise<void>;
   /**
    * Sets the initialAudioEnabled flag to a given boolean value.
    * The latest value set will be used to decide, whether audio stream will be published when joining a call.
@@ -272,20 +272,15 @@ export const MediaDevicesProvider = ({
 
   const settings = metadata?.settings;
   useEffect(() => {
-    if (
-      !settings ||
-      ![CallingState.IDLE, CallingState.RINGING].includes(callingState)
-    ) {
-      return;
-    }
+    if (!settings) return;
     const { audio, video } = settings;
     if (typeof initialAudioEnabled === 'undefined' && audio.mic_default_on) {
       setInitialAudioEnabled(audio.mic_default_on);
     }
     if (typeof initialVideoEnabled === 'undefined' && video.camera_default_on) {
       setInitialVideoState(DEVICE_STATE.starting);
     }
-  }, [callingState, initialAudioEnabled, initialVideoEnabled, settings]);
+  }, [initialAudioEnabled, initialVideoEnabled, settings]);
 
   const publishVideoStream = useVideoPublisher({
     initialVideoMuted: !initialVideoState.enabled,
@@ -296,7 +291,7 @@ export const MediaDevicesProvider = ({
     audioDeviceId: selectedAudioInputDeviceId,
   });
 
-  const stopPublishingAudio = useCallback(() => {
+  const stopPublishingAudio = useCallback(async () => {
     if (
       callingState === CallingState.IDLE ||
       callingState === CallingState.RINGING
@@ -307,7 +302,7 @@ export const MediaDevicesProvider = ({
     }
   }, [call, callingState]);
 
-  const stopPublishingVideo = useCallback(() => {
+  const stopPublishingVideo = useCallback(async () => {
     if (
       callingState === CallingState.IDLE ||
       callingState === CallingState.RINGING