Tags: iOS 11, PWA, Camera
Glossary:
- PWA (no PhoneGap/Cordova plugins)
- Hybrid Mobile App (PhoneGap/Cordova plugins)
TL;DR: Your PWA cannot access the camera of a device running iOS 11 (e.g., iOS 11.2.6). Your PWA can access the device’s photo library.
Raymond Camden has a great post on his blog about accessing a device’s camera without using any plugins:
https://www.raymondcamden.com/2016/06/03/capturing-camerapicture-data-without-phonegap-an-update/
Try running Raymond’s test script in Safari on your iOS 11.x device: http://regular-rod.surge.sh/
Test 2:
Take Photo or Video:
It does launch the camera but you cannot use the camera (video or photo).
For example:
...
<input type="file" accept="image/*;capture=camera">
...
iOS:
Android:
1 Like
About this Subject
You can also optionally add the capture attribute to the element, which indicates to the browser that you prefer getting an image from the camera.
<input type="file" accept="image/*" capture>
<input type="file" accept="image/*" capture="user">
<input type="file" accept="image/*" capture="environment">
Adding the capture attribute without a value let’s the browser decide which camera to use, while the “user” and “environment” values tell the browser to prefer the front and rear cameras, respectively.
Source:
Yes, I was trying to get the Camera working in iOS 11.2.6 without success:
...
public ngAfterViewInit() {
const constraints = {
audio: false,
video: {
width: { min: 1024, ideal: 1280, max: 1920 },
height: { min: 776, ideal: 720, max: 1080 },
facingMode: 'environment'
}
};
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia(constraints).then(stream => {
this.video.nativeElement.src = window.URL.createObjectURL(stream);
this.stream = stream;
this.video.nativeElement.play();
}).catch(function(err) {
this.logger.error(err.name + ': ' + err.message);
});
} else {
this.logger.error('Your browser does not support the mediaDevices API');
}
}
}
...
E.g., navigator.mediaDevices.getUserMedia() is undefined 
So then I switched to using:
<input type="file" ... >
Which allowed me to access the device’s photo library but not the camera (of a device running (iOS 11.2.6).
iOS 11.3 allows access the device’s camera and the photo library via the <input type="file"> element.
But, navigator.mediaDevices.getUserMedia() is still undefined.
See: https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
1 Like
Super interesting post, thx for all the information.
When I tried to play with mediaDevices I used to call it like following, but I don’t remember if I tested it on iOS < 11.3
const getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
could that help?
also I remember that my problem was the result, “back then” the stream had to be handled differently in Chrome and in Safari
Did you try with Capacitor? I tried the camera of Capacitor in a PWA on Safari and Chrome on my mac, in a bundled app on iOS and Android (all good) but I didn’t tried it in a PWA in Safari on an iPhone
It’s deprecated:
See: https://stackoverflow.com/questions/45692526/ios-11-getusermedia-not-working?noredirect=1&lq=1
-> Yep, it’s moved to navigator.mediaDevices.
I’ll try tweaking the constraints, but for now its working on iOS 11.3 using:
<input type="file" ... >
For example:
I haven’t tried any of the Ionic 4 PWA-related stuff just yet, as I’m trying to get an Ionic 3-based PWA out the door 
1 Like
After having read your post I did the same, tried to get the camera working in Ionic 3 PWA and you are right <input type="file" accept="image/*"/> just work fine 
