stormy-gold
stormy-gold•2w ago

Pick Microphone Input Device

How does the @Vapi-ai/web package choose which microphone to use if multiple are available, and is there a way to let the user select one?
1 Reply
Shubham Bajaj
Shubham Bajaj•5d ago
Hi atharane, To allow users to select a specific microphone when using the @vapi-ai/web package, you can manage input devices by utilizing the WebRTC API's navigator.mediaDevices.enumerateDevices() method. Here's a simple approach: 1. Use navigator.mediaDevices.enumerateDevices() to list all available audio input devices. 2. Present this list to the user to select their preferred microphone. 3. Pass the selected device's ID using setInputDevicesAsync({ audioDeviceId: selectedAudioDeviceId });. For example: 
navigator.mediaDevices.enumerateDevices().then(devices => {
  // Display device options to user
  const audioDevices = devices.filter(device => device.kind === 'audioinput');
  // Code to let user select from `audioDevices`
  const selectedAudioDeviceId = 'chosen-device-id'; // Set this to the user's choice
  vapi.setInputDevicesAsync({ audioDeviceId: selectedAudioDeviceId });
});
navigator.mediaDevices.enumerateDevices().then(devices => {
  // Display device options to user
  const audioDevices = devices.filter(device => device.kind === 'audioinput');
  // Code to let user select from `audioDevices`
  const selectedAudioDeviceId = 'chosen-device-id'; // Set this to the user's choice
  vapi.setInputDevicesAsync({ audioDeviceId: selectedAudioDeviceId });
});
Ensure your application has the necessary permissions to access audio input. This way, the user can select their desired microphone. Let me know if you need further assistance.

Did you find this page helpful?