134

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;
16
  • 5
    I'm hoping they will fix it, but this can be another instance of Apple pushing developers into their app store by degrading Safari's UX. Oct 13, 2017 at 15:04
  • 3
    I'm trying to learn progressive web-app development and while testing an app on Android and iOS I ran into this problem as well. Browsing to the app in a browser works fine, but once I "save to home screen" from safari and try to use it like an app, I get a black screen when trying to access the camera.
    – tutley
    Oct 17, 2017 at 14:48
  • 2
    iOS: 11.2.1 - The problem persists...
    – aLiEnHeAd
    Dec 14, 2017 at 8:49
  • 2
    iOS: 11.2.2 - The problem persists...
    – MrRobot
    Jan 13, 2018 at 18:48
  • 3
    iOS 11.4.1 doesn't seem to be working for me any luck anyone?
    – Amah
    Jul 23, 2018 at 22:52

6 Answers 6

26
+50

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.

26

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.

3
  • You update doesn't appear to be correct. In iOS 11.3 Beta getUserMedia and webkitGetUserMedia are both undefined when using <meta name="apple-mobile-web-app-capable" content="yes">
    – ro-savage
    Mar 16, 2018 at 1:55
  • @ro-savage the final release is now out, and we still cannot get this to work
    – owenmelbz
    Apr 6, 2018 at 16:17
  • 4
    safari is the new ie, please apple, give us permission to access user media data Jan 17, 2019 at 12:15
15

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.

10
  • How did you manage to get it running with <meta name="apple-mobile-web-app-capable" content="yes"> ?
    – Alexander
    Feb 28, 2018 at 9:06
  • 1
    I used a normal form with an input tag, and it worked. Mar 9, 2018 at 9:37
  • @JoachimBøggild Are you sure iOS 11.3+ devices can open camera from a PWA?? Thanks for giving a good news.
    – jegadeesh
    Jun 30, 2018 at 10:53
  • Yes quite sure. I have it running at posmo.com. I cannot remember the settings. They include a manifest file though. Jul 2, 2018 at 22:17
  • 1
    @JoachimBøggild can you share the manifest / VIDEO tag for this. i've tested my code, and it only works in safari. not in the home screen app.
    – May
    Jul 3, 2018 at 17:17
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

1
1

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

6
  • 1
    i have ios 11.4 and it won't work on a home screen app. What are you doing to get it work?
    – Aron
    Jun 12, 2018 at 2:49
  • I didn't make any changes. Just updating to the latest version and it started working again.
    – aalcutt
    Jun 13, 2018 at 15:02
  • 1
    checked on 11.4 . works in safari - doesn't work as a home screen app
    – May
    Jul 3, 2018 at 17:05
  • I am on iOS 11.4.1 on iPad and it is working. What device are you using?
    – aalcutt
    Jul 19, 2018 at 17:39
  • 1
    Any reason you can't use the file input? That is working again.
    – aalcutt
    Aug 28, 2018 at 15:21
0

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!

Not the answer you're looking for? Browse other questions tagged or ask your own question.