Webcam Barcode Reader from Live Video Stream in JavaScript

webcam barcode scanner

Read Barcode and QR Code from Video in JS

In a previous post, we talked about how to create a webcam barcode scanner application with HTML5. However, using HTML5 to access a webcam has some limitations and might not meet your needs. In this post, we will talk about how to create a webcam barcode reader in JavaScript with Dynamsoft’s Camera SDK and Barcode Reader.

You can try out the webcam barcode reader online demo from a Windows machine:

Reading barcodes from video stream online >

About Dynamsoft’s Web Imaging SDKs

This demo uses two of Dynamsoft imaging SDKs –

  • Dynamsoft Camera SDK is a UVC-based camera library that enables you to stream video and capture images from webcams. It works with all major browsers on Windows.
  • Dynamsoft Barcode Reader SDK provides JavaScript API for you to quickly create a client-side barcode reading application. The supported barcode types include linear barcode, QR code, DataMatrix, and PDF417.

How to Scan Barcodes from Webcam Video in JavaScript

Below are the basic steps and code snippets of the demo:

  1. Download and install Dynamsoft Imaging SDKs.
  1. Launch your web application or create a new one. Copy over the DBRResources and DCSResources folders which can be found in the installation folders.
  2. Reference Dynamsoft Camera SDK and Barcode Reader SDK JS files.
<script src="DCSResources/dynamsoft.camera.config.js"></script>
<script src="DCSResources/dynamsoft.camera.initiate.js"></script>
<script src="DBRResources/dynamsoft.barcodereader.config.js"></script>
<script src="DBRResources/dynamsoft.barcodereader.initiate.js"></script>
  1. Initialize Dynamsoft Barcode Reader object and Dynamsoft Camera SDK object, and then play the video.
// Initialize Dynamsoft Barcode Reader object
dynamsoft.dbrEnv.init(
    // success
    function () {
        dbrObject = new dynamsoft.dbrEnv.BarcodeReader();
        // init dcs after init dbr
        dynamsoft.dcsEnv.init('video-container', "image-container", onDcsInitSuccess, onDcsInitFailure);
    },
    // fail
    function (errorCode, errorString) {
        alert('Init DBR failed: ' + errorString);
    }
);

// Initialize Dynamsoft Camera SDK object

dynamsoft.dcsEnv.init('video-container', "image-container", onDcsInitSuccess, onDcsInitFailure);

// Callback functions for init() method
function onDcsInitSuccess(videoViewerId, imageViewerId) {
    demo.dcsObject = dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
    imageViewer = dcsObject.getImageViewer(imageViewerId);
    imageViewer.ui.setImageViewMode(-1, -1);
    var cameraList = dcsObject.camera.getCameraList();
    //if(cameraList == null)
    for (var i = 0; i < cameraList.length; ++i) {
        dcsSourceSelect.options.add(new Option(cameraList[i], cameraList[i]));
    }
    if (cameraList.length > 0) {
        $(dcsSourceSelect).change();
    } else {
        alert('No camera is connected.');
    }
}
function onDcsInitFailure(errorCode, errorString) {
            alert('Init DCS failed: ' + errorString);
        }

// Play the video after the page is loaded
dcsObject.camera.playVideo();
  1. Start decoding the barcodes from the webcam video stream on button clicked. We set the read interval to 100ms.
var isPaused;
var divResult = $("#dbrResults");
var pReadInterval;

function startReadBarcode() {
    if (!checkBarcodeFormat()) { return; }
    isPaused = false;
    $("#dbrStart").prop("disabled", true);
    $("#dbrStop").prop("disabled", false);
    $('input[name="BarcodeType"]').prop('disabled', true);
    $('#dcsSourceSelect').prop('disabled', true);
    $('#dcsResolutionSelect').prop('disabled', true);
    divResult[0].innerHTML = "";
    getVideoRectInfo();

    pReadInterval = setInterval(function () {
        scanBarcode();
    }, 100);

function scanBarcode() {

    dbrObject.barcodeFormats = getBarcodeFormat();
    
    var imageCount = imageViewer.image.getCount();
    ...

    if (imageCount >= 2) {
        var dcsURL = imageViewer.image.getImagePartUrl(imageCount - 2);

        dbrObject.readURLAsync(dcsURL, (new Date()).getTime(), onReadSuccess, onReadFailure);
        ++scanBarcodeCount;
    }
}
  1. Return the barcode results.
function onReadSuccess(userData, result) {

    --scanBarcodeCount;
    errorContinuingCount = 0;

    if (isPaused)
        return;

    removeResultRect();

    var iBarcodeCount = result.getCount();

    if (iBarcodeCount > 0) {
        var strMsg = ["<br/>Total barcode(s) found: ", iBarcodeCount, "<br/>",
            "Total time spent: ", (new Date()).getTime() - userData, " ms", "<br/><br/>"];

        for (var idx = 0; idx < iBarcodeCount; ++idx) {
            var barcode = result.get(idx);

            addResultRect(idx + 1, barcode.left, barcode.top, barcode.width, barcode.height);

            var arr = ["Barcode ", (idx + 1), "<br/>",
                "Type: <b>", barcode.formatString, "</b><br/>",
                "Value: <b>", barcode.text, "</b><br/>"//,
            ];
            strMsg = strMsg.concat(arr);
        }

        divResult.append(strMsg.join(""));
        divResult[0].scrollTop = divResult[0].scrollHeight;
    }
}

Get Sample Code and Free Trial

You can download the complete sample code here.

To implement barcode reading from webcam video to your own application, you can get the 30-day free trials.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com