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

**URL:** <https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494>\
**Category:** Capacitor\
**Created:** [November 13, 2019, 3:11pm UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494 "2019-11-13T15:11:27Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arnaudibak](https://avatars.discourse-cdn.com/v4/letter/a/87869e/32.png) [@Arnaudibak](https://forum.ionicframework.com/u/Arnaudibak)\
**Post date:** [November 13, 2019, 3:11pm UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/1 "2019-11-13T15:11:27Z")

</div>

Hi 🙂

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 !

---

<div class="post-metadata">

**Author:** ![terranmarine](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/terranmarine/32/125840_2.png) [@terranmarine](https://forum.ionicframework.com/u/terranmarine)\
**Post date:** [November 15, 2019, 9:12am UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/2 "2019-11-15T09:12:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Arnaudibak](https://avatars.discourse-cdn.com/v4/letter/a/87869e/32.png) [@Arnaudibak](https://forum.ionicframework.com/u/Arnaudibak)\
**Post date:** [November 15, 2019, 11:01am UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/3 "2019-11-15T11:01:20Z")

</div>

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:

```auto
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

---

<div class="post-metadata">

**Author:** ![terranmarine](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/terranmarine/32/125840_2.png) [@terranmarine](https://forum.ionicframework.com/u/terranmarine)\
**Post date:** [November 15, 2019, 11:14am UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/4 "2019-11-15T11:14:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![IonicGeoff](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ionicgeoff/32/128657_2.png) [@IonicGeoff](https://forum.ionicframework.com/u/IonicGeoff)\
**Post date:** [November 15, 2019, 11:44am UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/5 "2019-11-15T11:44:35Z")

</div>

[https://ionic-pwa-camera-no-plugins.firebaseapp.com/](https://ionic-pwa-camera-no-plugins.firebaseapp.com/)

---

<div class="post-metadata">

**Author:** ![Arnaudibak](https://avatars.discourse-cdn.com/v4/letter/a/87869e/32.png) [@Arnaudibak](https://forum.ionicframework.com/u/Arnaudibak)\
**Post date:** [November 15, 2019, 12:20pm UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/6 "2019-11-15T12:20:44Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![Arnaudibak](https://avatars.discourse-cdn.com/v4/letter/a/87869e/32.png) [@Arnaudibak](https://forum.ionicframework.com/u/Arnaudibak)\
**Post date:** [November 15, 2019, 12:35pm UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/7 "2019-11-15T12:35:48Z")

</div>

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](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

---

<div class="post-metadata">

**Author:** ![terranmarine](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/terranmarine/32/125840_2.png) [@terranmarine](https://forum.ionicframework.com/u/terranmarine)\
**Post date:** [November 15, 2019, 12:48pm UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/8 "2019-11-15T12:48:28Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![IonicGeoff](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ionicgeoff/32/128657_2.png) [@IonicGeoff](https://forum.ionicframework.com/u/IonicGeoff)\
**Post date:** [November 16, 2019, 5:26am UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/9 "2019-11-16T05:26:56Z")

</div>

Maybe we’re out of luck with IOS…

> **[What’s new on iOS 12.2 for Progressive Web Apps](https://medium.com/@firt/whats-new-on-ios-12-2-for-progressive-web-apps-75c348f8e945)**
>
> One year after the first initial support for PWAs on iOS, Apple released iOS 12.2 for iPhone and iPads with what it seems to be the…

[https://bugs.webkit.org/show\_bug.cgi?id=185448](https://bugs.webkit.org/show_bug.cgi?id=185448)

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

> <https://stackoverflow.com/questions/44953454/pwa-mobile-camera-access/46114543#46114543>

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

---

<div class="post-metadata">

**Author:** ![Arnaudibak](https://avatars.discourse-cdn.com/v4/letter/a/87869e/32.png) [@Arnaudibak](https://forum.ionicframework.com/u/Arnaudibak)\
**Post date:** [November 16, 2019, 7:03pm UTC](https://forum.ionicframework.com/t/capacitor-camera-built-as-pwa-does-not-work-correctly-when-opening-as-an-app/177494/10 "2019-11-16T19:03:11Z")

</div>

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.
