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

Tags: iOS 11, PWA, Camera


  • 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:

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">





1 Like

that’s a gold post :thumbsup:

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.


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 => { = window.URL.createObjectURL(stream); = stream;;
      }).catch(function(err) {
        this.logger.error( + ': ' + 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.


1 Like

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

It’s deprecated:


-> 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:

1 Like

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: