Easy Barcode Scanning with JavaScript

By | October 26, 2021

It seems like it should be easy to scan barcodes from your web browser. You should just be able to point your camera at a barcode and let the browser do all the work. Unfortunately, there really hasn’t been a easy solution – until now.

Introducing BarcodeScanner.io

BarcodeScanner.io is a website that allows you start scanning barcodes from your website immediately, without the need to code up your own solution. Just a couple lines of HTML is all you need to start putting your device’s camera to use as a very effective barcode scanner.

If you’re excited to see what it looks like, I’ll put the first example here. Just click on the “scan” button to load up the scanner. I’ve set it up to allow you to scan QR Code, PDF417, DataMatrix, and Code 128 symbols. When a scan is successful, it will populate the text box with the result.

Look at how easy it was to include that scanner:

<input type="text" id="scannedBarcode">
<button type="button" onclick="BarcodeScannerIO.openScanner('[my scanner id]', #scannedBarcode');">Scan</button>

Create an Account

The first thing you need to do is head over to BarcodeScanner.io and create your account. Don’t be put off by this. Each scanner is custom and tied to a domain, so you’ll appreciate the ability to create your own. Plus, there is a free tier that includes up to 100 scanner loads per month.

Create a Scanner

Once you have your account and are logged in, you’ll find an option called “My Scanners” in the menu. From this page, you can edit existing scanners or create new ones.

Let’s create a new one by clicking on the “Create New Scanner” button. I’ll show you how I created mine and walk you through some of the options.

Most of the options are pretty intuitive, but in case they’re not, you can click on the “Toggle Help” button at the top of the editor, which will display helpful captions below each item to explain what they do. You can also refer to the documentation for all the information you need, including information about the API.

The scanner name is simply a name that you give your scanner to help you identify it in the list. You can call it whatever you want, and this will not be visible to anyone but you.

The domain is the host where the scanner will be used. You can see that mine is set to “misc.ws”, the website you’re reading this on.

I’ve left the title and caption blank, preferring to stick with the defaults. The caption can be set and/or overridden at the time of integration as well, allowing you to use the same scanner for multiple purposes later on. Again, refer to the documentation for all of the details.

The library field refers to which scanning library you want to use. There are two options available at the time of this writing, ZXing and the Barcode Detection API. ZXing is an open source barcode scanning library that supports all of the formats you see in the screen shot. Results are generally very good, but a lot of this will depend on what you’re scanning and the device you’re using.

The Barcode Detection API is built in to some browsers, especially the mobile variety, but you might not find it on a desktop. In my experience, it produces better results, especially with UPC symbols, but because it’s not supported on all browsers, you might want to do some extra checking before using it. The examples page shows you how to deal with this.

The most important step is determining which barcode formats your scanner will accept. In other words, your scanner will recognize and scan only the formats you select. It’s best to select only the formats you really need here.

Integration

It’s almost unbelievable how easy it is to plop a barcode scanner on your page using BarcodeScanner.io. In fact, after you’ve created your scanner, you can simply click on an icon next to your scanner to get simple deployment instructions, as seen below.

As you can see there are only two basic steps.

  • Include the JavaScript library
  • Include code to launch your scanner

Within that second step, there is a very robust API that will allow you handle scanner events, etc., or you can just give it the name of the field you want to populate in query selector format. In my example, I did the latter.

Security

Before a website can access the user’s camera(s), the user must approve the request. This is an example what happens the first time you try to launch a barcode scanner from your website using BarcodeScanner.io. If you already tried the example above, then you already know exactly what I’m talking about.

Obviously, you won’t be scanning many barcodes if the camera can’t be accessed, but you do want to make sure you trust the website you’re using and BarcodeScanner.io. Check out BarcodeScanner.io’s privacy page for all the information you need, but here’s the most important blurb: “No image data of any kind is sent to BarcodeScanner.io. Additionally, no data contained within scanned barcodes is sent to BarcodeScanner.io.

This can easily be verified by watching requests on the network tab in the browser’s development tools from the time the scanner loads until a scan is complete.

The Scanner

There are two flavors of the barcode scanner. The first opens in a screen overlay through an iframe. This is the type used in the example above. This style of integration, especially with the ability to choose your own color scheme, becomes transparent to the user on both mobile and desktop devices. With this type of integration, permissions are requested for your domain, and the website must be secure (SSL).

