Webcam Barcode Reader from Video Stream in JavaScript

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 borwsers 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.

• Dynamsoft Camera SDK Free Trial
• Dynamsoft Barcode Reader Free Trial

2. Launch your web application or create a new one. The DBRResources and DCSResources folders can be found under the installation folders.

3. 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>

4. 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();

5. 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;
    }
}

6. 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.

Originally published at www.dynamsoft.com/blog