How to access camera on iOS11 home screen web app?

Solution 1:

We have quite similar problem. So far the only workaround we were able to do is to remove the meta tag for it to be "apple-mobile-web-app-capable" and let users to open it in Safari, where everything seems to work normally.

Solution 2:

Update: While some earlier published changelogs and postings led me to believe that Web Apps using a manifest.json instead of apple-mobile-web-app-capable would finally have access to a proper WebRTC implementation, unfortunately this is not true, as others here have pointed out and testing has confirmed. Sad face. Sorry for the inconveniences caused by this and let's hope that one lucky day in a galaxy far, far away Apple will finally give us camera access in views powered by (non-Safari) WebKit...

Yes, as others have mentioned, getUserMedia is only available directly in Safari but neither in a UIWebView nor WKWebView, so unfortunately your only choices are

  • removing <meta name="apple-mobile-web-app-capable" content="yes"> so your 'app' runs in a normal Safari tab, where getuserMedia is accessible
  • using a framework like Apache Cordova that grants you access to a device's camera in other ways.

Here's to hoping Apple removes this WebRTC restriction rather sooner than later...

Source:
For developers that use WebKit in their apps, RTCPeerConnection and RTCDataChannel are available in any web view, but access to the camera and microphone is currently limited to Safari.

Solution 3:

Good news! The camera finally seems to be accessible from a home screen web app in the first iOS 11.3 beta.

I have made a repo with a few files, which demonstrate that it works:

https://github.com/joachimboggild/uploadtest

Steps to test:

  1. Serve these files from a website accessible from your phone
  2. Open the index.html in iOS Safari
  3. Add to home screen
  4. Open app from home screen. Now the web page is open in full screen, without navigation ui.
  5. Press the file button to select an image from camera.

Now the camera should work normally and not be a black screen. This demonstrates that the functionality works again.

I must add that I use a plain field, not getUserMedia or somesuch. I do not know if that works.

Solution 4:

Apparently is solved in "ios 13 beta 1": https://twitter.com/ChromiumDev/status/1136541745158791168?s=09

Update 20/03/2020: https://twitter.com/firt/status/1241163092207243273?s=19

Solution 5:

This seems to be working again in iOS 11.4 if you are using a file input field.