Support for QR code scanning. (Concept + Prototype)

[michaelhue]

The biggest gripe people seem to have with hive-js is the lack of support for QR code scanning. I understand why it isn't included (missing getUserMedia on mobile devices) but I have an idea how to diminish the issue while still providing an improved user experience. I have a working prototype running (check below for links) and would like to collect feedback.

tl;dr Use HTML Media Capture to allow the user to select or capture a photo of a bitcoin QR code and parse the encoded recipient/amount information. This works in many modern mobile browsers. Demo here. Thoughts?

Problem

Nobody likes entering bitcoin addresses manually. Waggle is great but only works with other Hive users and has certain privacy-related implications. QR codes solve this problem and are widely adopted by the community and many wallets, including Hive itself. However, Hive only supports creating QR codes – not reading them.

The QR coder reader library jsqrcode has been around for years and works surprisingly well (demo). It could easily be adopted by hive-js. My guess why it hasn't been done yet is: user experience.

QR code scanning works best when done in real-time. The user sees a live feed from their device's camera, holds it up to the QR code and gets instant feedback when the scanner was able to recognize it. It would be possible to implement this behavior in HTML5 with getUserMedia() however this API isn't available in most mobile browsers. In the spirit of Hives beginner-friendly approach, this is a major concern.

Proposal

A simple file input with accept="image/*"and capture attributes will result in the OS letting the user choose between selecting an existing photo or taking a one-off snapshot. The latter option is perfect for Hive: the user takes a reasonably good picture of a QR code, Hive tries to parse it, and the picture is discarded afterwards. I tested it with a few dozen QR codes of varying quality, on paper and on screens. It works very well. Even if the scanner wasn't able to recognize a code immediately: retrying with a better picture (maybe with a friendly help text after a failed attempt?) is still quicker than typing those 27-34 characters by hand. It's also a lot less error-prone.

Users with devices which don't support this behavior could still take a picture, switch to Hive, and select the picture for scanning. Still quicker than entering addresses manually.

On the other hand, modern browsers that support getUserMedia could get a native-like experience with a live video feed. This could be great for hive-chrome, for example.

Prototype

I built a quick prototype of the concept because I wanted to test how well the workflow works. You can try the prototype here:

Hosted on Dropbox | Source

I have only tested it on iOS7 so far but it should be working on older versions and other devices. If not: it degrades gracefully. Try in a mobile browser for best experience.

Thoughts?

As a Web/NodeJS dev and a big fan of Hive I'd love to work on an implementation for Hive. But before doing that 'd like to collect some feedback from the contributors and users. Would you welcome this feature? What do you think about this approach?

Thanks for reading!

Cheers, – Michael

[dabura667]

Looks great!

Would it also support webcams on desktop browsers?

[weilu]

Nice. I like it. The demo works perfect for a screen captured QR code, taking photos took me 4 tries before it recognized it.

My guess why it hasn't been done yet is: user experience.

Correct. That's exactly why.

@michaelhue I will have a chat with the design team and let you know.

[michaelhue]

@dabura667 Modern desktop browsers would support the live preview scanning feature, which should be the best possible user experience.

@weilu Did you try my demo or webqr.com? It seems that iOS devices stretch images inserted in a canvas element which affects the scanner significantly. In my prototype I applied a patch that prevents this bug but it could have consequences for other devices. First step would be to do some further testing (maybe by making the canvas element jsqrcode uses visible).

After fixing the issue I got pretty good results on iOS. Check out this pretty busy photo of a screen with a screenshot of a QR code in Hive. (We must go deeper.) It takes a second to scan but the result is positive. Test Photo (1.7 MB)

[weilu]

I tried your demo at https://dl.dropboxusercontent.com/u/84620/html5-bitcoin-qr/index.html with an iPhone 4 on iOS 6.

I don't know if it's worth tweaking the QR library specifically for iOS given that our iOS app (which comes with a native QR scanner. demo: http://vimeo.com/98015303) is scheduled to be submitted to the app store by the end of this week.

[michaelhue]

A native iOS app is great news! I see your point but in my opinion hive-js should make an effort to work on most mobile devices. The patch I applied shouldn't affect non-iOS devices but I didn't test that yet (since I only own an iPhone 5). Without the patch the scanning process would fail for about anything that isn't a screenshot of a prominent QR code.

With an upcoming native iOS app my proposal could be moot. Not sure what the long-term plans are for hive-js when Android and iOS both have native apps. :)

[weilu]

Hive iOS is a PhoneGapped version of hive-js. I can't promise there isn't one in the making for android :P Going forward shared core features will be developed in hive-js while the mobile device specific versions will provide added features (like QR code scanning, copy to clipboard etc.) that hive-js doesn't have.

I'm still open to your proposal though. I will be able to get my hands on a nexus tomorrow. I'll try your demo with it. End of the day it comes down to whether we can produce an acceptable user experience with reasonable amount of engineering effort. Our designers (@mattatgit @jenbennings and @haustraliaer) get the final say on what's an acceptable user experience :)

[dabura667]

Well, I do think a website is easier to convince people to go to.

"Hey download this app" is usually met with more resistance than "Hey look at this site" imo

[weilu]

"Hey download this app" is usually met with more resistance than "Hey look at this site" imo

I don't disagree with that. We are definitely keeping hive-js as hive web. It's just a matter of whether it should include QR code recognition or not in this case.

[michaelhue]

Another test with the jsqrcode lib, this time using getUserMedia on their demo website using the webcam of my MacBook Pro.

I'm confident that I could get the same results with a hive-js implementation. Granted the workflow is acceptable for the design team. :)

---

@weilu Quick question, which error message did you get with my prototype? There are two (could not decode qr code and invalid bitcoin address, the latter could be a bug in my RegEx that validates a bitcoin address. I changed it temporarily, would you mind trying again if you got the invalid bitcoin address error message?

[jenbennings]

It took me 5 tries to get your demo working. I received no output or errors on an iPhone 5 running Safari. Unfortunately, a lack of consistent results from the several people who have tested it suggests to me that other real world users will encounter the same problems.

We did look at both getUserMedia & jsqrcode early on in the design process, but to be blunt, the user experience sucks. The point of QR scanners is automation; this process turns it into somewhat of a guessing game (e.g. I have no feedback as to whether the photo I'm about to take is any good).

Setting aside the technical hiccups, with the impending iOS release of Hive Wallet, I'm not sure implementing a feature like this will assist that many use cases that aren't dealt with by QR scanners in our existing products. Furthermore, it seems the platforms we don't currently cater to don't support getUserMedia anyway.

Whilst it may still be in its infancy, Waggle (in conjunction with being able to pre-fill an email with your wallet address) is our solution to this very problem. In an ideal world, not only would this feature work across all our products, but it could potentially be extensible to other wallets too. This is a much more interesting pursuit in my opinion.

Full disclosure, I strongly dislike QR codes, but at the same time understand their importance and relevance. I really appreciate you taking the time to present your case so eloquently, but unfortunately I cannot recommend it becomes a feature of Hive Web at this stage.

[michaelhue]

Ben, thanks for reading and testing my proposal. I understand the problems and agree that this isn't very useful if the user-experience is lacking. Seems I got lucky with my phone/os combination to get reliable results.

I'm excited for the future of Hive and looking forward to the iOS release. You guys rock! Cheers and all the best from Germany!