Our application is implementing a feature that involves scanning QR codes, the scanner component was developed with @zxing/browser and it does work perfectly on localhost (tested on chrome and firefox, using macOS, Android, and iOS).
When we deploy it to our testing environment (which is served via HTTPS) it stops working on chrome for both desktop and android. Firefox still works fine on both and chrome works on iOS only.
When debugging this issue, the error reported is:
error: DOMException: Permission denied
code: 0
message: "Permission denied"
name: "NotAllowedError"
This error happens regardless of the permission defined via settings, it's replicable with permission set do allow, ask or (obviously) deny.
I was able to extract the Scanner component to a sandbox, and to my surprise, it works fine there.
You can check the sandbox here: Scanner component sandbox
I appreciate any inputs/insights on it, as I'm a bit clueless on what to check next in order to have it running in our environment normally.
Thank you in advance.
After some research, we were able to find that the reason the camera was being blocked on the testing environment was due to the feature policy header. In our application, it's added via asp.net web.config, since we don't have this on localhost it would work normally.
This will completely block access to camera:
<add name="Feature-Policy" value="camera 'none'" />
In order to enable and allow the browser to request permission, we need to have it as:
<add name="Feature-Policy" value="camera 'self'" />