Examples

Example 1: Simple

In the simplest case, let's imagine that we have a field on the screen where the user manually enters a serial number. To improve process efficiency, we want the user to scan a barcode containing the serial number from a shipping document.

This simple integration can be done very quickly.

First, we identify the field where scanning capability will be added.

<input type="text" id="serialNumber">

Next, let's add a button to invoke the barcode scanner for this field.

<button type="button" 
	onclick="BarcodeScannerIO.openScanner('[SCANNER_ID]', '#serialNumber')">
	Scan
</button>

The result can be seen below.


Example 2: Add a caption

A default caption can be set when the scanner is created or passed in when the scanner is displayed. In this example. we'll pass in a caption to the scanner, which will be displayed above the camera window.

Notice that options can be sent in even as a hard-coded JSON object. This, however, can quickly become unwieldy. In the next example, we'll handle it slightly differently.

<input type="text" id="serialNumber">
<button type="button" 
	onclick="BarcodeScannerIO.openScanner('[SCANNER_ID]', '#serialNumber', {caption: &quot;Please scan the serial number.&quot;})">
	Scan
</button>

The result can be seen below.


Example 3: Click handler

In this example, we will get rid of the "onclick" attribute from the button and set up a click handler in JavaScript instead.

<input type="text" id="serialNumber">
<button id="btnSerialNo" type="button">Scan</button>
<script>
  document.getElementById('btnSerialNo').onclick = function() {
    let options = {							
      elementToPopulate: "#serialNumber",		
      caption: "Now's a good time to scan that serial number."
    };
    BarcodeScannerIO.openScanner('[SCANNER_ID]', options);
  };
</script>

The result can be seen below.


Example 4: Scan event handlers

In this example, we'll set up event handlers to get information back from the scanner and log it into a textarea element. Notice that we are handling the scanner output ourselves, and it is not automatically populating another field.

<textarea id="scannerLog" style="width: 100%; height: 120px"></textarea>
<button id="btnSerialNo" type="button">Scan</button>
<script>
  function addTextToLog(txt) {
    document.getElementById("scannerLog").value += txt + "\n";
  }
  
  document.getElementById('btnSerialNo').onclick = function() {
      let options = {              
        caption: "You know what to do",
        scanCompleteCallback: function(result) {
          addTextToLog('Scanned: ' +   result.text);
        },
        scanCanceledCallback: function() {
          addTextToLog('Scan canceled');
        },
        noCameraFoundCallback: function() {
          addTextToLog('No camera found');
        },
        noCameraPermissionCallback: function() {
          addTextToLog('Permission to camera not granted');
        },
      };
      BarcodeScannerIO.openScanner('[SCANNER_ID]', options);
    };
  
</script>

The result can be seen below.


Example 5: Popup Window Scanner

In all of the previous examples, we have used the openScanner method to launch the scanner. This opens the scanner in an overlay as part of the page, giving it a more integrated feeling

However, there are a couple of reasons why the popup window scanner might be better suited for your application. First, it is not subjected to the permissions of your website. Instead, all permissions must be granted to BarcodeScanner.io. If you know that users are unlikely to want to grant camera permissions to your page, the popup window may inspire more confidence. Second, it can be launched from a non-SSL site. If your site is not using an SSL certificate, this will be the best solution for you.

In this example, we use the openWindowScanner method. Notice that nothing else really changes.

<input type="text" id="serialNumber">
<button type="button" 
	onclick="BarcodeScannerIO.openWindowScanner('[SCANNER_ID]', '#serialNumber')">
	Scan
</button>

The result can be seen below.

Example 6: Scanner Based on Browser Capabilities

In our experience, the Barcode Detection API produces excellent results. However, this feature is still not implemented in all browsers. On this page and on our home page, we implement the following logic:

  • Check if the browser supports the Barcode Detection API.
  • If the Barcode Detection API is supported, show a scanner that uses it.
  • Otherwise, default to a scanner that uses the ZXing library.

In the example below, we set a constant to contain the correct scanner ID, then use that constant when opening the scanner.

// Scanner ID 1 = Scanner using Barcode Detection API
// Scanner ID 2 = Scanner using ZXing library

const bcsId = ('BarcodeDetector' in window) ? '[Scanner ID 1]' : '[Scanner ID 2]';
<button type="button" 
		onclick="BarcodeScannerIO.openWindowScanner(bcsId, '#someField')">
		Scan
</button>