OTP QR Code Scanner (camera)

[claywd]

It could be that I am just missing it but I cant find the qr code scanner anywhere in the app... given that the desktop app doesn't have an interface or mechanism for doing this the mobile app doing it is pretty important. am I just missing something?

[lfom]

Yes, there is no QR scanner in the app. The workaround is to use a generic QR code scanner and copy the link generated by scanning the code to Buttercup.

[perry-mitchell]

Apple removed OTP->App scanning capabilities in iOS 15. It worked just fine in earlier versions of iOS. I'm still frustrated by their decision. I've been trying to avoid integrating a camera component because:

• It's stupid - why put so much complexity in an app that only uses the camera to read OTP URIs?
• It bloats the app
• It requires finding a well maintained camera component for RN - few (any?) exist
• It requires a greater deal of maintenance to keep working

All that being said, I don't think there's another way. I'd accept a PR for this.

[lfom]

@perry-mitchell You may want to check this:
https://blog.minhazav.dev/HTML5-QR-Code-scanning-support-for-local-file-and-default-camera/

[QuinsZouls]

@perry-mitchell Here's my approach:

I can implement a QR scanner with a common website using some camera lib available for JavaScript.

Then I'll create a webview in react native to point URL of the camera website, apple by default use safari as web render for any application, so it will ask for camera permission each time the website ask for camera, for android is the same behavior.

Then I can create a communication thread from website (with JavaScript) to the react native webview and pass the QR code data.

The only disadvantage is that internet connection is required for view the camera site.
Also we need to host the camera website. (We can solve this with GitHub hosting)

Let me know about your opinion to start working on this feature.
I'm open to suggestions.

Reference: Communications between webview

[julianpoemp]

@QuinsZouls

The only disadvantage is that internet connection is required for view the camera site.
Also we need to host the camera website. (We can solve this with GitHub hosting)

Isn't it possible to open a HTML file containing the code for camera connection locally in a webview? That way no internet connection would be needed?

[QuinsZouls]

@julianpoemp
It's possible, but I need to store and import the JavaScript lib.
I'll take an extra steps to setup a path resolver to allow JavaScript importation in the HTML file. (Because if I used a JavaScript CDN internet connection will be required)

Probably write vanilla JavaScript will solve this issue but it'll take longer because I have to embed all camera and QR code on a single HTMl file.

[perry-mitchell]

I think the self contained approach is the only viable way forward. Too much of a security concern to host it externally, and Buttercup should work "offline" in a locked down network.

Ideally we'd build this HTML file - maybe we make this a separate library on the Buttercup namespace, and then install it with npm to utilise it within the app?

[perry-mitchell]

@QuinsZouls would you have any interest in working on this at all?

[QuinsZouls]

@perry-mitchell
Yes, I have interest on it.
I'm currently working and trying to implement local embedding on the webview.

Here's my current report:

• embedding local HTML works only on IOS with a simple require(), for android don't work. I tried to use a link to android_asset but nothing.

• the HTML file use a qrjs lib for detecting qrcode and I use the HTML5 camera api, it works on IOS (I haven't tested on android because previous error but I'm sure I'll works) but i use a CDN to import the qrjs lib, so for offline usage I have to download all minimized code of the lib and paste it into the HTMl file , probably I'll write a custom script and bundle with vite.

If nothing works as well, I have a plan b:
Use a react-native-vision-camera lib (is the replace of RNCamera) but it requires iOS 12 or higher and android sdk 26 or higher (probably old devices can't get qrscanner working properly)

[julianpoemp]

@QuinsZouls

What do you think about this: https://github.com/mebjas/html5-qrcode The demo works for me on android and ios.

Perhaps this fixes the android asset issue: https://stackoverflow.com/a/74966760/6303600

[QuinsZouls]

@julianpoemp
I saw html5-qrcode, works well but style by default is not good .
Update: i'm able to load the webview locally on android and ios, the problem in android is that requiere camera permission to show camera output (App permission)
What's next: check the camera permission on android, based on the permission ask if it's not granted, then render the webview if camera permission granted

[QuinsZouls]

Update: QR scanner works
What's next: build a script for jsqr lib embedding in html file, test if webview works on android builds and IOS