Improve default device handling

Author: lukasIO

packages/core/src/components/mediaDeviceSelect.ts

@@ -51,7 +51,7 @@ export function setupDeviceSelector(
       activeDeviceSubject.next(useDefault ? id : actualDeviceId);
     } else if (localTrack) {
       await localTrack.setDeviceId(options.exact ? { exact: id } : id);
-      const actualId = await localTrack.getDeviceId();
+      const actualId = await localTrack.getDeviceId(false);
       activeDeviceSubject.next(
         id === 'default' && localTrack.mediaStreamTrack.label.startsWith('Default') ? id : actualId,
       );

packages/core/src/observables/room.ts

@@ -246,7 +246,7 @@ export function createActiveDeviceObservable(room: Room, kind: MediaDeviceKind)
   return roomEventSelector(room, RoomEvent.ActiveDeviceChanged).pipe(
     filter(([kindOfDevice]) => kindOfDevice === kind),
     map(([kind, deviceId]) => {
-      log.debug('activeDeviceObservable | RoomEvent.ActiveDeviceChanged', { kind, deviceId });
+      log.info('activeDeviceObservable | RoomEvent.ActiveDeviceChanged', { kind, deviceId });
       return deviceId;
     }),
   );

packages/core/src/persistent-storage/user-choices.ts

@@ -39,8 +39,8 @@ export type LocalUserChoices = {
 export const defaultUserChoices: LocalUserChoices = {
   videoEnabled: true,
   audioEnabled: true,
-  videoDeviceId: '',
-  audioDeviceId: '',
+  videoDeviceId: 'default',
+  audioDeviceId: 'default',
   username: '',
 } as const;
 

packages/react/src/components/controls/MediaDeviceSelect.tsx

@@ -113,8 +113,12 @@ export const MediaDeviceSelect: (
       [className, props],
     );
 
+    const hasDefault = !!devices.find((info) => info.label.toLowerCase().startsWith('default'));
+
     function isActive(deviceId: string, activeDeviceId: string, index: number) {
-      return deviceId === activeDeviceId || (index === 0 && activeDeviceId === 'default');
+      return (
+        deviceId === activeDeviceId || (!hasDefault && index === 0 && activeDeviceId === 'default')
+      );
     }
 
     return (

packages/react/src/hooks/useMediaDeviceSelect.ts

@@ -1,5 +1,5 @@
 import { createMediaDeviceObserver, setupDeviceSelector, log } from '@livekit/components-core';
-import type { LocalAudioTrack, LocalVideoTrack, Room } from 'livekit-client';
+import { getBrowser, type LocalAudioTrack, type LocalVideoTrack, type Room } from 'livekit-client';
 import * as React from 'react';
 import { useMaybeRoomContext } from '../context';
 import { useObservableState } from './internal';
@@ -54,7 +54,7 @@ export function useMediaDeviceSelect({
   const devices = useObservableState(deviceObserver, [] as MediaDeviceInfo[]);
   // Active device management.
   const [currentDeviceId, setCurrentDeviceId] = React.useState<string>(
-    roomContext?.getActiveDevice(kind) ?? '',
+    roomContext?.getActiveDevice(kind) ?? 'default',
   );
   const { className, activeDeviceObservable, setActiveMediaDevice } = React.useMemo(
     () => setupDeviceSelector(kind, room ?? roomContext, track),
@@ -63,10 +63,11 @@ export function useMediaDeviceSelect({
 
   React.useEffect(() => {
     const listener = activeDeviceObservable.subscribe((deviceId) => {
-      if (deviceId && deviceId !== currentDeviceId) {
-        log.info('setCurrentDeviceId', deviceId);
-        setCurrentDeviceId(deviceId);
+      if (!deviceId) {
+        return;
       }
+      log.info('setCurrentDeviceId', deviceId);
+      setCurrentDeviceId(deviceId);
     });
     return () => {
       listener?.unsubscribe();

packages/react/src/prefabs/ControlBar.tsx

@@ -56,7 +56,7 @@ export interface ControlBarProps extends React.HTMLAttributes<HTMLDivElement> {
 export function ControlBar({
   variation,
   controls,
-  saveUserChoices = true,
+  saveUserChoices = false,
   onDeviceError,
   ...props
 }: ControlBarProps) {
@@ -144,7 +144,9 @@ export function ControlBar({
           <div className="lk-button-group-menu">
             <MediaDeviceMenu
               kind="audioinput"
-              onActiveDeviceChange={(_kind, deviceId) => saveAudioInputDeviceId(deviceId ?? '')}
+              onActiveDeviceChange={(_kind, deviceId) =>
+                saveAudioInputDeviceId(deviceId ?? 'default')
+              }
             />
           </div>
         </div>
@@ -162,7 +164,9 @@ export function ControlBar({
           <div className="lk-button-group-menu">
             <MediaDeviceMenu
               kind="videoinput"
-              onActiveDeviceChange={(_kind, deviceId) => saveVideoInputDeviceId(deviceId ?? '')}
+              onActiveDeviceChange={(_kind, deviceId) =>
+                saveVideoInputDeviceId(deviceId ?? 'default')
+              }
             />
           </div>
         </div>

packages/react/src/prefabs/PreJoin.tsx

@@ -131,7 +131,7 @@ export function usePreviewDevice<T extends LocalVideoTrack | LocalAudioTrack>(
             })
           : await createLocalAudioTrack({ deviceId });
 
-      const newDeviceId = await track.getDeviceId();
+      const newDeviceId = await track.getDeviceId(false);
       if (newDeviceId && deviceId !== newDeviceId) {
         prevDeviceId.current = newDeviceId;
         setLocalDeviceId(newDeviceId);
@@ -248,8 +248,8 @@ export function PreJoin({
     saveUsername,
   } = usePersistentUserChoices({
     defaults: partialDefaults,
-    preventSave: !persistUserChoices,
-    preventLoad: !persistUserChoices,
+    preventSave: true,
+    preventLoad: true,
   });
 
   // Initialize device settings

packages/react/src/prefabs/VoiceAssistantControlBar.tsx

@@ -95,7 +95,9 @@ export function VoiceAssistantControlBar({
           <div className="lk-button-group-menu">
             <MediaDeviceMenu
               kind="audioinput"
-              onActiveDeviceChange={(_kind, deviceId) => saveAudioInputDeviceId(deviceId ?? '')}
+              onActiveDeviceChange={(_kind, deviceId) =>
+                saveAudioInputDeviceId(deviceId ?? 'default')
+              }
             />
           </div>
         </div>