HTML element for barcodes/qr codes #5801
Description
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, customer loyalty ids, pairing devices, and printing labels. In fact, these have become even more important post-COVID to make more things contact-less to mitigate spread of the virus.
-
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). It's also one of the few avenues not completely dragged down with security concerns.
-
There’s a lack of symmetry with ShapeDetector API which can read barcodes and QR codes but we can’t easily generate them.
-
Existing 3rd party libraries can be large and complex (writing your own is very difficult). Since the libraries are so large it almost always makes sense to generate the image server-side and send it unless you are generating a lot of barcodes. If this was native to the platform we could be sending small payload strings rather than whole images.
-
QR is supported by most devices and makes a good fallback for things like NFC.
-
Better accessibility, so that users can understand that the element is displaying a scannable code and what type and the contents (URL, text, etc). In the case of users using a screen reader the screen is usually off, the UA could decide to briefly turn the screen on upon interaction with the element. It could also full-size it and increase screen brightness to make it quicker and easier for a scanner to read it. UAs could also provide the ability to copy the contents to the clipboard, something not easily possible with raw images.
-
QR codes are ubiquitous such nearly all modern phones naively support reading them in the camera app. Their usage seems common enough to warrant inclusion in the platform.
Rough Ideas:
-
The element a type attribute that could be one of any number of visual barcodes that the UA supports, should be using the same list as ShapeDetector.
-
Somehow you pass the encoding params per type (error correction level, etc).
-
Data is encoded in a string attribute
-
Customization is pretty common in use-cases I've seen, perhaps CSS parts to customize the modules/bars + Make the element a valid CanvasImageSource for heavier canvas-based customization.
-
Images can works as fallbacks similar to video/pictures for UAs that don't understand the element or don't support the desired format.
-
Canvas can work as well for polyfill-based fallbacks or completely custom types but these can still be enhanced with accessibility potential above, nearest-neighbor default scaling etc).
Sources:
- Chrome adding a QR link sharing feature: https://twitter.com/googlechrome/status/1298337819681849344
- Instagram adopting QR code generation: https://www.theverge.com/2020/8/18/21372322/instagram-qr-code-launch-global-nametag
- More businesses using QR codes due to COVID-19: https://www.wired.co.uk/article/qr-codes-coronavirus