Tengo una aplicación de Xamarin Forms que es principalmente un contenedor alrededor de un control WebView. El sitio web que se carga en la vista web usa una cámara y un micrófono para crear una conexión WebRTC y publicar las transmisiones para una audiencia. El problema: necesito poder distinguir entre los dispositivos de entrada de audio (integrados y un par de auriculares bluetooth), pero cuando uso navigator.mediaDevices.enumerateDevices
, las etiquetas de los dispositivos están vacías. Esto no sucede si pruebo lo mismo en Chrome, en el mismo dispositivo Android. Código JavaScript:
const d = await navigator.mediaDevices.enumerateDevices(); const onlyAudioInput = d.filter(dev => dev.kind === 'audioinput'); console.log(JSON.stringify(onlyAudioInput, null, 2));
Resultados en 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" } ]
Resultados en vista web:
[ { "deviceId": "default", "kind": "audioinput", "label": "", "groupId": "da6f8627bce414c9752cae16c9b7e889ab9a98b9c98bac7faab66543260f99a8" }, { "deviceId": "94cfdee91b7cc6e3ac947b6c2ed8b22b4cfb215cdc0606a591b24c8525f1ce5c", "kind": "audioinput", "label": "", "groupId": "6b1bf6bec2004950fd4b1c0b8a17b80c4c4bd12e844e47dfcb8b0ef334564d3c" }, { "deviceId": "5219d4c6531a996c42d2314a059c3cb4ddb9ee8dac73edd61605072a8fdcbe69", "kind": "audioinput", "label": "", "groupId": "bfccf39cee80d59c8f5f070f5d2b69dff123942665a787e3cb54780f1ac71536" } ]
¿Hay algo que pueda hacer para obtener etiquetas también en mi WebView?
El método navigator.mediaDevices.enumerateDevices devolverá una etiqueta vacía sin permiso para acceder al dispositivo. Puede intentar usar el siguiente código.
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));
Intente después de obtener permiso para la cámara y el micrófono. Normalmente, al buscar un dispositivo sin permiso, la etiqueta no aparece.