Lightning Component to scan barcodes using Salesforce1

There are probably as many number of barcode scanner apps in the app stores as the number of people in this world. OK, I exaggerated but you get the point. These are built using native code and most work great. So, why this Lightning component? Few days back I stumbled upon quaggaJS library which is an awesome library to scan barcodes using just javascript. There are already a bunch of artifacts out there to use this library with Visualforce. I just wanted to come up with a Lightning component (which is Locker Service compatible) so that it can be easily used in Salesforce1. So, here you go.. install the component from here (hint: click ‘Deploy to Salesforce’) in your Sandbox org, try it out and let me know how it works. Once you download, use can use the Lightning app builder to create a stand alone lightning app, place the ‘BarcodeScannerComp’ component in it and add it as a navigation item to Salesforce1. This component can also be used in quick actions and for not the scanned barcode is displayed along with the image, however, you can use change the code to suit your needs.

Couple of things to note:

  1. Although quaggaJS library supports live streams, I only implemented scanning from a file(static image) because iOS doesn’t support MediaDevices API
  2. Haven’t tested this in production, so use at your own risk. My recommendation is to use a stand alone native app for barcode scanning and integrate with Salesforce but if you don’t have high volume / high precision scanning requirements, this could work
  3. Integrating a 3rd party stand alone scanner application with Salesforce1 is not straight forward yet as there is no support for URL deep links to VF pages or lightning components (yet). Once (and if) such a support is available in Salesforce1, you won’t need this component
  4. Finally, Locker Service issues with object proxies prevented me from using the script directly in the component. So, I had to use a iframe for just processing the barcodes. ‘Lightning Containe’ is another option although that is still in developer preview.

Now, the fine print.. At the time of writing this blog, I am employed with Salesforce as an Architect. However, any code samples and declarative approach provided here are purely for experimental purposes and comes with no warranty or support. Matter of fact, all opinions and approach provided in this blog are purely my own and has nothing to do with my employer. It is assumed that you have the right Salesforce configuration and coding skills and will use the ideas presented here as you see fit, in your landscape. The primary purpose of this article is just to share the knowledge and my own experience. Nothing more, nothing less. Use this approach at your own risk

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.