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;

I had the same problem with the last beta. With the release version the home page does not work and also safari does not work (for example the page you link to). This is on an iPhone7 — Peter, Sep 19 '17 at 09:41
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. — perfect_element, Oct 13 '17 at 15:04
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 '17 at 14:48
I have the same issue. When i save it to home screen and try to access the camera through the "web app" it just turns black and not usable — Nico, Nov 01 '17 at 14:59
iOS 11.3 Beta - Still does not work fully, getUserMedia and webkitGetUserMedia are both undefined. — ro-savage, Mar 16 '18 at 01:53
how to get working? getUserMedia and webkitGetUserMedia are both undefined — Aron, Jun 12 '18 at 02:54
iOS 11.4.1 doesn't seem to be working for me any luck anyone? — Amah, Jul 23 '18 at 22:52
.. wait ... testing it right now, it did not stay black using the file input - selecting camera I could take a photo and it worked ... strange ... yesterday and the past days, it did not. Super unreliable. — BananaAcid, Jan 28 '20 at 10:18

score 26 · Accepted Answer · answered Sep 21 '17 at 17:42

26

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.

answered Sep 21 '17 at 17:42

Tomas Vitasek

334
3
2

StateOfTheArtJonas · Answer 2 · 2018-04-07T19:51:49.533

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.

You update doesn't appear to be correct. In iOS 11.3 Beta `getUserMedia` and `webkitGetUserMedia` are both undefined when using `` — ro-savage, Mar 16 '18 at 01:55
@ro-savage the final release is now out, and we still cannot get this to work — owenmelbz, Apr 06 '18 at 16:17
safari is the new ie, please apple, give us permission to access user media data — Pablo Cegarra, Jan 17 '19 at 12:15

Joachim Bøggild · Answer 3 · 2018-07-13T22:12:26.580

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:

Serve these files from a website accessible from your phone
Open the index.html in iOS Safari
Add to home screen
Open app from home screen. Now the web page is open in full screen, without navigation ui.
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.

edited Jul 13 '18 at 22:12

answered Jan 27 '18 at 06:20

Joachim Bøggild

614
5
15

How did you manage to get it running with ? – Alexander Feb 28 '18 at 09:06
1

I used a normal form with an input tag, and it worked. – Joachim Bøggild Mar 09 '18 at 09: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 '18 at 10:53
Yes quite sure. I have it running at posmo.com. I cannot remember the settings. They include a manifest file though. – Joachim Bøggild Jul 02 '18 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 03 '18 at 17:17
+1 to what @May said -- i've got my web app running great in mobile safari w/ front facing cam but it throws errors in PWA mode – Stephen Tetreault Jul 09 '18 at 22:42
I have updated the answer to point to some html that works in home screen mode on iOS Safari. – Joachim Bøggild Jul 13 '18 at 22:13
Still shows Black screen to me on 12.0. I'll give up trying to support this to iPhone users. They will just use the "choose file" field, which provides the "Take Photo" native functionality. Ridiculous bugs on iPhones all the time... – Nuno Jul 28 '18 at 17:45
Do you have this demo hosted somewhere? – chovy Dec 03 '19 at 06:35
No, sorry. Actually I have it running, but it is in a company app, which is not publicly available. But it is used every day, so I can safely say that it does work. But the repository linked above is usable - you can download it and host it on your own computer and access it from a phone on the same network. – Joachim Bøggild Dec 11 '19 at 13:16

jvitor83 · Answer 4 · 2020-03-21T01:10:01.610

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

edited Mar 21 '20 at 01:10

answered Jun 07 '19 at 14:37

jvitor83

220
8
20

3

Apple disabled it again https://twitter.com/kkogovsek/status/1143826175543914497 :( – user2929594 Jul 02 '19 at 20:50

aalcutt · Answer 5 · 2018-07-19T17:43:34.977

1

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

edited Jul 19 '18 at 17:43

answered Jun 05 '18 at 20:21

aalcutt

300
1
5

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 '18 at 02:49
I didn't make any changes. Just updating to the latest version and it started working again. – aalcutt Jun 13 '18 at 15:02
1

checked on 11.4 . works in safari - doesn't work as a home screen app – May Jul 03 '18 at 17:05
I am on iOS 11.4.1 on iPad and it is working. What device are you using? – aalcutt Jul 19 '18 at 17:39
iOS 11.4.1: WebRTC getUserMedia is still not working. Very frustrating. – JTvermose Aug 28 '18 at 07:07
1

Any reason you can't use the file input? That is working again. – aalcutt Aug 28 '18 at 15:21

score 0 · Answer 6 · answered Apr 22 '20 at 08:15

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!