Skip to content
A web component that reads barcodes via the Shape Detection API via a Web Worker.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
test
.gitignore
LICENSE
README.md
barcode-reader.js
barcode-worker.js
index.html
package.json
polymer.json
yarn.lock

README.md

npm version

<barcode-reader>

A web component that reads barcodes via the Shape Detection API via a Web Worker.

screenshot of barcode-reader

Features

Experimental

Please note, this is not production ready. It's not polyfilled, it relies on an experimental platform feature for the Web Worker, and generally I've just been toying with it in various Chrome builds for quite some time.

Use at your own peril! 🐉🔥

A more complete example

If you're looking for a more complete PWA example of using barcodes on the web, I highly recommend Paul Kinlans' QR Snapper as well as his blog.

Install

This web component is built with Polymer 3 and ES modules in mind and is available on NPM:

Install barcode-reader:

npm i @justinribeiro/barcode-reader
# or
yarn add @justinribeiro/barcode-reader

After install, import into your project:

import 'barcode-reader';

Finally, use as required:

<barcode-reader></barcode-reader>
<script>
  customElements.whenDefined('barcode-reader').then(() => {
    const barcodeReader = document.querySelector('barcode-reader');

    // start the camera stream
    // always looks for
    // facingMode: {
    //   exact: 'environment',
    // }
    barcodeReader.start();

    // component returns a custom event with results
    document.addEventListener('barcodes-found', (event) => {
      console.log(event.detail.barcodes);

      // if you want to stop streaming, ala, I'm hiding you now
      barcodeReader.stop();
    }, false);
  });
</script>
You can’t perform that action at this time.