No camera found

Capacitor
1

Hello,

I dont get my web cam for taking photos any more. It all still worked when I tested it two month ago. It s the same pc + webcam hardware, just new windows 11 and dev environment. To check if my main app is broken I created a new test project and followed the documentation First App with Photo-Gallery. But the problem also occures in this test app. A webcam c922 is connected and I can see a live webcam picture in the windows 11 device settings (settings/bluetooth+devices/webcams)

In this screenshot you see my testproject

camera_not_found
camera_not_found1920×1200 207 KB

!

When I press the close icon I get the typical uncaught error. How can I catch this error? And there is an annoying warning “… rules skipped due to selector errors”. Would also be nice to get rid of this warning.

Any idea why it doesnt work any more?

2

Hi, I think the issue is the url.

Normally, we usually use http://localhost:8100/ for dev environment.

You should avoid using http://192.168.178.21:8100 because modern browser will block the camera for security reason. (Reference: Camera & microphone require https in Firefox 68. - Advancing WebRTC)

Running the dev server at localhost should be able to fix the issue:

ionic-serve-1
ionic-serve-12560×1461 270 KB

ionic-serve-2
ionic-serve-22560×556 15.7 KB

ionic-camera
ionic-camera2560×1600 147 KB

1 Like
3

Hello,
the ionic extension doesnt use localhost for local when I select an external network address listed in the popup menu after clicking on Run/Web.

ionic_external_network_address
ionic_external_network_address1284×243 27.4 KB 

[Ionic] Running on Web...
> npx ionic serve --external --configuration=production --public-host=192.168.178.21
> ng.cmd run app:serve:production --host=0.0.0.0 --port=8100 --public-host=192.168.178.21

The result is

[ng] √ Compiled successfully.
[INFO] Development server running!
       
       Local: http://192.168.178.21:8100
       External: http://192.168.178.21:8100, http://192.168.56.1:8100
       
       Use Ctrl+C to quit this process
[INFO] Browser window opened to http://192.168.178.21:8100!

But when I ignore the popup for external network address and click somewhere else then it choose localhost

[Ionic] Running on Web...
> npx ionic serve --external --configuration=production
> ng.cmd run app:serve:production --host=0.0.0.0 --port=8100
[...]
[INFO] Development server running!
       
       Local: http://localhost:8100
       External: http://192.168.178.21:8100, http://192.168.56.1:8100
       
       Use Ctrl+C to quit this process

Thats a bit confusing, because in both cases external is http://192.168.178.21:8100

Ok, with localhost the camera can be found. So I have to ignore this popup menu by clicking somewhere else (just pressing enter in the menu also use 192.168.178.21 !) or I choose to enter “ionic serve” in the terminal. Then it also use localhost automatically.

1 Like
4

Could the Windows 11 upgrade be why my webcam suddenly won’t take photos, even though it worked before? Tried a fresh project following Photo-Gallery docs, but still no luck. The webcam (c922) is detected and works in Windows settings. Any quick fixes?