Syncing microphone device between site settings and webapp

[Martin Nyström]

Hi,

Since Chrome M123 the device permission popup has been updated and now supports device selection.

If we run navigator.mediaDevices.enumerateDevices() the audio device returned as default is not the one selected, but the one selected as default in the OS.

Question is: how can we make sure we select the microphone selected in the site setting when calling getUserMedia with the device id?

What we're trying to achieve is some kind of sync between Chrome and our Web App so that we always use the most appropriate device. We have our own Microphone selector in our app, but its selection is ignored as long as the user has set its microphone in the permission popup.

[Martin Nyström]

After some testing it appears this will return the input device that has been selected in the site settings.

const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
const track = stream.getAudioTracks()[0]; 
console.log(track.label, track.getSettings().deviceId);

Is this the way? And then compare it against the enumerateDevices() and do X,Y,Z based on that.

[Henrik Andreasson]

Here is a demo application I have written which might be of help https://henrik-and.github.io/echo-demo/

If you have two input devices (and start the demo after resetting the permissions for the page), the demo will show the name of the microphone you select in the initial UI.

The default device is not changed by the initial UI, only the device the demo displays as the selected device which is also used in upcoming calls to getUserMedia.

I then use:

getUserMedia({
  audio: {
    deviceId: mySelectedAudioDeviceId,
  },  

});  

to record audio from the currently selected device.

To summarize: the UI you ask about decides which device is selected from the possible enumerated devices when you first load the page. A user can then override this selection and select any other device.

--
This list falls under the WebRTC Code of Conduct - https://webrtc.org/support/code-of-conduct.
---
You received this message because you are subscribed to the Google Groups "discuss-webrtc" group.
To unsubscribe from this group and stop receiving emails from it, send an email to discuss-webrt...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/discuss-webrtc/01f986c7-b4fa-4d27-966b-d01813b9f554n%40googlegroups.com.

[Henrik Andreasson]

I think that the trick here is that: the first time the page is loading, the browser automatically selects the first device in this newly populated list. And the first element is the one you initially select in the permission UI.

[Henrik Andreasson]

Here is a more simple and clean example.

If you use this demo https://henrik-and.github.io/enumerate-devices/ and have two microphones.

• Reset all permissions.
• Load the page and select Microphone 1 => Microphone 1 comes first in the list.
• Reset all permissions.
• Load the page and select Microphone 2 => Microphone 2 now comes first in the list.

[Philipp Hancke]

There was a recent change in how Chrome behaves which caused quite some confusion.

https://issues.chromium.org/issues/370332086

has the details. The tl;dr is "if the app wants a specific device from enumerateDevices, the app *must* use an "exact" constraint.

https://webrtc.github.io/samples/src/content/devices/input-output/ shows how to do this.

The change is reasonable from a certain point of view (the browser favors the users intent over the application intent with "ideal") but ... needs to be explained.

To view this discussion visit https://groups.google.com/d/msgid/discuss-webrtc/CAD2mqc7r4wRB6aHuyMLhMX84TaJHrNsB3-FLMJWfMk%2BskDUdVw%40mail.gmail.com.

[guest271314]

> If we run navigator.mediaDevices.enumerateDevices() the audio device returned as default is not the one selected, but the one selected as default in the OS.

The user can any real, or virtual, or remapped device they want as default, locally. Doesn't even have to be a microphone. The default device for a microphone could be speakers, or "What-U-Hear". So just selecting default device for every user might not be ideal. 

> Question is: how can we make sure we select the microphone selected in the site setting when calling getUserMedia with the device id?

Just handle whatever device the user selected. Give written notice to users to select a microphone device, if that is what your application expects.