0

This happens in android build of ionic app. I am using a iframe to test the getUserMedia. The demo page of webrtc gives me "GetUserMedia : Not Allowed Error". I have given all permissions in AndroidManifest.xml, but still couldn't access the camera. is there anything else needs to be done, for getting camera access for external website?

home.html

<ion-content class= 'padding has-subheader'>
  <iframe class= 'webPage' name= "eventsPage" src="https://webrtc.github.io/samples/src/content/getusermedia/gum/">
 </iframe>
</ion-content>

config.xml

<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^2.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-camera" spec="^4.0.3" />
<plugin name="android-camera-permission" spec="^1.0.0" />
<plugin name="cordova-plugin-media" spec="^5.0.2" />
<plugin name="cordova-opentok-android-permissions" spec="^1.0.1" />
<plugin name="cordova.plugins.diagnostic" spec="^4.0.10" />
<plugin name="cordova-plugin-android-permissions" spec="^1.0.0" />
<plugin name="cordova-plugin-media-capture" spec="^3.0.2" />
<plugin name="cordova-plugin-compat" spec="^1.2.0" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<engine name="android" spec="7.0.0" />
Peter Haddad
  • 78,874
  • 25
  • 140
  • 134
sowmiyaksr
  • 169
  • 5
  • 18
  • Please see below. Primarily the iframe permissions allow="camera" and the CORS headers. – Marcus Nov 05 '18 at 10:44
  • Possible duplicate of [Does getUserMedia works in ionic-webview in Android app?](https://stackoverflow.com/questions/52557767/does-getusermedia-works-in-ionic-webview-in-android-app) – Marcus Nov 05 '18 at 12:33

1 Answers1

10

Flagged as a duplicate of: Does getUserMedia works in ionic-webview in Android app?

Nevertheless I have copied and pasted my answer below

Update - 19/11/2020

WKWebView can use getUserMedia in iOS 14.3 beta 1.

Update - 04/11/2018 - Working Ionic example

As promised I had a crack at this today. To answer your question now in full: Yes you can access getUserMedia inside of ionic on Android.

See my GitHub project here for a working example and for screenshots.

See this feature branch here which successfully tests getUserMedia inside of an iframe

Steps involved:

  • Install Ionic
  • ionic start getUserMedia blank
  • cd getUserMedia
  • ionic cordova plugin add cordova-plugin-android-permissions
  • npm install --save @ionic-native/android-permissions
  • npm install webrtc-adapter --save
  • link to adapter in angular.json scripts (link)
  • Add AndroidPermissions to app.module.ts provider (link)
  • Create camera access code in home.component.ts (link)
  • Add android manifiest permissions to config.xml and AndroidManifest.xml (link, if the config doesn't copy go to platforms/android/app/src/AndroidManifest.xml)
  • ionic cordova platform add android
  • ionic cordova build android
  • ionic cordova run android

You can also see alternative versions of this for React Native, native Android and Cordova.

As of this update support for iOS is still a no due to Apple security restrictions on WKWebView and UIWebView.

Iframes: To make sure getUserMedia works inside of them make sure you:

  • CORS of the embedded site need to have the allowed access origin header
  • enable security permissions to access the camera and microphone <iframe allow="camera; microphone">

Please read the following for more info on iframe features:

Yes, it theoretically can work. See my example below on how to do it in Android. For iOS this isn't currently possible due to the limitations of WKWebView. I have linked to a StackOverFlow question below on how people are achieving this on Cordova which Ionic is based off.

The core main steps which need to be achieved to get getUserMedia working on Android regardless of framework are:

  1. Make sure your app is Android API 21 and above
  2. Add permissions to Manifest (link to file)
  3. Make sure you use getUserMedia adapter for API compatibility
  4. Make sure you add webrtc to the Android project gradle file (link to file)
  5. Override Chrome WebView permissions to grand access (link to file example, line 106)
  6. On app start ask user for permission to access the camera.

The issue you are specifically facing is 4. or 5. It looks like the project gets you that far. The permission error is most likely down to the Chrome WebView your app is using doesn't override the permission, and/or it is and the user hasn't manually enabled the permission.

Thus within the Ionic framework you need to extend its Browser to get access to the override onRequestPermissionsResult. To do this you need to make a Cordova plugin and then create the Ionic bindings.

More reading about this for similar frameworks can be found here:

Marcus
  • 1,880
  • 20
  • 27
  • 1
    @Moritz Done! I tried before and apparently I wasn't ranked high enough ;) – Marcus Nov 05 '18 at 12:34
  • Tried multiple times but keep getting: `Browser API navigator.mediaDevices.getUserMedia not available` – Askar Feb 08 '21 at 20:49
  • @askar have you included the WebRTC adapter (https://www.npmjs.com/package/webrtc-adapter)? Have you checked for Browser compatibility ( https://caniuse.com/?search=mediaDevices)? – Marcus Feb 09 '21 at 03:07
  • thank you for a quick response. yeah I included `webrtc-adapter`. also if I run via browser on the phone it is working. as soon as I run natively via `Android studio` on my Pixel4 I get that error. – Askar Feb 09 '21 at 04:19
  • 1
    Ahh, checkout https://github.com/marcusbelcher/android-getUserMedia-test – Marcus Feb 10 '21 at 00:12
  • 1
    If you have your own app you need to handle the permissions for your app to gain access to the camera, mic, and chrome permission callbacks. If you are in someone else's app e.g. Facebook you need to ask them to handle this. if this is in another browser it may be down to browser or emulation compatibility. If the above doesn't help I will need more info here to assist. Feel free to drop me a DM. – Marcus Feb 10 '21 at 00:15