https://livekit.io logo
Join Slack
Powered by
How can i change microphone on livekit room? using...
# ask-ai
w
How can i change microphone on livekit room? using react sdk
t
Thanks for reaching out, Rahul. I'm an AI assistant and I'm here to help. Give me a moment while I research this topic.
I'm happy to help you change the microphone in a LiveKit room using the React SDK! You can easily do this with the 
useMediaDeviceSelect
hook from 
@livekit/components-react
. This handy hook lets you access the available audio input devices, see which one is currently active, and switch between them smoothly. Here’s a simple way to create a microphone selection dropdown: 1. Start by using the 
useMediaDeviceSelect
hook with 
kind: "audioinput"
. This will give you the list of microphones, the active device ID, and a 
setActiveMediaDevice
function to change devices. 2. Next, render a 
<select>
element (or any UI component you prefer) that shows the microphone options. 3. Finally, when someone picks a new microphone, just call 
setActiveMediaDevice
with the selected device ID to switch over. Here’s an example component to guide you:
Copy code
import { useMediaDeviceSelect } from "@livekit/components-react";

function MicrophoneSelect() {
  const { devices, activeDeviceId, setActiveMediaDevice } = useMediaDeviceSelect({
    kind: "audioinput",
  });

  return (
    <select value={activeDeviceId} onChange={(e) => setActiveMediaDevice(e.target.value)}>
      {devices.map((device) => (
        <option key={device.deviceId} value={device.deviceId}>
          {device.label}
        </option>
      ))}
    </select>
  );
}
The 
setActiveMediaDevice
function works behind the scenes by calling 
room.switchActiveDevice("audioinput", deviceId)
, which makes sure the new microphone is used for all future audio tracks. It also handles any renegotiation needed, so you don’t have to worry about that. And if you want to take it a step further—like saving the user’s microphone choice across sessions—you can pair this with 
usePersistentUserChoices
. It offers handy functions like 
saveAudioInputDeviceId
to keep those preferences saved. If you have any questions or want to explore this together, feel free to ask—I’m here to help! Sources: src/components/WebCamSelect.tsx | packages/core/src/components/mediaDeviceSelect.ts | components/livekit/agent-control-bar/agent-control-bar.tsx
w
when I use useMediaDeviceSelect to change the active device it is not changing the input
t
Could you please share a bit more about what’s happening? For instance: • Are you noticing any error messages in the console when you try to change the microphone? • Is the dropdown list showing the microphones you expect to see? • Also, are you using the latest version of the LiveKit React SDK? Having these details will really help us get to the bottom of the issue together.
w
the devices are getting listed but when try to change it by setActiveMediaDevice it is not working the audio is still getting detected from the other audio input which was selected before joining the meet
t
If 
setActiveMediaDevice
isn’t switching your microphone as expected, no worries! Let’s walk through some helpful steps to troubleshoot and get things working smoothly: 1. Check Microphone Permissions: First, please ensure your browser has permission to access the microphone. You might want to try using a preview track or set 
requestPermissions: true
in 
useMediaDeviceSelect
right after a user interaction to prompt for access. 2. Confirm the Device ID: Double-check that the 
deviceId
you’re passing to 
setActiveMediaDevice
actually exists in the list of available devices. This helps avoid any mix-ups. 3. Look Out for Errors: It’s a good idea to use the 
onError
callback in 
useMediaDeviceSelect
to catch and log any errors that might pop up during device switching. 4. Manage Exact Matching: By default, the SDK uses 
exact: true
, which means it looks for an exact device match. If that device isn’t available, the switch might fail. You can try using 
{ exact: false }
for a bit more flexibility as a fallback. 5. Make Sure a Local Microphone Track Exists: If you haven’t published a microphone track yet, the new device setting will only apply to future tracks. To get around this, try publishing a microphone track first using 
localParticipant.setMicrophoneEnabled(true)
. Here’s a friendly example showing how to handle device switching with some error handling built in:
Copy code
const { devices, activeDeviceId, setActiveMediaDevice } = useMediaDeviceSelect({
  kind: "audioinput",
  onError: (error) => {
    console.error("Device selection error:", error);
  },
});

const handleChange = (value) => {
  const isValid = devices.some(device => device.deviceId === value);
  if (isValid) {
    setActiveMediaDevice(value).catch(err =>
      console.error("Failed to switch device:", err)
    );
  } else {
    console.error("Invalid device ID:", value);
  }
};
Please feel free to reach out if you need any more help or if things still aren’t working after trying these steps. I’m here to support you! Sources: components/livekit/agent-control-bar/agent-control-bar.tsx | src/components/MicrophoneSelect.tsx | src/room/Room.ts | packages/react/etc/components-react.api.md
3 Views
Open in Slack
PreviousNext
Powered by