Camera Screen is black on mobile phone!

Capacitor
1

Hello,

I have created a PWA app and so far only tested it under desktop browsers (ionic serve). The access to my connected webcam works without any problems. Now I wanted to test the app on my Android mobile phone with Chrome for the first time and transferred the contents of the WWW directory (ionic build --prod) to my app server. The app can be called up and installed, the app icon even appears on the smartphone screen. The corresponding requests (access permissions) appear. As soon as I click on the camera icon, a prompt appears. I give the app permission to access the camera. A green icon then appears in the top Android toolbar, which signals to me that the app has access to the camera! However, the camera screen remains black :frowning:

I see the 3 icons at the bottom, one on the left for selecting an image from the file system, in the middle the icon for creating a photo, and on the right the icon for changing perspective, if I click on the middle icon, nothing happens. When I click on the icon on the right, nothing happens. When I click on the left icon to select a file, a gallery opens with the photos on the device. Previously, I was also asked for permission to access the gallery. I can select an image file here.

Does anyone have any idea why the camera screen remains black on mobile phone?

And is there a way to open a console on the mobile phone so that I can see the app’s control output? For example, how can I determine whether an exception error has occurred when accessing the camera?

Ionic Info
Ionic CLI : 7.1.3 (C:\Users\thoma\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 7.5.3
@angular-devkit/build-angular : 16.2.9
@angular-devkit/schematics : 16.2.9
@angular/cli : 16.2.9
@ionic/angular-toolkit : 10.0.0
Capacitor:
Capacitor CLI : 5.5.1
@capacitor/android : not installed
@capacitor/core : 5.5.1
@capacitor/ios : not installed
Utility:
cordova-res : 0.15.4
native-run : 1.7.3
System:
NodeJS : v18.17.1 (C:\Program Files\nodejs\node.exe)
npm : 9.6.7
OS : Windows 10

2

Show your code on how you set up the camera for pwa. sounds like you missed a step: PWA Elements | Capacitor Documentation

3

I had to restart my mobile phone to get the camera work. The screen was also black, when I started the camera withouth the app. And I changed one code line, but cant say if that was the reason for the black screen.

There was a code version (v4) where you explained

// Call the element loader after the platform has been bootstrapped
defineCustomElements(window);

Since version 5 you have to put this line before the bootstrapModule, but it s not mentioned in the Upgrade Guide to v5.

// Call the element loader before the bootstrapModule bootstrapApplication call
defineCustomElements(window);

Does the order of this statement really matter that much?