Mobile QR Code Scanner in HTML5

Originally designed for the automotive industry1, QR code (abbreviated from Quick Response code) has become popular in various usage scenarios. QR codes can encode richer content than 1D barcodes, from website URLs to even a small image. They can be displayed on screens and printed on posters, package boxes, etc. People can easily scan them with their mobile phones.

dynamsoft qr code scanner

Dynamsoft Barcode Reader (DBR) has good support for QR code. It has a JavaScript package since May 25th, 2017. It is easy to use DBR to create a mobile QR code scanner with high speed and accuracy. Since it is HTML5-based, users don’t have to download and install apps and it’s easy to integrate it into your applications to work on different platforms.

There is an out-of-the-box online mobile demo that runs purely on the client side. It can scan with the built-in camera or read barcodes from the image gallery.

Creating your own mobile scanner is simple. There are many samples on GitHub. Some samples demonstrate how to use DBR with Vue, React and Angular. Some are designed as PWA or hybrid apps. You can start with the basic sample: helloworld.html.

Let’s explore it in more detail.

The Hello World Example - An Online QR Code Scanner

It first loads DBR by loading its JS file.

<!-- Please visit https://www.dynamsoft.com/customer/license/trialLicense to get a trial license. -->
<script src="https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode@8.1.3/dist/dbr.js" data-productKeys="PRODUCT-KEYS"></script>

The page contains a button to show the scanner and a button to choose local images to decode.

HTML:

Choose image(s) to decode:
<input id="ipt-file" type="file" multiple accept="image/png,image/jpeg,image/bmp,image/gif">
<br><br>
<button id="btn-show-scanner">show scanner</button>

JavaScript:

// reader for decoding picture
let reader = null;
// scanner for decoding video
let scanner = null;

// decode input picture
document.getElementById('ipt-file').addEventListener('change', async function(){
    try{
        reader = reader || await Dynamsoft.DBR.BarcodeReader.createInstance();
        let resultsToAlert = [];
        for(let i = 0; i < this.files.length; ++i){
            let file = this.files[i];
            resultsToAlert.push(i + '. ' + file.name + ":");
            let results = await reader.decode(file);
            console.log(results);
            for(let result of results){
                resultsToAlert.push(result.barcodeText);
            }
        }
        alert(resultsToAlert.join('\n'));
    }catch(ex){
        alert(ex.message);
        throw ex;
    }
    this.value = '';
});

// decode video from camera
document.getElementById('btn-show-scanner').addEventListener('click', async () => {
    try{
        scanner = scanner || await Dynamsoft.DBR.BarcodeScanner.createInstance();
        scanner.onFrameRead = results => {
            if(results.length){
                console.log(results);
            }
        };
        scanner.onUnduplicatedRead = (txt, result) => {
            alert(result.barcodeFormatString + ': ' + txt);
        };
        await scanner.show();
    }catch(ex){
        alert(ex.message);
        throw ex;
    }
});

The UI of the scanner is defined in dist/dbr.scanner.html2:

You can copy its content to your HTML file, customize it and load it with this line of code:

scanner.setUIElement(scannerElement);

You can try the helloworld online demo here.

Runtime Settings for Decoding QR Codes

You can modify runtime settings3 for different scenarios. For example, if we only want to scan one single QR code, we can modify the settings with the updateRuntimeSettings method:

let settings = await scanner.getRuntimeSettings();
settings.expectedBarcodesCount=1;
settings.barcodeFormatIds=Dynamsoft.DBR.EnumBarcodeFormat.BF_QR_CODE;
await scanner.updateRuntimeSettings(settings);

By using these settings, only QR codes will be recognized. This will improve the decoding speed as well. Decoding speed is very important for real-time video stream scanning.

In some cases, the QR code might be incomplete or deformed. These kinds of codes can be found on plastic bags, ripped receipt, etc. DBR has built-in code complement and deform-resist algorithms to restore these QR codes.

Incomplete QR Codes

DBR offers the capability to auto-restore missing portions of a QR code from poor printing or damage.

Incomplete QR Code

