Improve default device handling

.changeset/unlucky-emus-float.md

@@ -0,0 +1,6 @@
+---
+"@livekit/components-core": minor
+"@livekit/components-react": minor
+---
+
+Improve default device handling

.npmrc

@@ -1,4 +1,3 @@
-dedupe-peer-dependents=true
 resolve-peers-from-workspace-root=true
 manage-package-manager-versions=true
 package-manager-strict-version=true

docs/storybook/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@livekit/components-react": "workspace:*",
     "@livekit/components-styles": "workspace:*",
-    "livekit-client": "^2.5.7",
+    "livekit-client": "catalog:",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

examples/nextjs/package.json

@@ -13,7 +13,7 @@
     "@livekit/components-react": "workspace:*",
     "@livekit/components-styles": "workspace:*",
     "@livekit/track-processors": "^0.3.2",
-    "livekit-client": "^2.5.7",
+    "livekit-client": "catalog:",
     "livekit-server-sdk": "^2.6.1",
     "next": "^14.2.13",
     "react": "^18.2.0",

package.json

@@ -40,9 +40,6 @@
     "turbo": "^2.1.1",
     "typescript": "5.6.2"
   },
-  "dependencies": {
-    "livekit-client": "^2.5.7"
-  },
   "engines": {
     "node": ">=18"
   },

packages/core/etc/components-core.api.md

