use fallback room for deviceselect outside of room

Author: lukasIO

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(false);
-      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/react/src/hooks/useMediaDeviceSelect.ts

@@ -1,5 +1,5 @@
 import { createMediaDeviceObserver, setupDeviceSelector, log } from '@livekit/components-core';
-import { getBrowser, type LocalAudioTrack, type LocalVideoTrack, type 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,11 +57,11 @@ export function useMediaDeviceSelect({
   const devices = useObservableState(deviceObserver, [] as MediaDeviceInfo[]);
   // Active device management.
   const [currentDeviceId, setCurrentDeviceId] = React.useState<string>(
-    roomContext?.getActiveDevice(kind) ?? 'default',
+    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(() => {

packages/react/src/prefabs/PreJoin.tsx

@@ -24,6 +24,7 @@ import { useMediaDevices, usePersistentUserChoices } from '../hooks';
 import { useWarnAboutMissingStyles } from '../hooks/useWarnAboutMissingStyles';
 import { defaultUserChoices } from '@livekit/components-core';
 import { roomOptionsStringifyReplacer } from '../utils';
+import { useMaybeRoomContext } from '../context';
 
 /**
  * Props for the PreJoin component.
@@ -55,7 +56,7 @@ export interface PreJoinProps
   videoProcessor?: TrackProcessor<Track.Kind.Video>;
 }
 
-/** @alpha */
+/** @public */
 export function usePreviewTracks(
   options: CreateLocalTracksOptions,
   onError?: (err: Error) => void,
@@ -100,7 +101,7 @@ export function usePreviewTracks(
   return tracks;
 }
 
-/** @public */
+/** @deprecated use `usePreviewTracks` instead */
 export function usePreviewDevice<T extends LocalVideoTrack | LocalAudioTrack>(
   enabled: boolean,
   deviceId: string,
@@ -358,6 +359,8 @@ export function PreJoin({
     }
   }
 
+  const room = useMaybeRoomContext();
+
   useWarnAboutMissingStyles();
 
   return (