[2][gibbsfromncis] Scan QR Code - Library Installs

[wmbutler]

https://github.com/lwansbrough/react-native-camera https://github.com/moaazsidat/react-native-qrcode-scanner

[startailcoon]

What's the status of this?

Issue #998 and #832 depends on this.

[wmbutler]

Nobody has claimed it yet so it site here until that happens.

Possible resource: https://stackoverflow.com/questions/9431475/html5-camera-access

[startailcoon]

Sorry, for some reason I thought I saw svk to be assigned to this.

[wmbutler]

I probably did that since he's usually the one to add new libraries.

[gibbsfromncis]

@wmbutler I can take it. I don't think it's a big deal to install new dependencies and wrap them into some container or component. I'll take a look how other libraries included to our project and do the same because it looks like @svk31 a little bit busy :)

[gibbsfromncis]

@startailcoon all provided libraries are for react-native. As I see from our repository we do not have/do not support react-native. I see we have "wrappers"/"bridges" for Desktops only (Electron). But no any wrappers/bridges for Mobile platforms like phonegap/react-native. So I'm confused why did you select those libraries to use.

Can you explain the cases of usage QR codes in bitshares so I can help you to find solution?

[wmbutler]

We can display QR codes already, but we need to allow the wallet to access the camera on mobile devices and desktops to be able to recognize qr codes.

[startailcoon]

So I'm confused why did you select those libraries to use.

I'm not versed in libraries for react and was only browsing for a solution when I found these as possible solutions. Hence the reason I needed some help analysing if they indeed could be of use.

I assume we need to look further for a solution.

We're looking for a solution to scan QR codes to ease input of form data in the wallet.

[gibbsfromncis]

@wmbutler @startailcoon okay, I got your feedbacks.

We're not able to use the libraries you've provided. Actually we're not able to even install these libraries because them are for Mobile Devices (android/ios packages) so thats why you were confused how to install them.

@wmbutler What we can do: 1) Add button "Select QR code" 2) User press on it and sees dropdown menu like with few options (based on mobile OS): Select Photo or Take Photo using Camera. 3) User selects photo/or shot it by camera 4) If code recognized well he sees the success message.

This is a little sample of idea how it works:

(Library, Demo - you can test it by your smartphone) (Do not worry about Design, we will remove all UI except button "Select QR code")

Sometimes code cannot be recognized and user should take new photo from another angel. Unfortunately we cannot make user be able to move his camera till QR code not recognized like on Native iOS/Android apps because this is web and we cannot have direct access to camera.

@startailcoon We will go by this way: I'll create an React Component called QRScanner. This will present only one button with few props like "onQRRead", "buttonLabel" etc. and you will use it anywhere in our app where you need. How does it sound for you? Btw I do not have time to make it today/tomorrow so I will prepare on weekend and let you know when my pull request be pushed.

[wmbutler]

Is there a way to handle this as a video grab rather than as a photo? Or is it possible to trigger the photo and submit it automatically based upon qr code detection?

[gibbsfromncis]

@wmbutler unfortunately not. Anyway I did few tests of libraries I found on google and no luck there. Google Chrome (macOS) supports QR code LIVE detection/reading like there but only for Desktop (maybe it works for Android too but it doesn't work on iOS). I suppose it's not a good way to use solutions which work only on one platform.

The idea I've posted above unfortunately is only solution we have and it supports all devices/browsers well. This is because we're using BROWSER and javascript cannot access camera directly. We will be able to support options you've provided but only when we start to use React Native and publish Wallet as Native apps for iOS/Android/Windows Phones.

@wmbutler BTW start using of react native to publish our Wallet to App Store/Google Play/China Markets as native apps is good idea. I can work on it but there is much time and I need to make estimates and discuss it with you. We can plan to discuss it for near future (in 1-2 month) after I become a bitshares ninja :)

[wmbutler]

I'm thinking since we are so Chrome heavy, we may be able to get away with saying "For the best experience, use chrome". It's free and it's universal. There isn't much reason for someone to push back. Unless they are just a contrarian for the sake of it. I think it's important to focus on getting the experience right and compatibility can be added later.

[gibbsfromncis]

@wmbutler as I said your way about QR code scanning can work only for Desktop Chrome. Now I'm confusing why are you going to scan QR codes on Desktop?

If we are talking not about this feature only so we can go by your way. It's OK. But lets keep our project supported by another browsers too. Cool product cannot be fully supported by only one browser so someday we will start to work on another browsers support and this will be hard work. So I want to propose if we have situations where Chrome support some cool feature and another browsers not - lets make 2 versions of feature - cool for Chrome users and simple-hack for another browsers. If we have some feature on Chrome we should have the same feature on another browsers. Maybe on another browsers this feature will looks not so cool but we should have it. For e.g. I think it's bad way to say users - if you want to scan QR codes - use Chrome only. But we can add some little text on another browsers under the scan button "You can use Chrome to capture QR code automatically except making a photo.

But for now mobile browsers cannot capture QR codes automatically and we can only upload photo and then try to recognize it.

[wmbutler]

@gibbsfromncis interesting, because Mobile Chrome has a way to scan QR codes natively.

[gibbsfromncis]

@wmbutler interesting, can you give me some example or link to test it? I use chrome on my iPhone and never seen this feature.

[wmbutler]

When you pull down to search via mobile Chrome, they offer a control to capture a QR code. It's next to the microphone control.

[gibbsfromncis]

@wmbutler yep, I know about this one. But this is only for scanning links encoded in qr codes. This one can't help us :)

