Hi there –
I’m building my first real app with Ionic. I was planning to release it as a Progressive Web App (i.e., to host it on www.myapp.com, rather than requiring the user to install it as a native app).
However, I need to be able to access the device’s camera. Can I do this in a PWA, or would I have to publish it as a native iOS / Android app instead?
Noob question, I know 
Pretty sure this thread has some insight for you. Cheers!
You seem to be in luck. Camera is apparently one of the relatively few cordova plugins supported by the “browser” platform.
I’ve used in the browser, it works, but it renders an unstyled form at the root of <body> so you’ll need to hackishly style it to make it fit with what/where you need it to work.
YEARS ago I did a PWA app targeting the iPhone which made extensive use of the camera.
It was quite simple in the end as it sent back a base64 string with which you can do whatever you like.
The link beneath (nothing to do with me) has an example of that.
Hello again –
Thanks for the replies. However, I’m afraid I’m pretty confused, and not having much luck.
I’m confused about the difference between the “www” platform and the “browser” platform. I’ve tried searching, but these are hard terms to Google. Any hints? Maybe “www” is for regular browsers (e.g., Chrome), and “browser” is for the WebView (Android) / UIWebView (iOS) wrapper that serves as the host environment for apps which have been installed to a device’s home screen? Or maybe I’m totally on the wrong track?
I ran ionic cordova run browser. This builds my app and exposes it at localhost:8000. I’m then able to pull up my app in Safari on an iPad on the same network, by navigating to http://12.34.56.78:8000. But when the app calls Camera.getPicture(), I get an alert that says: “Browser does not support camera :(” (Yes, the frowny face is part of the alert.) I tried searching for this phrase, and there’s almost nothing on Google.
Perhaps loading the app in Safari isn’t enough, and I need to actually install it on my home screen and run it from there? The problem is, I’ve installed and uninstalled the app in the past, and Safari no longer prompts me to install it. If I pick “add to home screen” from the bookmark menu, then I just get a bookmark which opens in Safari – which puts me right back where I started. How can I force Safari to display the install prompt?
ETA: I just realized that my app must be served via HTTPS before the install banner will display, but I’m browsing http://12.34.56.78:8000. So that probably explains it. But, Ionic’s development server doesn’t seem to support HTTPS. Do I have to build the app and put it on an SSL-enabled server before I can test the real-world experience on the iPad? That’s gonna be a serious headache for development.
ETA: Well, I went ahead and put it on an SSL-enabled server. Browsing to that URL simply displays a Cordova logo, with the text “Apache Cordova – Connecting to Device” below. It just stays there forever.
ETA: I traced the “Browser does not support camera” error to this file in cordova-plugin-camera. It’s failing to find navigator.getUserMedia, which is deprecated. So, it seems that – although there may have been some camera support in the browser in the past – this is no longer the case.
If that’s accurate, then I’m looking at a major change of plans for my app (it’ll have to be native instead of a PWA). Argh.
Howdy,
I’ll be honest. I’ve forgot what the original goals actually were.
Did you try out the link thing I sent re input type=“file” ? It would take no time at all to test it out.
Though there is a current issue with that approach in the form of iOS11. They’ve broken the functionality when you have your app as a home screen link. They’ll fix it soon enough I’m sure.
I did try that. Unfortunately, I couldn’t figure out how to read the file data once the user had selected a file and submitted the form. I tried examining this.formGroup.controls.photoField.value, but it’s always an empty string.
If I get chance I could put a little implementation together.
If you do find the time, I would really appreciate it – and I’m sure that future searchers would, as well! If I can get around asking the client to sideload an app, that’s obviously a big plus…
Okay - late in the day so getting tired, but here ya go.
Normally I’d do a little vid but the wife had a baby a few days ago so I’m a bit tired. Let me know if that works for you.
I’ve called it ‘Pwa’ instead of ‘Camera’ as I might shove other PWA examples in it at a later date.
Anyway, let me know what you think.
James
Already add the second bit - on that git repo there’s also an example of how to handle scrolling which is worth a look.
Dude, you’re a legend! Thanks so much – I’m now able to retrieve a base64 representation of the selected file. (And that repo of examples is a good idea – maybe I’ll contribute once I’m a bit more experienced.)
Future readers, if you’re getting “Cannot read property ‘nativeElement’ of undefined”: make sure that your file input actually exists when ionViewDidLoad() runs. Mine is inside of an *ngIf, which suppresses the entire form until the record being edited is loaded.
So, I’ll need to move the fileinput bootstrap code out of ionViewDidLoad(), and instead called it explicitly once the record has been loaded. I don’t have this working quite yet, but I’m pretty sure the *ngIf is the issue.
I ended up using the ionViewDidEnter() callback instead of ionViewDidLoad(). I’m not 100% sure why this was necessary, but it does the trick.
Don’t forget to thumb up or mark as solution 
Of course; didn’t realize that was a thing here. Done!
A much later update… The camera input with full-screen web apps is once again working on iOS 11 with the advent of iOS 11.3.
Thank you Apple - you only left it completely broken for 6 months!
