getUserMedia is not defined (Android/iOS)

I have an Ionic 2( Based on Angular2+) App which uses QuaggaJS to Stream the Camera to my View (Div Container) like Snapchat to scan QR Codes. In the browser, it all works like a charm but, the moment it gets built as APK or IPA file I’m getting the Error.

Android:

chromium: [INFO:CONSOLE(76955)] "Error: getUserMedia is not defined"

I used ADB and a Virutal Android Device to get the logcat output. Important Info: Yes I have all Permissions and yes my Device is on Android 7.0 (because WebRTC is only supported on 5.0+)!

iOS:

Error: getUserMedia is not defined

And yes I have iOS 11 Beta 3 installed on my Device (because WebRTC is only supported on iOS 11)! Here a picture of the error output on my mac (Sorry for the bad quality).

Browser:

Everything works perfekt!

Code Snippet:

As you can see above the error it states

ERRORINFO: SetUp QuaggaJS

This is a Console Output which is generated by myselfe to locate the error. So the error must be here in this codesnippet:

   Quagga.init({
         inputStream : {
             name : "Live",
             type : "LiveStream",
             constraints: {
               width:  window.innerWidth,
               height: window.innerHeight,
               facingMode: "environment"
             },
             area: {
                top: "0%",
                right: "0%",
                left: "0%",
                bottom: "0%"
            },
           target: document.querySelector('#scanner')
         },
         locator: {
           patchSize: "medium",
           halfSample: true
         },
         numOfWorkers: (navigator.hardwareConcurrency ? navigator.hardwareConcurrency : 4),
         decoder : {
          readers: [ "code_128_reader",
                     "ean_reader",
                     "ean_8_reader",
                     "code_39_reader",
                     "code_39_vin_reader",
                     "codabar_reader",
                     "upc_reader",
                     "upc_e_reader",
                     "i2of5_reader" ],
         },
         locate: true
       }, function(err) {
           if (err) {
               console.error("ERRORINFO: SetUp von QuaggaJS");
               console.error(err);
               return
           }
           console.log("Initialization finished. Ready to start");
           Quagga.start();
       });

And for me it looks like the error gets triggered in this line:

target: document.querySelector('#scanner')

#scanner is just an div container for the livestream (as I said it works in browser, but just if you wonder what scanner is):

<div id="scanner" ion-fixed class="scannerdiv">
</div>

What have I tried?

As you mentioned in your documentary:

Every browser seems to differently implement the mediaDevices.getUserMedia API. Therefore it’s highly recommended to include webrtc-adapter in your project.

So I installed it with npm. But that didnt work, so after that I imported it directly in my index.html like this:

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>

Well that didnt work either. @serratus

[poliander]

I can confirm that Quagga definitely works on iOS 11 (at least with WebRTC adapter.js included).

[lreiner]

Update:

I found out that on iOS it doesnt have premissions for the camera. Well I set the premissions in code and on Android it works but it seems on iOS I must call the premissions in lifetime to ask the user to access the camera.

So I’m searching for a Ionic/Cordova Plugin which ask users in lifetime to gain premissions for Camera, Storage and Audio. If that worked I’ll post it here.