I have a Xamarin Forms application that is mostly a wrapper around a WebView control.
The website that is loaded in the webview uses camera and microphone to create a WebRTC connection and publish the streams to an audience.
The problem: I need to be able to distinguish between the audio input devices (built in and a pair of bluetooth headphones), but when I use navigator.mediaDevices.enumerateDevices the devices labels are empty. This doesn't happen if I test the same on Chrome, on the same Android device.
Javascript code:
const d = await navigator.mediaDevices.enumerateDevices();
const onlyAudioInput = d.filter(dev => dev.kind === 'audioinput');
console.log(JSON.stringify(onlyAudioInput, null, 2));
Results in Chrome:
[
{
"deviceId": "default",
"kind": "audioinput",
"label": "Predefinito",
"groupId": "80e0a2604ac772db693ba33f23270e40c2b7db695715b5ebdbc9236d1fafb40e"
},
{
"deviceId": "cf91fa8f63053b85953819c7dab3d3e4b0841f8987fb75cd659393ac71e28ccb",
"kind": "audioinput",
"label": "Speakerphone",
"groupId": "669753e50fbfe47d0352684f9c603250b9f29a1d74fbf9595f08d3f2184e9aee"
},
{
"deviceId": "8e3a425e11a72a2c52553a7bb0b346d6041e561831d51ad3d014851c902933b6",
"kind": "audioinput",
"label": "Bluetooth headset",
"groupId": "45ecdacbcb6e7d1f88826258879cd19b8ba043dd08f7f1ca870321a5560b1417"
}
]
Results in webview:
[
{
"deviceId": "default",
"kind": "audioinput",
"label": "",
"groupId": "da6f8627bce414c9752cae16c9b7e889ab9a98b9c98bac7faab66543260f99a8"
},
{
"deviceId": "94cfdee91b7cc6e3ac947b6c2ed8b22b4cfb215cdc0606a591b24c8525f1ce5c",
"kind": "audioinput",
"label": "",
"groupId": "6b1bf6bec2004950fd4b1c0b8a17b80c4c4bd12e844e47dfcb8b0ef334564d3c"
},
{
"deviceId": "5219d4c6531a996c42d2314a059c3cb4ddb9ee8dac73edd61605072a8fdcbe69",
"kind": "audioinput",
"label": "",
"groupId": "bfccf39cee80d59c8f5f070f5d2b69dff123942665a787e3cb54780f1ac71536"
}
]
Is there anything I can do to get labels also in my WebView?
The navigator.mediaDevices.enumerateDevices method will return an empty label without the permission of accessing the device.You can try to use the following code.
await navigator.mediaDevices.getUserMedia({audio: true, video: true});
const d = await navigator.mediaDevices.enumerateDevices();
const onlyAudioInput = d.filter(dev => dev.kind === 'audioinput');
console.log(JSON.stringify(onlyAudioInput, null, 2));
Try after obtaining permission for the camera and microphone. Normally, when searching for a device without permission, the label does not appear.