I’m listing the devices of my phone in a ionic 4 app using Angular7 and cordova. Calling navigator.mediaDevices.enumerateDevices() I got all audioinput and videoinput but the labels are empty. I know I have to call to this method when the audio and video permissions are granted and I do that.
Connecting to a webrtc sample through Android browser works but through Android WebView not.
Why the labels are empty? How can i list all devices of my android phone?
Hello! I know I’m a bit late, but in case someone else need it, I found that by the moment, there is no solution because is not a Ionic or Capacitor bug. It’s because of the way WebRTC is handled internally by the WebView.
opened 12:35PM - 31 May 20 UTC
closed 11:45AM - 30 Jun 20 UTC
# Bug Report
I am working on an app which uses `getusermedia` to get all Audi… o and Video sources on any device for my WebRTC app.
The platform is written in Vue and when run on a browser or as a PWA, all the options show up fine. However when run as an Android App made using Capacitor, the radio button show up and they are functional as well, however, the labels for the buttons don't show up.
## Capacitor Version
`npx cap doctor` output:
💊 Capacitor Doctor 💊
Latest Dependencies:
@capacitor/cli: 2.1.2
@capacitor/core: 2.1.2
@capacitor/android: 2.1.2
@capacitor/electron: 2.1.2
@capacitor/ios: 2.1.2
Installed Dependencies:
@capacitor/ios not installed
@capacitor/electron not installed
@capacitor/core 2.1.2
@capacitor/cli 2.1.2
@capacitor/android 2.1.2
## Affected Platform(s)
- [x ] Android
- [ ] iOS
- [ ] Electron
- [ ] Web
## Current Behavior
The main app is written in Vue.
When I run it in the browser, all the labels generated by `getusermedia` show up just fine (and are functional)
I "ported" the app using Capacitor to Android and almost all of the functionalities worked right out of the box, except the labeling of the Audio and Video sources. The buttons show up, however, I dont get to see the name of the source like I do on PWAs.
## Expected Behavior
It should return the labels for the Audio and Video Source.
## Sample Code or Sample Application Repo
<!--
NOTE: Issues with sample projects are prioritized higher than ones without because they are easier to reproduce and fix.
If you are able to illustrate the bug or feature request with an example, please provide sample code snippets or a sample application via a public GitHub or Bitbucket repo.
-->
This is in the .vue file (the radio buttons to toggle between the audio and video sources)
```
<div class="form-group" v-if="video.length">
<label class="form-label"><b>{{ l.settings.video }}</b></label>
<label class="form-radio" v-for="d in video">
<input type="radio" :id="d.deviceId" :value="d.deviceId" v-model="state.deviceVideo">
<i class="form-icon"></i>
{{ d.label }}
</label>
```
This gets the devices
```
export async function getDevices() {
try {
return navigator.mediaDevices.enumerateDevices()
} catch (err) {
console.warn('enumerateDevices err', err)
}
return []
}
export let bandwidthVideoConstraints = {
video: {
width: { ideal: 320 },
height: { ideal: 240 },
},
width: { ideal: 320 },
height: { ideal: 240 },
}
export let defaultVideoConstraints = {
frameRate: {
min: 15,
ideal: 30,
},
}
export async function getUserMedia(constraints = {
audio: {
...defaultAudioConstraints,
},
video: {
...defaultVideoConstraints,
facingMode: 'user'
},
}) {
try {
return navigator.mediaDevices.getUserMedia(constraints)
} catch (err) {
console.warn('getUserMedia err', err)
}
}
```
The platform works as expected as a PWA on Windows, Mac, iOS and even Android. It's just when built using Capacitor, the labels are missing. Functionally, everything works. It's just this bug.]
## Reproduction Steps
Build a simple app which allows a user to choose the audio or video source for output (https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia)
Run the following:
Install Capacitor
`npm install --save @capacitor/core @capacitor/cli`
Initialise Capacitor
`npx cap init`
Add Android
`npx cap add android`
Run it in android studio
`npx cap open android`
Then Build it using android studio.
## Other Technical Details
`npm --version` output: 6.11.3
`node --version` output: v10.16.0
## Other Information
These are the permissions set in AndroidManifest.xml
```
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
<uses-feature android:name="android.hardware.camera" android:required="true" />
<uses-feature android:name="android.hardware.camera.autofocus" android:required="true" />
```
Below is the log from Android Studio, if that helps:
This is what I see when the app is functioning and when the default Audio and Video sources are toggled (automatically)
```
I/CameraManagerGlobal: Connecting to camera service
D/Capacitor: App paused
D/Capacitor: Unable to find a Capacitor plugin to handle permission requestCode, trying Cordova plugins 0
D/Capacitor/App: Firing change: true
V/Capacitor/App: Notifying listeners for event appStateChange
D/Capacitor/App: No listeners found for event appStateChange
D/Capacitor: App resumed
V/Capacitor/Network: Notifying listeners for event networkStatusChange
D/Capacitor/Network: No listeners found for event networkStatusChange
D/: HostConnection::get() New Host Connection established 0xc57f1340, tid 8700
I/libOpenSLES: Emulating old channel mask behavior (ignoring positional mask 0x1, using default mask 0x10 based on channel count of 1)
E/chromium: [ERROR:web_contents_delegate.cc(175)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
[ERROR:web_contents_delegate.cc(175)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
D/: HostConnection::get() New Host Connection established 0xc88406c0, tid 8754
D/: HostConnection::get() New Host Connection established 0xc0314980, tid 8788
D/: PlayerBase::PlayerBase()
D/: TrackPlayerBase::TrackPlayerBase()
I/libOpenSLES: Emulating old channel mask behavior (ignoring positional mask 0x1, using default mask 0x1 based on channel count of 1)
W/AudioTrack: AUDIO_OUTPUT_FLAG_FAST denied by server; frameCount 0 -> 776
W/AudioManager: Use of stream types is deprecated for operations other than volume control
See the documentation of requestAudioFocus() for what to use instead with android.media.AudioAttributes to qualify your playback use case
I/m.webrtc.ap: Background concurrent copying GC freed 31187(1520KB) AllocSpace objects, 3(296KB) LOS objects, 49% free, 2MB/4MB, paused 22us total 144.586ms
```
This is what I see when I manually try to change the Video Source:
```
D/Capacitor: Unable to find a Capacitor plugin to handle permission requestCode, trying Cordova plugins 2
D/Capacitor/App: Firing change: true
V/Capacitor/App: Notifying listeners for event appStateChange
D/Capacitor/App: No listeners found for event appStateChange
D/Capacitor: App resumed
V/Capacitor/Network: Notifying listeners for event networkStatusChange
D/Capacitor/Network: No listeners found for event networkStatusChange
D/: PlayerBase::stop() from IPlayer
D/AudioTrack: stop() called with 86408 frames delivered
W/AudioManager: Use of stream types is deprecated for operations other than volume control
See the documentation of requestAudioFocus() for what to use instead with android.media.AudioAttributes to qualify your playback use case
```
This is what I see when I manually change the Audio Source
```
W/AudioManager: Use of stream types is deprecated for operations other than volume control
See the documentation of requestAudioFocus() for what to use instead with android.media.AudioAttributes to qualify your playback use case
D/Capacitor: App paused
W/System: A resource failed to call release.
D/Capacitor: Unable to find a Capacitor plugin to handle permission requestCode, trying Cordova plugins 4
D/Capacitor/App: Firing change: true
V/Capacitor/App: Notifying listeners for event appStateChange
D/Capacitor/App: No listeners found for event appStateChange
D/Capacitor: App resumed
V/Capacitor/Network: Notifying listeners for event networkStatusChange
D/Capacitor/Network: No listeners found for event networkStatusChange
I/libOpenSLES: Emulating old channel mask behavior (ignoring positional mask 0x1, using default mask 0x10 based on channel count of 1)
E/AudioRecord: start() status -38
D/: PlayerBase::stop() from IPlayer
D/AudioTrack: stop() called with 139320 frames delivered
W/AudioManager: Use of stream types is deprecated for operations other than volume control
See the documentation of requestAudioFocus() for what to use instead with android.media.AudioAttributes to qualify your playback use case
```
Below are all the errors (Caught by LogCat)
```
8686-8686/com.webrtc.app E/m.webrtc.ap: Invalid ID 0x00000000.
8686-8717/com.webrtc.app E/cr_VariationsUtils: Failed reading seed file "/data/user/0/com.webrtc.app/app_webview/variations_seed": /data/user/0/com.webrtc.app/app_webview/variations_seed (No such file or directory)
8686-8686/com.webrtc.app E/m.webrtc.ap: Invalid ID 0x00000000.
8686-8686/com.webrtc.app E/m.webrtc.ap: Invalid ID 0x00000000.
8686-8732/com.webrtc.app E/BluetoothAdapter: Bluetooth binder is null
8686-8686/com.webrtc.app E/Capacitor/Console: File: http://localhost/js/index.d5a85b98.js - Line 1 - Msg: Error during service worker registration:
8686-8686/com.webrtc.app E/chromium: [ERROR:web_contents_delegate.cc(175)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
8686-8686/com.webrtc.app E/chromium: [ERROR:web_contents_delegate.cc(175)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
8686-8686/com.webrtc.app E/cr_VideoCapture: cameraDevice encountered an error
8686-8686/com.webrtc.app E/Capacitor/Console: File: http://localhost/js/index.d5a85b98.js - Line 1 - Msg: Error during service worker registration:
8686-8778/com.webrtc.app E/Capacitor: JavaScript Error: {"type":"js.error","error":{"message":"Uncaught TypeError: Cannot set property 'value' of undefined","url":"http://localhost/js/index.d5a85b98.js","line":1,"col":41684,"errorObject":"{}"}}
8686-8686/com.webrtc.app E/Capacitor/Console: File: capacitor-runtime.js - Line 359 - Msg: TypeError: Cannot set property 'value' of undefined
8686-8686/com.webrtc.app E/Capacitor/Console: File: http://localhost/js/index.d5a85b98.js - Line 1 - Msg: Uncaught TypeError: Cannot set property 'value' of undefined
8686-8686/com.webrtc.app E/chromium: [ERROR:web_contents_delegate.cc(175)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
8686-8686/com.webrtc.app E/chromium: [ERROR:web_contents_delegate.cc(175)] WebContentsDelegate::CheckMediaAccessPermission: Not supported.
8686-8732/com.webrtc.app E/AudioRecord: start() status -38
8686-8686/com.webrtc.app E/Capacitor/Console: File: http://localhost/js/index.d5a85b98.js - Line 1 - Msg: Error during service worker registration:
```
Please help me out here. Thanks.
WebRTC is handled internally by the WebView, not by Capacitor,
You can report it to google, but I’ve found this old issue that they669492 - chromium - An open-source project to help move the web forward. - Monorail