Another type of integration is nearly identical in the way that it is called and behaves, but instead of opening in an iframe, it will open in a popup window. There are a few disadvantages to this, including the fact that it may be blocked by a user’s popup blocker. However, there are two reasons why a user might want to use this type of scanner.

First, you might not have a secure site (SSL). Utilizing the popup window scanner will use BarcodeScanner.io’s SSL certificate. Second, you might be using a domain without a defined privacy policy, and you may be concerned that users won’t trust your site with camera permissions. When using the popup window scanner. camera permission must be granted to BarcodeScanner.io, not your website.

See the documentation for more information about both types of scanners.

An Example

There are two main reasons people need to use barcodes:

  • Input speed
  • Input accuracy

If you’re still reading this article, you probably already have a scenario in mind where you’d like to employ a barcode scanner, but here are just a few examples of where they might be useful.

  • Billing – Scan invoice identification barcode.
  • Point-of-sale – Look up products by UPC.
  • Events – Scan ticket numbers.
  • Shipping – Scan tracking numbers of case/pallet ID numbers.

Just grins, let’s imagine that we have are hosting an event where each ticket has a QR Code containing the ticket number and other pertinent information.

Event Ticket
Johnson, Party of 4
Barcode Contents: 0112345678|4|Johnson

At the entrance, the host will scan each ticket. Once scanned, the user system will look up the ticket information in the database and mark the guests as present.

If you can’t directly scan the barcode above from a webcam, create one with the same contents at a barcode generator website, such as www.barcode-generator.org.

The Code

For this example, I’ve set up a callback to receive scan results rather than directly populating a field. This lets me take complete control of the scanning operation.

<button id="btnScanTicket" type="button" style="cursor:pointer;font-size:26px">Scan Ticket</button>

<div id="scanResult" style="font-size:22px;color:red"></div>
<script>

<!-- Use the Barcode Detector API if it's available //-->
const bcsId = ('BarcodeDetector' in window) ? 
               '[Barcode Detector API Scanner ID]' : 
               '[ZXing Scanner ID]';


document.getElementById('btnScanTicket').addEventListener('click', function() {
   
   BarcodeScannerIO.openScanner(bcsId, 
      {
         caption: "Scan Ticket",
         scanCompleteCallback: function(result) {

            let txt = '';
            let t = result.text.split('|');
            if( t.length === 3 ) {

               // "Look up the ticket"
               if( t[0] !== '0112345678' ) {
                  txt = 'Ticket not found in database.';
               } else {
                  txt = 'Welcome ' + t[2] + ' party of ' + t[1];
               }

            } else {
               txt = 'Invalid data';
            }
            document.getElementById('scanResult').innerText = txt;
         }
      }
   );
});
</script>



Logging

Once you’ve started using your scanners, you’ll find detailed logging on your profile page. This will show you each time that scanner was loaded, as well as when other activities occurred such as when a user denied permission to the camera or when a scan occurred. This can help you troubleshoot with your users.

Additionally, you can see the stats for each scanner from the “My Scanners” page by clicking on the graph icon next to a scanner.

This will pop open a graph like this one showing you the scan statistics for the scanner in question.

Cost

As I mentioned, there is a free tier at BarcodeScanner.io that allows you up to 100 barcode scanner loads per month at no charge. It should be noted that this does not include loads from the “My Scanners” page, which makes it a great place to do some of your testing.

If you find that BarcodeScanner.io provides a useful service, and you’re ready to go beyond the free tier, you can sign up for a subscription. Although it’s not immediately apparent from the pricing page, you have some flexibility in determining the cost of your subscription and can get up to 500 scanner loads per month for as low as $4.99. Frankly, you could pay for several years of service for less than you’d pay a developer to create a custom solution for your website.

You also have the option to pay for scanner loads in blocks of 1,000 without creating a subscription. This could be useful if your usage might vary from one month to the next or if you need a little extra padding while otherwise remaining in the free tier.

Conclusion

BarcodeScanner.io truly does make integrating barcode scanning into your website extremely easy. If your needs are simple, there is really almost no code required to get started. If your needs are more complex, the API should be robust enough to meet them.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.