fix(react): forward track to setupDeviceSelector in useMediaDeviceSelect

[nikhilgupta58]

Closes #1315

Root cause

useMediaDeviceSelect keeps track in its useMemo dependency array but never forwards it to setupDeviceSelector.

packages/react/src/hooks/useMediaDeviceSelect.ts (line 62-65):

const { className, activeDeviceObservable, setActiveMediaDevice } = React.useMemo(
  () => setupDeviceSelector(kind, roomFallback), // track is a dep but never passed
  [kind, roomFallback, track],
);

packages/core/src/components/mediaDeviceSelect.ts defines a 3-arg signature and branches on the track:

export function setupDeviceSelector(
  kind: MediaDeviceKind,
  room: Room,
  localTrack?: LocalAudioTrack | LocalVideoTrack,
) {
  ...
  const setActiveMediaDevice = async (id, options = {}) => {
    if (localTrack) {
      await localTrack.setDeviceId(...);   // preview / pre-join path
    } else if (room) {
      await room.switchActiveDevice(...);  // no-ops on the dummy `new Room()`
    }
  };
}

In pre-join / preview UIs there is no connected room, so roomFallback is a dummy new Room(). Because localTrack is undefined, setActiveMediaDevice takes the room.switchActiveDevice branch, which does nothing on that dummy room. The result is that setActiveMediaDevice silently fails to switch the mic or camera before joining.

The fix

-    () => setupDeviceSelector(kind, roomFallback),
+    () => setupDeviceSelector(kind, roomFallback, track),
     [kind, roomFallback, track],

track is already in the useMemo deps, so no dependency-array change is needed. This is purely additive forwarding of an already-tracked value.

Proof (verify-first)

I reproduced the bug with a deterministic test BEFORE writing the fix.

The test renders useMediaDeviceSelect({ kind: 'audioinput', track }) in preview mode (no room, no RoomContext, so roomFallback is a fresh new Room()) with a spy track.setDeviceId, calls setActiveMediaDevice('mic-2'), and asserts the track was switched. It keeps the real setupDeviceSelector (only the device enumeration and logging are mocked so jsdom does not touch navigator.mediaDevices).

RED on current code (packages/react):

 × forwards the local track so setActiveMediaDevice switches the device
 FAIL src/hooks/useMediaDeviceSelect.test.ts > useMediaDeviceSelect in preview mode > forwards the local track so setActiveMediaDevice switches the device
 AssertionError: expected "vi.fn()" to be called with arguments: [ 'mic-2' ]
 Number of calls: 0
   45|     expect(setDeviceId).toHaveBeenCalledWith('mic-2');
 Test Files  1 failed (1)
      Tests  1 failed (1)

GREEN after the fix:

 ✓ src/hooks/useMediaDeviceSelect.test.ts (1 test)
 Test Files  1 passed (1)
      Tests  1 passed (1)

Full suites stay green: packages/react 8 passed, packages/core 98 passed. pnpm build (all packages), lint, and format check are clean.

Risk

None expected. The change only forwards a value that was already a memo dependency, and the preview-track code path in setupDeviceSelector already existed and was simply unreachable from this hook.

Out of scope

While testing I noticed a separate UI-feedback quirk: setupDeviceSelector updates an internal activeDeviceSubject but returns the room-event-based activeDeviceObservable, so the active-item highlight does not reflect a preview-mode switch even after this fix. That is a distinct issue from #1315 (which is about the switch itself not happening) and is not addressed here.

[changeset-bot]

🦋 Changeset detected

Latest commit: bb622ae

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 6 packages

Name	Type
@livekit/components-react	Patch
@agents-ui	Patch
@livekit/component-example-next	Patch
@livekit/components-js-docs	Patch
@livekit/component-docs-storybook	Patch
@livekit/components-docs-gen	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

@nikhilgupta58 is attempting to deploy a commit to the LiveKit Team on Vercel.

A member of the Team first needs to authorize it.