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 continue to access the camera please?

We are serving the web app page over https.

Update, April

The public release of iOS 11.3 seems to have fixed the issue and file input camera access is working again!

Update, March

As people here have said the Apple docs advise web app camera function is returning in 11.3 along with service workers. This is good but we are not sure yet if we want to everyone to to reinstall again until we can thoroughly test on 11.3GM.

Solution, November

We lost hope Apple want to fix this and moved forward. Modified our web app to remove the iOS "Add to home screen" function and asked affected users to remove any previous home screen icon.

Update, 6 December

iOS 11.2 and iOS 11.1.2 don't fix.

Workarounds, 21 September

Seems we could ask existing customers of the web app

• not upgrade to iOS11 - good luck with that :)
• take photos in iOS camera and then select them back in the web app
• wait for next ios beta
• reinstall as a Safari in-browser page (after we remove ATHS logic)
• switch to Android

File Input

Our current production code uses a file input which has worked fine for years with iOS 10 and older. On iOS11 it works as a Safari tab but not from the home screen app. In the latter case the camera is opened and only a black screen is shown, hence it is unusable.

   <meta name="apple-mobile-web-app-capable" content="yes">
   ...
   <input type="file" accept="image/*">

WebRTC

Safari 11 on iOS11 offers WebRTC media capture which is great.

We can capture a camera image to canvas on a normal web page on desktop and mobile using navigator.mediaDevices.getUserMedia per the sample code linked here.

When we add the page to iPad or iPhone home screen, navigator.mediaDevices becomes undefined and unusable.

    <meta name="apple-mobile-web-app-capable" content="yes">
    ...
    // for some reason safari on mac can debug ios safari page but not ios home screen web apps 
    var d = 'typeof navigator : ' + typeof navigator; //object
    d += 'typeof navigator.mediaDevices : ' + typeof navigator.mediaDevices; // undefined
    // try alternates
    d += 'typeof navigator.getUserMedia  : ' + typeof navigator.getUserMedia; // undefined
    d += 'typeof navigator.webkitGetUserMedia  : ' + typeof navigator.webkitGetUserMedia; // undefined
    status1.innerHTML = d;

Answer 1

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 2

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 3

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

Answer 4

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 5

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.

Answer 6

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.