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).
- 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!
In use, it had basically only a
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).
Have questions or comments? Make sure to ping me on the repo, as I plan on starting to iterate through a more useful version.