Some time ago, back in the Polymer 2 days, I had a very specific version of a barcode-reader web component that was pretty nifty. It was an early-days experiment based on the now-enabled Shape Detection API within Chrome. I even for a while worked to one of the better performing polyfills, barcode-detector-polyfill, allowing that component to operate without worry of which was the right shim/polyfill to load.
As with most things however, I never felt it was a very clean sample to release. It had quirks, and while many people implored me to release it, I just felt it would sow more confusion as to anything useful from a learning standpoint (it was terribly slow on mobile, even with a web worker).
Fast forward to a couple of weeks ago, and I needed a barcode-reader component in a little demo I was putting together for an internal corporate talk. With Shape Detection now available in Chrome, I decided to shed the weighty logic, and build a little component in litElement (I have a grander vision for the components API, but it could have easily stood alone).
Now available (available on npm)and Github, the build out includes:
- Uses Shape Detection API available in Chrome M74 (see Chrome Status).
- Module scripts on DedicatedWorker. You can try the feature with ‘–enable-experimental-web-platform-features’ flag (see https://crbug.com/680046)
- Uses Comlink for the proxy of the worker
- Built as a web component via LitElement
Please note, this is not production ready by any means, but if you want to grab with npm or yarn to play with, please do!
npm i @justinribeiro/barcode-reader
# or
yarn add @justinribeiro/barcode-reader
In use, it had basically only a start() and stop() method (so you could potentially display said component in some sort of modal based on some ideally a user action…you probably wouldn’t want it running flat out all the time).
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);
});
If you’re looking for more of an app-like approach, I highly recommend Paul Kinlans' QR Snapper as a good example.
Have questions or comments? Make sure to ping me on the repo, as I plan on starting to iterate through a more useful version.