Webcam Barcode Reader from Video Stream in JavaScript

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.

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

2. Launch your web application or create a new one. Copy over the DBRResources and DCSResources folders which can be found in 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 on June 15, 2017.