Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: permissions button on the QR Scanner #729

Merged
merged 27 commits into from
Feb 27, 2024

Conversation

Darguima
Copy link
Contributor

@Darguima Darguima commented Feb 22, 2024

I changed the QRScanner to start verifying with the Browser API if there is any camera with access permissions - if so the camera will be accessed instantly, otherwise, a button will appear and when pressed the permission will be requested (triggering the permission pop up)

I also fixed the text down below the scanner. It was re scanning each 700ms and the message was being replaced during some milliseconds to "Scanning ...". Now the message will just change if the code isn't detected during 700ms, displaying a constant message.

While updating the component call, I did minor changes to some status messages like on the Identifier Page.

Finally I improved the webcam stream performance - the webcam video was being drawn on a alongside with the QRCode square; now the video is being displayed on a

Copy link

netlify bot commented Feb 22, 2024

Deploy Preview for lazuli-stg ready!

Name Link
🔨 Latest commit c9ae495
🔍 Latest deploy log https://app.netlify.com/sites/lazuli-stg/deploys/65ddea3ed026d0000847511f
😎 Deploy Preview https://deploy-preview-729--lazuli-stg.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@Darguima Darguima linked an issue Feb 22, 2024 that may be closed by this pull request
Copy link
Contributor

@tiago-bacelar tiago-bacelar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The goat 🐐
I tested and it appeared to be working well. Just two things caught my eye:

  • I think it would be a good idea for the permission to be requested as soon as the page opens, instead of the user initially having to click the text to request permission. The text could remain there if permission isn't granted, of course (I think different browsers handle this differently, but in firefox at least, you can't request the same permission multiple times anyway. Idk, what do you think about the whole thing?)
  • I think the qr reader would look better if it were also vertically aligned when it doesn't occupy the whole page, since it is the whole content of the page. (It also gets smaller when you zoom out, but that's not really a big deal). I know it isn't extremely important, since 99% of qr reads are through mobile anyway, but still worth discussing

@ruilopesm
Copy link
Member

@tiago-bacelar
I like it this way, it makes everything more explicit for the user imo.

@tiago-bacelar
Copy link
Contributor

Yes, but not at the cost of ease of use. As it is, every time the scanner is used (even if the browser already has the permission) the staff has to click the button to open the camera. It's needlessly repetitive for someone who already knows how the system works, which the staff does.

@Darguima
Copy link
Contributor Author

Is it asking for your permission after you gave it the first time? It's not supposed to. Are you granting permanent permissions or just session permissions? And which browser are you using to try to replicate?

In Firefox if I permanently accept camera access on next loads it will just turn on the camera.

@Darguima
Copy link
Contributor Author

I already caught the problem. This just happens on Firefox. I will try fix it.

Copy link
Contributor

@tiago-bacelar tiago-bacelar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, it's working for me now. Just fix the automatic checks and it's ready to merge.

@Darguima
Copy link
Contributor Author

About vertically center the reader, it's done. I needed to change the Layout component to a flex display, so you may want to check the whole page, but what I checked it seems right. The changes are here.

About the permissions, due Firefox's ideology, it seems that is not possible to fix that behavior. Firefox doesn't have a permissions API for camera, and the workaround that I was using just with Firefox, also doesn't work with temporary permissions.

The solution that I found was to store on a session storage (since just the temporary permissions was creating problems) and if it is true I request the permission.

Copy link
Contributor

@tiago-bacelar tiago-bacelar left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All good! 👑

@Darguima Darguima merged commit acb7bd1 into main Feb 27, 2024
5 checks passed
@Darguima Darguima deleted the dg/enable_permissions_button_scanner branch February 27, 2024 17:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add enable permissions button to the scanner page
3 participants