[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.
1 Like