iOS 11 its not me its you (tags: iOS11, PWA, Camera)


#1

Tags: iOS 11, PWA, Camera

Glossary:

  • PWA (no PhoneGap/Cordova plugins)
  • Hybrid Mobile App (PhoneGap/Cordova plugins)

TL;DR: Your PWA cannot access the camera of a device running iOS 11 (e.g., iOS 11.2.6). Your PWA can access the device’s photo library.

Raymond Camden has a great post on his blog about accessing a device’s camera without using any plugins:

Try running Raymond’s test script in Safari on your iOS 11.x device: http://regular-rod.surge.sh/

Test 2:

Take Photo or Video:

It does launch the camera but you cannot use the camera (video or photo).

For example:

  ...
  
  <input type="file" accept="image/*;capture=camera">

  ...

iOS:

Android:


Ionic PWA-Toolkit
Caching nav state for ios PWA
Can I use ionic-native components in a PWA, or do I need to publish my app for iOS / Android?
Ionic v3 is all I care about
How to choose multiple images for ionic app
Ionic 3 PWA -> iOS 11.4.1 issues
#2

that’s a gold post :thumbsup:


#3

About this Subject

You can also optionally add the capture attribute to the element, which indicates to the browser that you prefer getting an image from the camera.

<input type="file" accept="image/*" capture>
<input type="file" accept="image/*" capture="user">
<input type="file" accept="image/*" capture="environment">

Adding the capture attribute without a value let’s the browser decide which camera to use, while the “user” and “environment” values tell the browser to prefer the front and rear cameras, respectively.

Source:


#4

Yes, I was trying to get the Camera working in iOS 11.2.6 without success:

...

public ngAfterViewInit() {

    const constraints = {
      audio: false,
      video: {
        width: { min: 1024, ideal: 1280, max: 1920 },
        height: { min: 776, ideal: 720, max: 1080 },
        facingMode: 'environment'
      }
    };

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

      navigator.mediaDevices.getUserMedia(constraints).then(stream => {
        this.video.nativeElement.src = window.URL.createObjectURL(stream);
        this.stream = stream;
        this.video.nativeElement.play();
      }).catch(function(err) {
        this.logger.error(err.name + ': ' + err.message);
      });

    } else {
      this.logger.error('Your browser does not support the mediaDevices API');
    }
  }

}

...

E.g., navigator.mediaDevices.getUserMedia() is undefined :frowning:

So then I switched to using:

  <input type="file" ... >

Which allowed me to access the device’s photo library but not the camera (of a device running (iOS 11.2.6).

iOS 11.3 allows access the device’s camera and the photo library via the <input type="file"> element.

But, navigator.mediaDevices.getUserMedia() is still undefined.

See: https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7


White blank screen issue
#5

Super interesting post, thx for all the information.

When I tried to play with mediaDevices I used to call it like following, but I don’t remember if I tested it on iOS < 11.3

const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

could that help?

also I remember that my problem was the result, “back then” the stream had to be handled differently in Chrome and in Safari :frowning:

Did you try with Capacitor? I tried the camera of Capacitor in a PWA on Safari and Chrome on my mac, in a bundled app on iOS and Android (all good) but I didn’t tried it in a PWA in Safari on an iPhone


AngularFire & Firebase SDK
#6

It’s deprecated:

See: https://stackoverflow.com/questions/45692526/ios-11-getusermedia-not-working?noredirect=1&lq=1

-> Yep, it’s moved to navigator.mediaDevices.

I’ll try tweaking the constraints, but for now its working on iOS 11.3 using:

<input type="file" ... >

For example:

I haven’t tried any of the Ionic 4 PWA-related stuff just yet, as I’m trying to get an Ionic 3-based PWA out the door :slight_smile:


Capture Image(PWA)
Can I use vanilla javascript in Ionic?
#7

After having read your post I did the same, tried to get the camera working in Ionic 3 PWA and you are right <input type="file" accept="image/*"/> just work fine :wink: