CODEWITHSUNDEEP
angulargoogle-chromesafarizxing
kingofswords
kingofswords

Reputation: 105

In production, zxing/ngx-scanner works in Safari but not in Chrome

The bug Despite using HTTPS, Chrome fails to open the zxing/ngx-scanner and receives this error upon attempting to do so: @zxing/ngx-scanner Error when asking for permission. DOMException: Permission denied. However, it works perfectly in Safari. Safari asks if the camera can be accessed, and upon giving it permission, all works well.

I've used boilerplate zxing code from Stackblitz, this repo's documentation, and elsewhere, e.g. <zxing-scanner></zxing-scanner> in an Angular 8 component.html. Even plain <zxing-scanner></zxing-scanner> and nothing else produces this behavior.

To Reproduce Steps to reproduce the behavior: 1. npm i @zxing/ngx-scanner 2. In an Angular 8 project, go to a page with <zxing-scanner></zxing-scanner> in the component.html while in an HTTPS production environment (e.g. deployed to Heroku). 3. No permission will be asked to access the camera in Chrome. 4. Therefore, the scanner won't open, and the console will display the above error. 5. Go to the same page in Safari. The browser asks for permission to access the camera, and the scanner works perfectly.

Expected behavior The scanner works for all browsers, including Chrome, while in production.

Versions

Additional context

Upvotes: 0

Views: 4139

Answers (1)

dudekm
dudekm

Reputation: 26

I had the same situation. Please check your headers... In my .htaccess file I had something like this:

Header set Feature-Policy "geolocation 'none'; midi 'none'; camera 'none'; usb 'none'; magnetometer 'none'; accelerometer 'none'; vr 'none'; speaker 'none'; ambient-light-sensor 'none'; gyroscope 'none'; microphone 'none'"

as you see:

camera 'none';

Firefox ignored it, chrome didn't.

Upvotes: 1

Related Questions