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;