[gibbsfromncis]

@wmbutler I've created my own library for react to recognize QR codes and it works awful because QR codes recognizing by image works really really bad.

new idea: @startailcoon @wmbutler

We can pass needed params into url for QR code. On this way user be able to use his phone default features for scanning QR codes.

@wmbutler on this way you will be able to pull down his Chrome, scan QR code by chrome feature and go by link to (for e.g.) https://wallet.bitshares.org/#/transfer-money?param1=a&param2=s etc.

User Experience: 1) User sees some QR code he need to scan on Desktop to pay someone by bitshares 2) User take his phone and scan QR code by any tool 3) User go by the link he scanned 4) On this page user able to check all data and press "confirm transaction" or confirm what he want :)

On this way developers like @startailcoon will receive all needed params from URL.

@wmbutler Can you please describe me an idea of how QR codes should work? Who/where place QR codes? What will be if I scan QR code? I suppose I don't understand this feature at all. I don't understand why do you need QR code scanner for Desktop and how do you imagine this UX.

I image this feature like I use my banking app: 1) See QR code on some shopping site cart on my browser on Desktop 2) Scan this QR code by my mobile banking app 3) Money sent

[gibbsfromncis]

@startailcoon please take a participant on our discussions. I appreciate your opinion and your help. Maybe you have some another good ideas or my idea suits for you well?

[gibbsfromncis]

@wmbutler @startailcoon this is simple example of my new idea:

User scans QR code somewhere. Then he goes by link in QR code. All parameters what we need should be hardcoded in QR code url like: 1) Amount of transaction 2) Transaction Receiver etc.

And when user goes by url he should see already filled transaction form.

Btw: iPhone camera by default scanning QR codes and if link is found he advice to go by this link. Just try to open your camera on iPhone and focus it on some QR code.

[gibbsfromncis]

Example from Chrome:

The main thing we should do: put transaction params into URL and when user go to page like:

https://wallet.bitshares.org/#/transfer?to=billbutler&amount=500&asset=1.20.123

We should fill all fields on the page using info from the url. So user just should check data and press "send"

[wmbutler]

These are great ideas. To answer your question, it's important that we be able to scan a qr code from within the web app as well. If the QR code references a full wallet URL, this will ultimately not be scalable because it will rely on a user going to a particular domain. It also forces a browser to load the entire source.

We have begun to put into place some ideas for the QR code side of things regarding the parameterization of the QR code. There is a fairly well framed pattern for bitcoin and we have a precedent for bts as well.

https://github.com/bitshares/bitshares-pay/issues/1

If you think about it, when you see a qr code, you generally first decide which wallet you want to use to send and then you open it and would choose send. From send, you would have the option of either entering the address and amount manually or scanning a QR code.

Remember though, this issue is about the library installs, not defining the standard by which this will operate. I expect a URI for bts will look like:

bitshares:account&amount=1&asset=1.2.3&memo=memo

[gibbsfromncis]

@wmbutler Unfortunately I don't know the better way to work with QR codes from mobile browsers because I'm looking for crossbrowser stable library.

Libraries provided on top cannot be installed because them for Android/iOS - not WEB.

Libraries for React (not React-Native) make a photo and try to recognize and decode QR code but all of them which I've tested recognize QR codes really bad. One of them I've found works like you mention above - https://thomasbilliet.com/react-qr-reader/. But it doesn't work for iOS Chrome. It works only for Safari. Idk does it work for Android browsers or not.

Safari on iOS not supported at well for now. Actually I cannot restore my wallet in Safari...

Solution I told above is crossbrowser and can be supported even by Windows Phone 😃

Do we have some cool guys who may propose for us any another solution that maybe suits your requirements?

If you disagree my idea you can unassign me from this task and lets wait for somebody who can propose better way because I suppose I did all my best.

[wmbutler]

I reviewed the libraries for this. I think taking a picture rather than having live video should work just fine. It's a really nice compromise until the video can be accessed natively.

Was this the library you were suggesting?

https://github.com/LazarSoft/jsqrcode

[gibbsfromncis]

@wmbutler yes but it's hard to integrate it for React app. I guess this one is better - https://thomasbilliet.com/react-qr-reader/

[wmbutler]

That looks great... seems to work as video too.

[wmbutler]

Advancing this. Plan to add the library?

[gibbsfromncis]

@wmbutler oh yes. I forgot about this issue.

[wmbutler]

I'm really hoping there is a way to do this without reloading the UI web application. Ideally, we can capture the contents of the QR code and send the result to the withdraw modal first. Would be nice to work on withdraw for alternative currencies for now since we don't have much consensus on the URI scheme for sending BTS assets.

[gibbsfromncis]

@wmbutler I suppose this task is only for library install. As additional thing I will create some <QRCodeScanner/> component which guys who work with QR codes can use on our app.

But I like the main idea you mentioned above 👍

[gibbsfromncis]

@wmbutler I've added "QRScanner" component so anyone developer can use it. It's a button and when user click on it modal with camera appears. User can close it manually or it closes when QR scanned success.

Video - https://drive.google.com/file/d/1BnG3aig0t6X7BKioIDdun7vMZuaL0bBi/view (sorry, service for video converting into gif is unavailable right now) (Button was added on Dashboard just for a test)

[gibbsfromncis]

@startailcoon When you start to work on QR codes please make sure you use HTTPS server (https://localhost:8085) instead of http because mobile's browsers policy disable camera on http.

[gibbsfromncis]

PR #1355