Hi guys
I’m developing a PWA using ionic 4. Future plans don’t include making the app available on the stores.
One of the feature I need to take or upload photos.
I was wandering what the best approach would be?
Capacitor?
If so, do I need to use pwa elements? Or would it use the native stuff of mobile devices?
Cordova?
HMTL input?
Not sure about browser support on this one…
Thank you for your inputs
Capacitor sounds like a good solution for PWA camera.
About the PWA elements, I don’t know what’s the actual status. It used to be needed but if I remember correctly it was plan that it would not be needed anymore for version 1. You could give a quick try with a dummy project and you will have your answer
Cordova as far as I know don’t offer a PWA support for camera and file upload
HTML input works surprisedly well I think but the down side is that it need then some custom code from your side. I add to develop that in my app as I rely on Cordova for the store and wanted to deploy it on the web too.
A start is something like:
<input type="file" id="pwaphoto" #pwaphoto accept="image/x-png,image/jpeg" (change)="uploadPWA()">
Hi.
I did a repo for accessing the camera via pwa using ionic 3. However the code can be easily lifted into ionic 4.
Your code actually works with Ionic4 and iOS, however in a desktop with a browser is just a file upload
There is now even a documentation page for the PWA elements of Capacitor: https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/
That would make sense. I didn’t write it for the desktop browser.
Yes… I managed to make it work in the browser. It’s quite easy to achieve even though the documentation is pretty poor.
Make what work? The Capacitor PWA element or my repo example?
The capacitor pwa element. As you stated already your repo example won’t work in the browser.
Hi,
Could you please give some guide how do you implement with capacitor pwa element? Some example please.
Regards
Senaka
Did you read the documentation? Should be enough to get started.
https://capacitor.ionicframework.com/docs/getting-started/pwa-elements/
https://capacitor.ionicframework.com/docs/apis/camera
After spending some time on Capacitor PWA Camera, there just still too many bugs some ranging from Nov 18 and yet to be fixed. Unfortunately my opinion/experience has led me say to stay away from Capacitor Camera as it is unstable well at least for use in PWA.
The best solution is what reedrichards suggested, also a good link with working demo is below.
Glad you got it working with camera-no-plugins. I did not. I too tried that no-plugins -link but I could not get any camera picture in Chrome. Only button with a choose file -prompt.
Funny that I did get the camera working in chrome but I could not get Capacitor PWA camera working in chrome on an ipad.