[Proposal] Element for QR code/barcodes

QR codes are pretty standard for transmitting small amounts of data. They can be seen many web-based applications especially for tasks like ticketing, payment, pairing devices, and printing labels. It would be nice to natively support this in the platform.

• QR codes are one of the few ways in which web pages can communicate data (albeit small) with local devices. Making this easier helps open up more opportunities in this area (I’m currently looking at sharing WebRTC SDP via QR to pair devices without a server).
• There’s a lack of symmetry with ShapeDetector API which can read barcodes and QR codes but we can’t generate them.
• Existing 3rd party libraries can be large and complex. Large enough that in many cases it’s easier to generate the image server-side and send it. This is disappointing because we could be decreasing the amount of data sent.
• QR is supported by most devices, especially ones that might not support NFC and is a good low-tech fallback for it.
• Better accessibility, so that users can understand that the element is displaying a scannable code and what type.
• This seems like low-hanging fruit. Especially with other means of device communication this does not create significant security problems, only makes using it simpler.

A simple API sketch:

User Agents could provide a “imagecode” element.

• This would have a type attribute that could be one of any number of visual barcode that the UA supports though I would say this list should match the ones supported by ShapeDetection API.
• The element could also have a encodeparams attribute that would take a query param style string of values specific to the encoding type, for example QR error correction levels, desired size etc (there might be better ways to do this but I can’t think of any existing elements that take variable inputs to model it after).
• width and height attributes for the display size.
• data attribute would be the string (or string encoded) data to display.
• Inside the element, an img could be provided as a fallback for UAs that do not support the imagecode tag.
• Alternate barcode types could also be supported as fallbacks using something like the source tag for videos and pictures.
• Disagreement with parameters, data too large etc would trigger an error and cause the element not to render.
• Element is a valid CanvasImageSource and can be used with canvas drawing API for branded display.

Some other accessibility ideas:

Screen reader users usually keep their screen off. Interaction with a QR/bar code could allow them to quickly turn on the screen for scanning and then turn it off again.

Interacting the the QR/bar code could full size it and increase the brightness on the screen making it easier to scan.

The UA could provide “copy payload” functionality to extract data from the QR code. This might be handy if a page or app happens to have a QR code and you want to grab its contents, for instance a URL.

see also [css-images][css-values][css-gcpm] qrcode() for generating QR code images from URLs · Issue #6544 · w3c/csswg-drafts · GitHub

Hi all! I am thinking about it:

1. Reason

Usually qrcode or barcode are images that you upload or scan… so they should be the img element with the type attribute corresponding to the type of image they are

2. Concept - Img with attribute type

2.1 - Syntax: attribute src with url and type=“code”

<img src="url" type="code"/>

2.2 Sample

2.2.1 - sample: qrcode

<img src="qrcode://" type="qrcode"/>

2.2.2 sample: barcode

<img src="barcode://" type="barcode"/>

2.2.3 sample: qrcode

<img src="index.png" type="qrcode"/>

2.2.4 sample: barcode

<img src="index.png" type="barcode"/>

3 - Other case

3.1 - Generate or read barcode/qrcode

<barcode type="qr">
  <a href:"mailto:exapmle@test.com">Mail Me</a>
  <a href:"tel:+11111111">Call Me </a>
<barcode> 

3.1 - Read qrcode in mode remote

<img src="www.examplesiteqrcode.com/helloworld.qrcode" type="qrcode"/>

3.2 - Read barcode in mode remote

<img src="www.examplesiteqrcode.com/helloworld.barcode" type="barcode"/>

3.3 - Read barcode in mode local

<img src="helloworld.barcode" type="barcode"/>

3.4 - Read qrcode in mode local

<img src="helloworld.qrcode" type="qrcode"/>

3.5 - Read qrcode in mode remote

<img src="www.examplesiteqrcode.com/helloworld.png" type="qrcode"/>

3.6 - Read barcode in mode remote

<img src="www.examplesiteqrcode.com/helloworld.jpeg" type="barcode"/>

Notes

1. Hope this helps, some of the ideas are yours and not mine.