Does getUserMedia works in ionic-webview in Android app?

Question

I have given all the permissions for camera and microphone. Enable CSP in meta tag for the iframe. Still not able to get permission for camera and microphone in getusermedia for iframe.

home.html

ion-content class= 'padding has-subheader'>

app-component.ts

constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen, private androidPermissions: AndroidPermissions) 
{
platform.ready().then
   (() => 
      {

           statusBar.styleDefault();
           splashScreen.hide();

           this.androidPermissions.requestPermissions([
                this.androidPermissions.PERMISSION.CAMERA, 
                this.androidPermissions.PERMISSION.MODIFY_AUDIO_SETTINGS,
            this.androidPermissions.PERMISSION.RECORD_AUDIO
           ]);

  //navigator.mediaDevices
  navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: true
    })
    .then(mediaStream => {
        console.log("Video camera platform ready")
    });


});
}

AndroidManifest.xml

 <uses-sdk android:minSdkVersion="23" android:targetSdkVersion="26" />
    <uses-permission android:name="android.permission.RECORD_AUDIO" />
    <uses-permission android:name="android.permission.CAMERA" />
    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
    <uses-feature android:name="android.hardware.camera" />
    <uses-feature android:name="android.hardware.camera.autofocus" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />

could I be marked the answer please. – Marcus Mar 08 '20 at 15:51 — Marcus, Mar 08 '20 at 15:51

score 6 · Accepted Answer · edited Feb 12 '19 at 04:21

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:

Make sure your app is Android API 21 and above
Add permissions to Manifest (link to file)
Make sure you use getUserMedia adapter for API compatibility
Make sure you add webrtc to the Android project gradle file (link to file)
Override Chrome WebView permissions to grand access (link to file example, line 106)
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:

Adding permissions in config.xml, is getting to AndroidManifest.xml, Even after the permissions are enabled, I couldnt get the camera. You can see the same in code. I am expecting something for ionic. — sowmiyaksr, Oct 31 '18 at 14:26
You cannot get the camera permissions because the one which is failing is the Chrome Webview. To solve this you need to make a plugin for Ionic which binds to a native plugin for Cordova which manually overrides the permissions in Android. I did spend an hour or so googling this and is the current only potential solution I could advise. Someone _may_ have made this plugin already. I may have a crack at this on the weekend — Marcus, Oct 31 '18 at 15:48
To further the above and why I believe this is the case. NotReadableError is typically when someone has the Chrome Webview permissions but not hardware permissions (Android manifests, manual user acceptance, etc). Please see the Cordova version link for more information. But your Permission denied error is typically Chrome saying no. In the Chrome browser you get a popup which appears asking a user to allow web access to the camera. With a Chrome Webview this does not exist, and must be overridden via onRequestPermissionsResult — Marcus, Oct 31 '18 at 16:03
Yes. Exactly, that is the issue. I tried InAppBrowser, Crosswalk webview. Couldnt make them work. — sowmiyaksr, Oct 31 '18 at 16:50
@sowmiyaksr I hope this answers your question, and if not let me know why otherwise I'll take the answer :) thanks — Marcus, Nov 04 '18 at 17:15

score -1 · Answer 2 · answered Sep 28 '18 at 14:54

-1

In Android Chrome Browser. Navigator.mediaDevice.getUserMedia() will support only from Chrome Version 52. Please check your chrome browser version.

You can use Cordova-plugin-media cordova plugin for recording Audio Files.

answered Sep 28 '18 at 14:54

Suresh Kumar Ariya

9,516
1
18
27

Once I enable the permissions, and relaunching the app, I can this in chrome inspect console. console.log("Video camera platform ready"). But still the intake which loads a website with getusermedia gets DomException : permission denied. – sowmiyaksr Sep 29 '18 at 05:22

Does getUserMedia works in ionic-webview in Android app?

2 Answers2

Linked