@@ -221,7 +221,7 @@ export type GridLayoutInfo = {
 export function isEqualTrackRef(a?: TrackReferenceOrPlaceholder, b?: TrackReferenceOrPlaceholder): boolean;
 
 // @public (undocumented)
-export function isLocal(p: Participant): p is LocalParticipant;
+export function isLocal(p: Participant): boolean;
 
 // @public
 export function isMobileBrowser(): boolean;
@@ -235,7 +235,7 @@ export function isParticipantTrackReferencePinned(trackRef: TrackReference, pinS
 export function isPlaceholderReplacement(currentTrackRef: TrackReferenceOrPlaceholder, nextTrackRef: TrackReferenceOrPlaceholder): boolean;
 
 // @public (undocumented)
-export function isRemote(p: Participant): p is RemoteParticipant;
+export function isRemote(p: Participant): boolean;
 
 // @public (undocumented)
 export function isSourcesWithOptions(sources: SourcesArray): sources is TrackSourceWithOptions[];
@@ -546,9 +546,9 @@ export function setupDataMessageHandler<T extends string>(room: Room, topic?: T
 };
 
 // @public (undocumented)
-export function setupDeviceSelector(kind: MediaDeviceKind, room?: Room, localTrack?: LocalAudioTrack | LocalVideoTrack): {
+export function setupDeviceSelector(kind: MediaDeviceKind, room: Room, localTrack?: LocalAudioTrack | LocalVideoTrack): {
     className: string;
-    activeDeviceObservable: Observable<string | undefined>;
+    activeDeviceObservable: Observable<string>;
     setActiveMediaDevice: (id: string, options?: SetMediaDeviceOptions) => Promise<void>;
 };
 

packages/core/package.json

@@ -40,7 +40,7 @@
     "rxjs": "7.8.1"
   },
   "peerDependencies": {
-    "livekit-client": "^2.5.7",
+    "livekit-client": "catalog:",
     "tslib": "^2.6.2"
   },
   "devDependencies": {

packages/core/src/components/mediaDeviceSelect.ts

@@ -20,17 +20,21 @@ export type SetMediaDeviceOptions = {
 
 export function setupDeviceSelector(
   kind: MediaDeviceKind,
-  room?: Room,
+  room: Room,
   localTrack?: LocalAudioTrack | LocalVideoTrack,
 ) {
   const activeDeviceSubject = new BehaviorSubject<string | undefined>(undefined);
 
-  const activeDeviceObservable = room
-    ? createActiveDeviceObservable(room, kind)
-    : activeDeviceSubject.asObservable();
+  const activeDeviceObservable = createActiveDeviceObservable(room, kind);
 
   const setActiveMediaDevice = async (id: string, options: SetMediaDeviceOptions = {}) => {
-    if (room) {
+    if (localTrack) {
+      await localTrack.setDeviceId(options.exact ? { exact: id } : id);
+      const actualId = await localTrack.getDeviceId(false);
+      activeDeviceSubject.next(
+        id === 'default' && localTrack.mediaStreamTrack.label.startsWith('Default') ? id : actualId,
+      );
+    } else if (room) {
       log.debug(`Switching active device of kind "${kind}" with id ${id}.`);
       await room.switchActiveDevice(kind, id, options.exact);
       const actualDeviceId: string | undefined = room.getActiveDevice(kind) ?? id;
@@ -49,17 +53,6 @@ export function setupDeviceSelector(
         (id === 'default' && !targetTrack) ||
         (id === 'default' && targetTrack?.mediaStreamTrack.label.startsWith('Default'));
       activeDeviceSubject.next(useDefault ? id : actualDeviceId);
-    } else if (localTrack) {
-      await localTrack.setDeviceId(options.exact ? { exact: id } : id);
-      const actualId = await localTrack.getDeviceId();
-      activeDeviceSubject.next(
-        id === 'default' && localTrack.mediaStreamTrack.label.startsWith('Default') ? id : actualId,
-      );
-    } else if (activeDeviceSubject.value !== id) {
-      log.warn(
-        'device switch skipped, please provide either a room or a local track to switch on. ',
-      );
-      activeDeviceSubject.next(id);
     }
   };
   const className: string = prefixClass('media-device-select');

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/etc/components-react.api.md

@@ -1058,14 +1058,14 @@ export interface UsePersistentUserChoicesOptions {
 // @public
 export function usePinnedTracks(layoutContext?: LayoutContextType): TrackReferenceOrPlaceholder[];
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export function usePreviewDevice<T extends LocalVideoTrack | LocalAudioTrack>(enabled: boolean, deviceId: string, kind: 'videoinput' | 'audioinput'): {
     selectedDevice: MediaDeviceInfo | undefined;
     localTrack: T | undefined;
     deviceError: Error | null;
 };
 
-// @alpha (undocumented)
+// @public (undocumented)
 export function usePreviewTracks(options: CreateLocalTracksOptions, onError?: (err: Error) => void): LocalTrack<Track.Kind>[] | undefined;
 
 // Warning: (ae-incompatible-release-tags) The symbol "useRemoteParticipant" is marked as @public, but its signature references "ParticipantIdentifier" which is marked as @beta

packages/react/package.json

@@ -58,7 +58,7 @@
   },
   "peerDependencies": {
     "@livekit/krisp-noise-filter": "^0.2.12",
-    "livekit-client": "^2.5.7",
+    "livekit-client": "catalog:",
     "react": ">=18",
     "react-dom": ">=18",
     "tslib": "^2.6.2"

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 { Room, type LocalAudioTrack, type LocalVideoTrack } from 'livekit-client';
 import * as React from 'react';
 import { useMaybeRoomContext } from '../context';
 import { useObservableState } from './internal';
@@ -46,6 +46,9 @@ export function useMediaDeviceSelect({
   onError,
 }: UseMediaDeviceSelectProps) {
   const roomContext = useMaybeRoomContext();
+
+  const roomFallback = React.useMemo(() => room ?? roomContext ?? new Room(), [room, roomContext]);
+
   // List of all devices.
   const deviceObserver = React.useMemo(
     () => createMediaDeviceObserver(kind, onError, requestPermissions),
@@ -54,19 +57,20 @@ export function useMediaDeviceSelect({
   const devices = useObservableState(deviceObserver, [] as MediaDeviceInfo[]);
   // Active device management.
   const [currentDeviceId, setCurrentDeviceId] = React.useState<string>(
-    roomContext?.getActiveDevice(kind) ?? '',
+    roomFallback?.getActiveDevice(kind) ?? 'default',
   );
   const { className, activeDeviceObservable, setActiveMediaDevice } = React.useMemo(
-    () => setupDeviceSelector(kind, room ?? roomContext, track),
-    [kind, room, roomContext, track],
+    () => setupDeviceSelector(kind, roomFallback),
+    [kind, roomFallback, track],
   );
 
   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

@@ -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

@@ -55,7 +55,7 @@ export interface PreJoinProps
   videoProcessor?: TrackProcessor<Track.Kind.Video>;
 }
 
-/** @alpha */
+/** @public */
 export function usePreviewTracks(
   options: CreateLocalTracksOptions,
   onError?: (err: Error) => void,
@@ -100,7 +100,10 @@ export function usePreviewTracks(
   return tracks;
 }
 
-/** @public */
+/**
+ * @public
+ * @deprecated use `usePreviewTracks` instead
+ */
 export function usePreviewDevice<T extends LocalVideoTrack | LocalAudioTrack>(
   enabled: boolean,
   deviceId: string,
@@ -131,7 +134,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);

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>