For the incomplete QR code above, we can add the BarcodeComplementModes parameter to the template to successfully decode the barcode.

{
    "Version":"3.0",
    "ImageParameter": 
    {
        "Name": "default",
        "ExpectedBarcodesCount": 1,
        "MaxAlgorithmThreadCount": 4,
        "BarcodeFormatIds": [ "BF_QR_CODE" ],
        "BarcodeComplementModes": [
          {
            "Mode": "BCM_SKIP"
          },
          {
            "LibraryFileName": "",
            "LibraryParameters": "",
            "Mode": "BCM_GENERAL"
          }
        ]
    }
}

Scan Deformed QR Codes

DBR comes with a sophisticated algorithm to improve the decoding success rate for wrinkled and deformed QR codes.

Deformed QR Code

For the deformed QR code above, we can include the DeformationResistingModes parameter in the template.

{
    "Version":"3.0",
    "ImageParameter": 
    {
        "Name": "default",
        "ExpectedBarcodesCount": 1,
        "MaxAlgorithmThreadCount": 4,
        "BarcodeFormatIds": [ "BF_QR_CODE" ],
        "DeformationResistingModes": [
          {
            "Mode": "DRM_SKIP"
          },
          {
            "Level": 5,
            "LibraryFileName": "",
            "LibraryParameters": "",
            "Mode": "DRM_GENERAL"
          }
        ]
    }
}

Read QR Codes from a Specific Region

Another useful setting is to specify an area/region to read:

let settings = await scanner.getRuntimeSettings();
/*
 * 1 means true
 * Using a percentage is easier
 * The following code shrinks the decoding region by 25% on all sides
 */
settings.region.regionMeasuredByPercentage = 1;
settings.region.regionLeft = 25;
settings.region.regionTop = 25;
settings.region.regionRight = 75;
settings.region.regionBottom = 75;
await scanner.updateRuntimeSettings(settings);

A viewfinder box would appear on the video stream and users can then align the QR code within the box to read it. A better alignment would also speed up the decoding process.

Specific region

Scan Multiple QR Codes in One Shot

DBR has the ability to read a large number of QR codes in one shot.

Multiple QR Codes

Variations of QR Codes

Other variations of QR code (Micro QR Code and Model 1) are also supported.

Micro QR code (demo created by the author)

More about Dynamsoft Barcode Reader

Built-in Templates

DBR JS has four built-in templates: speed, balance, coverage and single.

  • The speed template is a good fit if you want to do a live scan. But if there are many QR codes to decode or the image is complex, it may miss some of them.
  • Then the coverage template is a better choice, though it needs more time computing.
  • The balance template takes both speed and coverage into consideration.
  • The single template is optimized for scanning one barcode.

To use one of the built-in templates, use this line of code:

await scanner.updateRuntimeSettings("<template>"); // template: single, speed, balance, coverage

Create Your Own Templates

You can create your own template for your specific use cases. Our online demo is convenient to try out the different parameters.

A JSON template looks like this:

{
    "Version":"3.0",
    "ImageParameter": 
    {
        "Name": "default",
        "ExpectedBarcodesCount": 1,
        "BarcodeFormatIds": [ "BF_QR_CODE" ]
    }
}

We can load it with the following code (template can be stored in a textarea e.g.):

await scanner.initRuntimeSettingsWithString(templateString);

Please note that initRuntimeSettingsWithString is only available in the full edition(differences between compact and full editions).

To enable full features, set the _bUseFullFeature property to true:

Dynamsoft.DBR.BarcodeReader._bUseFullFeature = true; // Control of loading min wasm or full wasm.

Getting Started

Download Dynamsoft Barcode Reader SDK to try it on your own.

Source Code

  1. Official GitHub repo of the JavaScript Barcode Reader
  2. Demo created by the author of this article

References

  1. https://en.wikipedia.org/wiki/QR_code 

  2. https://github.com/Dynamsoft/javascript-barcode#customizing-the-ui 

  3. https://www.dynamsoft.com/barcode-reader/programming/javascript/user-guide/basic-customizations.html?ver=latest#configuring-scanner-settings 

Search Blog Posts