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
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/*">
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;
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.