An HTML element from displaying QR codes

[aarongustafson]

---

title: An HTML element from displaying QR codes
date: 2020-12-04T20:18:15.891Z
submitter: PRIVATE
number: 5fca99877bf33307d003bd0a
tags: [ ]
discussion: https://github.com/WebWeWant/webwewant.fyi/discussions/
status: [ discussing || in-progress || complete ]
related:

• title:
  url:
  type: [ article || explainer || draft || spec || note || discussion ]

---

QR codes are very common and have been steadily increasing in usage as people move to no-touch systems. It's also one of the few safe and widely compatible ways for the web to interact with objects. While we have ways to read QR codes (shape detector) we don't have easy ways to generate them. Generating QR codes is very complex and existing libraries are big. For such a common element I think it makes sense to have an HTML element that could display common types of visual codes including different types of barcode, QR codes and others in a similar way to an image tag.

In addition to reducing developer complexity. This could make applications smaller as they would not need to have large QR code libraries, or embed images. However, like with

UAs could also improve accessibility by making it easy to full-screen the code, increase screen brightness when a user interacts with it or support things like right-click to copy the contents.

---

If posted, this will appear at https://webwewant.fyi/wants/5fca99877bf33307d003bd0a/

[github-actions]

This has gotten stale. Take a look or close it out.

[aarongustafson]

It looks like there is at least one web component exploring this: https://github.com/educastellano/qr-code

[aarongustafson]

I had a discussion with a partner who was asking for this previously as well. They were looking for it to be using in conjunction with a dynamic & rotating code (similar to 2FA) for scanning in a checkout scenario. The expiration & rotation was key for ensuring that the code could not be shared. Seems like something like this would need to support dynamic updating, which makes me think that canvas makes a lot of sense from a rendering perspective.

@sdras @christiannwamba @acekyd @cassieevans have you seen any companies looking for this or creating their own implementations?

Would also love to get thoughts from @cwilso, @travisleithead, @tantek, and @bkardell from an implementor standpoint here too.

[bradisbell]

@aarongustafson Why canvas? Why not SVG image?

While not a web component, I use this in my own browser-based projects: https://github.com/soldair/node-qrcode I use SVG to ensure good rendering not only on-screen, but also in a printable view.

QR code generation is easy and fast enough today in JavaScript. I don't think we need a built-in HTML element for generating them.

[aarongustafson]

Why canvas? Why not SVG image?

@bradisbell My thought on canvas over SVG had mainly to do with not seeing a ton of value in having a DOM for the code. I’m not super well-seasoned in either tech, so I would not consider my opinion worth much at all in the matter 😉

I use SVG to ensure good rendering not only on-screen, but also in a printable view

That seems sensible. I’m not familiar with the limitations of printing canvas contents.

QR code generation is easy and fast enough today in JavaScript. I don't think we need a built-in HTML element for generating them.

It may be easy for you, but I’d be reluctant to say that applies broadly; there may be some who struggle with it. Additionally, taking a dependency on JavaScript means that if JavaScript fails to load or execute properly, the interface will not work as intended. Then you need to bring in server-side generation as well. If the browser can work it’s magic from declarative markup, that issues goes away (with the possible exception of expiring/rotating codes, which would require a server-side fallback + declarative refresh of some sort).

Looking at QR code generation as a cowpath, the question becomes: is it worth paving. It might be.

[acekyd]

@sdras @christiannwamba @acekyd @cassieevans have you seen any companies looking for this or creating their own implementations?

I am vaguely aware of Visa implementing this - On the web and on mobile and I believe it involves them generating an image which is displayed on the page using regular html elements. I'm not certain of dynamic updating in this regard but it usually includes all necessary payment details including price.

Can check out Visa QR for more info.

[cwilso]

I agree this should be an easy-to-use component, but there's nothing inherently difficult about implementing this in JS; and the use case seems narrow enough to not want to bake it in to the platform footprint itself, to me.

I think the best way to explore the need for this would be to track uptake of node-qrcode or a similar component, and asking for web developer input on need. "It would be nice to have" isn't always good enough to bake it into every device that needs to implement HTML; I'm also concerned about the expanding feature set of QR code generators (embedded images, Kanji, etc.)