How to Scan EAN/UPC and its Add-On Codes in JavaScript

UPC is a type of barcode widely used to identify retail products while EAN is a superset of it adding an extra digit to the beginning. EAN-13 and UPC-A are the common versions while EAN-8 and UPC-E are the less used versions for small packages.

An EAN or a UPC code may come with a 2-digit (EAN-2 or UPC-2) or a 5-digit code (EAN-5 or UPC-5), which are supplemental barcodes, placed on the right-hand side. These are generally used in periodicals, like magazines and books, to indicate the current year’s issue number and in weighed products like food, to indicate the manufacturer’s suggested retail price.1

In this article, we are going to build a web app to scan UPC and EAN barcodes and their add-on codes with JavaScript using Dynamsoft Barcode Reader.

Online demo

Demo video:

Variations of EAN

The demo can also read the following variations of EAN:

  • ISSN: a special version of EAN-13 for newspapers and magazines
  • ISBN: a special version of EAN-13 for books

Sample Code Images

  1. EAN-13 + EAN-5 on a book:

    ean-13

  2. UPC-E + UPC-2 on a magazine:

    upc-e

New HTML File

Create a new HTML file with the following template:

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>EAN Scanner</title>
  <style>
  h2 {
    text-align: center;
  }

  #app {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  #cameraView {
    width: 100%;
    height: 60vh;
  }
  </style>
</head>
<html>
<body>
  <div id="app">
    <h2>EAN Scanner</h2>
    <button id="startScanBtn">Start Scanning</button>
    <div id="status">Loading...</div>
    <div id="cameraView"></div>
    <div id="result"></div>
  </div>
</body>
</html>

Add Dynamsoft Barcode Reader

Include the library of Dynamsoft Barcode Reader with the following line of code in the body:

<script src="https://cdn.jsdelivr.net/npm/dynamsoft-barcode-reader-bundle@10.4.2000/dist/dbr.bundle.js"></script>

Initialize Dynamsoft Barcode Reader

  1. Initialize the license. You can apply for a license here.

    Dynamsoft.License.LicenseManager.initLicense("LICENSE-KEY");
    
  2. Load the WASM file.

    Dynamsoft.Core.CoreModule.loadWasm(["dbr"]);
    
  3. Create an instance of capture vision router to call Dynamsoft Barcode Reader.

    let cvRouter = await Dynamsoft.CVR.CaptureVisionRouter.createInstance();
    

Update the Settings to Scan UPC and EAN Barcodes and their Add-On Codes

  1. Get the runtime settings.

    let settings = await cvRouter.outputSettings();
    
  2. Enable the EnableAddOnCode option.

    let formatOptionsArray = settings.BarcodeFormatSpecificationOptions;
    for (let index = 0; index < formatOptionsArray.length; index++) {
      const options = formatOptionsArray[index];
      options["EnableAddOnCode"] = 1;
    }
    
  3. Specify the barcode formats to UPC and EAN.

    let barcodeOptionsArray = settings.BarcodeReaderTaskSettingOptions;
    for (let index = 0; index < barcodeOptionsArray.length; index++) {
      const options = barcodeOptionsArray[index];
      options["BarcodeFormatIds"] = ["BF_EAN_8","BF_EAN_13","BF_UPC_A","BF_UPC_E"];
    }
    
  4. Use the modified settings.

    await cvRouter.initSettings(settings);
    

Start Scanning from the Camera

  1. Initialize Camera Enhancer and bind its viewer to a container.

    let cameraView = await Dynamsoft.DCE.CameraView.createInstance();
    let cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);
    document.querySelector("#cameraView").append(cameraView.getUIElement());
    
  2. Use Camera Enhancer as the input of the capture vision router so that it can fetch frames from the cameras for reading barcodes.

    cvRouter.setInput(cameraEnhancer);
    
  3. Add a filter to enable multiple frames verification to make sure that the barcode result is correct and to avoid reading the same barcodes too quickly. (Optional)

    let filter = new Dynamsoft.Utility.MultiFrameResultCrossFilter();
    filter.enableResultCrossVerification("barcode", true);
    filter.enableResultDeduplication("barcode", true);
    await cvRouter.addResultFilter(filter);
    
  4. Add a result receiver to receive the scanning results.

    cvRouter.addResultReceiver({ onDecodedBarcodesReceived: (result) => {
      displayResults(result);
    }});
    
    function displayResults(result){
      if (result.barcodeResultItems.length > 0) {
        let container = document.getElementById("result");
        let item = result.barcodeResultItems[0];
        container.innerText = `${item.formatString}: ${item.text}`;
      }
    }
    
  5. Start scanning after the scan button is clicked.

    await cameraEnhancer.open();
    await cvRouter.startCapturing("ReadBarcodes_Balance");
    

All right, we’ve now completed the demo.

Source Code

You can find the source code of the demo in the following repo: https://github.com/tony-xlh/Vanilla-JS-Barcode-Reader-Demos/tree/main/ean

References