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

Feature: add qr scanner #357

Open
wants to merge 12 commits into
base: master
Choose a base branch
from

Conversation

QuinsZouls
Copy link

This PR Solves #310

What's includes:

  • A modal with a webview for QR scanning
  • OTPScanner.html: html with camera and qr functionalities
  • Added Android Camera permission
  • Install react-native-webview
  • Offline functionality

Tested on Android SDK 30 and iOS 16 emulators.

What's next:

  • Check if it works on final build
  • Check qrjs script (i took it from this CDN)

Notes:

  • due offline functionalities, i have to put all jsqr CDN code in to HTML file (looks kinda crap :/)

Preview

demo

@julianpoemp
Copy link
Member

About the CDN script: What about installing jsqr via npm and copying the js file to the assets directory as part of the postinstall/prebuild step?

@perry-mitchell
Copy link
Member

This looks awesome! I honestly thought this would have been more of a headache but you proved otherwise.

I agree with @julianpoemp - would be best if we could build the ugly parts (minified) of that HTML at build time if possible. What do you think?

@QuinsZouls
Copy link
Author

It's not possible import a local JavaScript file from HTML, the only viable option is create a custom script that embed jsqr library from node_modules.
Probably a post install script.
I'm working on that.

@julianpoemp
Copy link
Member

It's not possible import a local JavaScript file from HTML, the only viable option is create a custom script that embed jsqr library from node_modules. Probably a post install script. I'm working on that.

perhaps a static web server would be possible (https://github.com/futurepress/react-native-static-server). You could serve the html file and its assets using a static web server.

Don't know if this is a solution since resources are consumed to run a webserver that are not needed if the script is directly embedded to the HTML file. On the other hand it would makes handling the html file easier. Just an idea to throw in :)

@QuinsZouls
Copy link
Author

I just added a nodejs script that builds the HTML file with jsqr dependency, also excluded HTML bundled from git

@perry-mitchell
Copy link
Member

Thank you @QuinsZouls - I hope you'll bear with me, I'm not able to review and merge this yet but will try to get to it at the start of this coming week. Very excited for this.

Copy link
Member

@perry-mitchell perry-mitchell left a comment

Choose a reason for hiding this comment

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

Couple of items to check.. But if I get time before you do @QuinsZouls to check this, I might just merge and tackle it myself. I'd also like to use this functionality for adding vaults from the desktop app quickly.. So it's a very handy piece of functionality.

README.md Show resolved Hide resolved
scripts/build_qrview.js Outdated Show resolved Hide resolved
@perry-mitchell
Copy link
Member

And if you'd have time to check the podfile lock conflict too, that'd be great. I had to do a larger update to get the new 2.6.2 build working, so it might be wise to just delete the lock and install from scratch again.

@QuinsZouls
Copy link
Author

Unfortunately, my Xcode has updated, so I'm not longer able to compile and run for IOS.
I'm investigating this issue.

@perry-mitchell
Copy link
Member

Ok, it didn't run when I started it.. lots of pod issues. I merged in master, killed ios/Pods and the podfile lock, killed node_modules and installed everything again.

After building the webview manually, I get the following error..

image

Seems the new modal view isn't stable across all environments (I'm on Mac Sonoma, latest xcode).

@perry-mitchell
Copy link
Member

I pushed the merge from master.

@QuinsZouls
Copy link
Author

It's working now without issues on lasted xcode with Sonoma, make sure the HTML is builded before running ios command.
Simulator Screenshot - iPhone 15 Pro Max - 2024-04-29 at 12 27 42

@perry-mitchell
Copy link
Member

Tested on my iPhone 14 Pro and the camera never starts:

image

Running from Xcode straight on my device. No errors that I can see that'd be relevant.

@perry-mitchell
Copy link
Member

To clarify: It worked on the simulator as you showed, but not on a real device.

@QuinsZouls
Copy link
Author

I think it's a permission problem, probably on a bare metal devices need camera permission to work properly.
Maybe my approach is ask for camera permission before Camera modal shows.
I'm working on that.

@AlecMcCutcheon
Copy link

Hope to see this in the app soon :)

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.

4 participants