How to access camera on iOS11 home screen web app?

Question

Summary

We cannot access camera from an iOS11 (public release) home screen web app using either WebRTC or the file input, details below. How can our users continu

Answer 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.

Answer 2

Recently I faced the same problem, the only solution I came up with was to open in the app in browser instead of the normal mode. But only on iOS!

The trick was to create 2 manifest.json files with different configurations.

The normal one for android and one for everything is Apple, manifest-ios.json, the only difference will be on the display property.

Step 1: Add id to the manifest link tag:

<link id="manifest" rel="manifest" href="manifest.json">

Step 2: Added this script to the bottom of the body:

<script>
    let isIOS = /(ipad|iphone|ipod|mac)/g.test(navigator.userAgent.toLowerCase());
    let manifest = document.getElementById("manifest");
    if (isIOS)
      manifest.href = 'manifest-ios.json'
</script>

Step 3: in the manifest-ios.json set the display to browser

{
    "name": "APP",
    "short_name": "app",
    "theme_color": "#0F0",
    "display": "browser", // <---- use this instead of standard
    ...
}

Another problem appears such as opening the app multiple times in multple tabs, sometimes.

But hope it helps you guys!

Answer 3

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

Answer 4

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

Answer 5

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.

Answer 6

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.