video not displayed with external camera (Logitech)

[AoNoOokami]

Please follow the general troubleshooting steps first:

• [x] Is your app running over HTTPS? (please provide the URL if possible)
• [x] Have you tried running the demo (https://codepen.io/mozmorris/pen/JLZdoP) on your device? -> Actually present with the demo
• [x] Checked the latest "Can I use" compatbility table? (https://caniuse.com/stream)

Bug reports:

When I try the demo on a laptop with an external device, the video is not displayed in Firefox or Opera. The video tags are presents, but depending on the browser, I have either a black rectangle or nothing where the video should be displayed.

This issue is present when I use an external webcam on a laptop. I tried :

• MacOS + Logitech C920 HD PRO WEBCAM (not working with Firefox 118.0.1, Chrome 117.0.5938.132, Safari 17)
• Ubuntu 22.04.3 LTS + Logitech QuickCam Pro 9000 (not working with Firefox 118.0.1 and Opera 103.0.4928.16, fine with Chrome 117.0.5938.132)

However, the demo is working fine with the laptop built-in webcams.

I found this bug while evaluating the possibility to migrate an app from vanilla Javascript (MediaStream Recording API, video.js) to React. We don't have this issue with our current code.

Features:

Please note by far the quickest way to get a new feature is to file a Pull Request.

We will consider your request but it may be closed if it's something we're not actively planning to work on.

[AoNoOokami]

UPDATE: it seems that the problem is caused by Ubuntu apparmor profile for firefox (installed with snap). I leave this here in case some other people encounter similar issues. Still digging concerning Opera.