Capacitor Camera built as PWA does not work correctly when opening as an app

Capacitor
1

Hi :slight_smile:

I have developed a very simple Ionic V4 PWA app with Capacitor Camera plugin.
I published the app on my server.

It works correctly on my desktop (I can take a picture with my webcam)
It also works correctly on my phone when I’m on iOS Safari.

HOWEVER, the camera does not work on:
- Chrome for iOS
- When I add the app in my home screen and then open the app

Here are the steps I did for creating this simple app:

  1. Create an Ionic app with Angular
  2. Install Capacitor & PWA Elements
  3. Add @Angular/pwa
  4. Build it and deploy the www folder on my server

Do you have any idea of what can create this behavior ?

Thanks !

2

Do you know if you are getting any stack trace on the plugin invocation?

3

Hi terranmarine,
thanks for the answer.

To be more accurate, I first built my ionic application with Native Camera plugin (actually the GetStarted of Ionic doc).
Then when I understood that I could not use this camera as a PWA app, I turned to Capacitor.
So I installed Capacitor and PWA element from this existing Ionic project and change the plugin function to capacitor camera into my app.

I’m new on mobile side development, how can I get these stack trace when I run the PWA on my mobile ?
I found something for collecting logs when I run it on Chrome iOS (chrome://inspect page) but when I run it as an “app”, how can I do ?

Here are the logs displayed in Chrome for iOS when I’m going to my app url then try to open the camera:

WARNING Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator.
WARNING Native: tried calling StatusBar.styleDefault, but Cordova is not available. Make sure to include cordova.js or run in a device/simulator.
LOG Camera issue: undefined is not an object (evaluating 'navigator.mediaDevices.enumerateDevices')

Thanks,
Arnaud

4

Hi Arnaud

When you are debugging the PWA on a mobile device you can inspect the Webview with google chrome for android and safari for iOS. First you need to deploy the app on the device with Android studio or Xcode.

Android:
After you have your app installed in your device you can go to Chrome -> F12 -> ctrl + shift + p and search for remote devices. Your device should appear as an option there and when you launch the app you should be able to inspect the WebView.

iOS:
After you have your app on the device you can find the connected device in Safari’s Develop menu and inspect the WebView from there.

Note that this is pretty brief explanation. I would advise your to look for an indepth tutorial on the topic as there are some pre-requirements as well.

Alex.

5

https://ionic-pwa-camera-no-plugins.firebaseapp.com/

6

Hi IonicGeoff,
Thanks for your answer, but I don’t want my app to open image folder if the camera plugin is not available.
However I do want my camera plugin to work for each environment, if that’s possible …

For example, when I run my app on Safari iOS (mobile), the camera is used correctly, however, when I save the app as a homescreen web app and run it, the camera does not work anymore…

Probably an Apple related bug ? I’ve just seen this article, very related to my case: https://stackoverflow.com/questions/56974939/ionic-capacitor-pwa-mobile-camera-access-on-ios-works-in-safari-but-not

Do yo see any alternative except create a “true” mobile app and deploy it on stores ?

Thanks,
Arnaud

7

Hi Alex,
thanks for your information, will do.

Btw, I’ve just seen this article, in which we can read that camera plugin does not work on iOS when we save the PWA as an homescreen app: https://stackoverflow.com/questions/56974939/ionic-capacitor-pwa-mobile-camera-access-on-ios-works-in-safari-but-not

Do yo see any alternative except create a “true” mobile app and deploy it on stores ?

Thanks,
Arnaud

8

Hi,

maybe an angular webcam lib can get the job done. Did you give this option a shot?

Maybe something like https://www.npmjs.com/package/ngx-webcam

It also says that it has access to front or rear camera, which means it should work with mobile devices as well.

9

Maybe we’re out of luck with IOS…

https://bugs.webkit.org/show_bug.cgi?id=185448

Also, have you read this, not sure how much relates to IOS…

I don’t have access to IOS device, so can’t help…

10

Hi,

@terranmarine: I tried the ngx-webcam demo and it seems to work on Safari and homescreen app BUT the homescreen app is actually using Safari (because the demo project is not built as a PWA)
I will try to add @angular/pwa to the demo project, build as a PWA and try the webcam in the homescreen app. I will let you know !

@IonicGeoff: I read your articles and all seem to say the same thing: iOS does not permit a PWA, run as an homescreen app, to use webcam… for the moment at least.

Thanks for all guys, I suppose the best way for this type of “native” features is to create a native mobile app and deploy on the stores.

1 Like