1

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?

Claudio Valerio
  • 2,302
  • 14
  • 24

2 Answers2

0

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));
Liyun Zhang - MSFT
  • 8,271
  • 1
  • 2
  • 14
  • Sorry, doesn't work. I already have permission, 'cause getUserMedia was already called before my in my original code, but still in Webview the labels are not reported by enumerateDevices. – Claudio Valerio Jan 13 '22 at 10:25
  • There is a similar [case](https://stackoverflow.com/questions/60592867/getting-device-label-in-webview-webrtc). It says this is because of the privacy issues and android default cancel permission callback. But you can try to grant permission to the webview with the WebChromeClient.OnPermissionRequest method.@ClaudioValerio – Liyun Zhang - MSFT Jan 14 '22 at 06:17
0

Try after obtaining permission for the camera and microphone. Normally, when searching for a device without permission, the label does not appear.

Yeon-Gu
  • 131
  • 2