How to Create an Online QR Code Reader

To acquire image from scanner / webcam and read QR barcodes online in a web page

QR code applications have been widely used in document management for document indexing, separation etc. Creating an online QR code reader application involves capturing barcode images, decode the barcode content, and accomplishing corresponding workflows. The barcode images can come from scanned documents, webcam captures or existing image files. Writing all the code for interacting with peripherals, such as scanners and webcams, and for QR code recognition is an ambiguous task. It will cost much time and effort. In this post, we will instead use Dynamic Web TWAIN SDK to dramatically cut down on the cost and work.

Dynamic Web TWAIN is a web-based document imaging SDK which provides JavaScript libraries for twain scanning, webcam capture and barcode reading. It supports all mainstream browsers on Windows and macOS.

Online QR Code Reader Demo

You can try out the online demo application of Dynamic Web TWAIN. The online demo will let you capture an image and read QR barcodes online.

Try QR Code Reader Online Demo >

QR code reader online

Let’s move forward and see how to embed the code for a QR Code scanner in your web application.

Acquire a Barcode Image from Scanner, Webcam or Local Disk

Dynamic Web TWAIN provides both TWAIN scanning and DirectShow webcam capture modules which enable you to capture image from scanner and web cameras. You can also load existing image files.

To scan documents that have a barcode from scanners

function acquireImage()
{
    DWObject.SelectSourceByIndex(document.getElementById("source").selectedIndex); //select a scanner
    DWObject.CloseSource();
    DWObject.OpenSource();	
    DWObject.IfShowUI = document.getElementById("ShowUI").checked; 
    DWObject.Resolution = document.getElementById("Resolution").value; //set resolution for scanning
    var bADFChecked = document.getElementById("ADF").checked; 
    DWObject.IfFeederEnabled = bADFChecked; //if scan from Auto Feeder
    var bDuplexChecked = document.getElementById("Duplex").checked; 
    DWObject.IfDuplexEnabled = bDuplexChecked; //if duplex scan
    DWObject.IfDisableSourceAfterAcquire = true;
    DWObject.AcquireImage();
}

To capture a barcode image from a webcam

function acquireImageByWebcam()
{
    DWObject.Addon.Webcam.SelectSource(document.getElementById("webcamsource").options[document.getElementById("webcamsource").selectedIndex].text);
    
    var valueResolution = "";
    var ResolutionWebcam = document.getElementById("ResolutionWebcam");
    if(ResolutionWebcam && ResolutionWebcam.options.length > 0)
    {
        valueResolution = ResolutionWebcam.options[ResolutionWebcam.selectedIndex].text;
        if(valueResolution != "")
        DWObject.Addon.Webcam.SetResolution(valueResolution); //set the resolution for webcam image capture
    }
    
    var showUI = document.getElementById("ShowUIForWebcam").checked; //if show the user interface of the webcam

     DWObject.Addon.Webcam.CaptureImage(showUI, OnCaptureStart, OnCaptureSuccess, OnCaptureError, OnCaptureEnd);
    
}

To load a barcode image from local disk

function btnLoad_onclick() {
    var OnSuccess = function() {
        appendMessage("Loaded an image successfully.
");
        updatePageInfo();
    };

    var OnFailure = function(errorCode, errorString) {
        checkErrorStringWithErrorCode(errorCode, errorString);
    };
    
    DWObject.IfShowFileDialog = true;
    DWObject.LoadImageEx("", EnumDWT_ImageType.IT_ALL, OnSuccess, OnFailure);
}

Read QR Codes

Dynamic Web TWAIN comes with a barcode reader add-on that enables you to read 1D barcode and QR code from images. Here’s that code:

function btnScanReadBarcode_onclick() {
    if (!checkIfImagesInBuffer()) {
        return;
    }
    
     var OnSuccess = function () {
         //Get barcode result.
        DWObject.Addon.Barcode.Read(DWObject.CurrentImageIndexInBuffer, 
        BarcodeInfo[document.getElementById("ddl_barcodeFormat").selectedIndex].val, GetBarcodeInfo, GetErrorInfo);
    };

    var OnFailure = function(errorCode, errorString) {
        appendMessage(errorString);
    };
	
    //download barcode reader for Windows or Mac
	var strhttp = "http:";
	if("https:" == document.location.protocol) 
		strhttp = "https:";

    if(Dynamsoft.Lib.env.bMac)
        DWObject.Addon.Barcode.Download(strhttp + "//www.dynamsoft.com/Demo/DWT/Resources/addon/MacBarcode.zip", OnSuccess, OnFailure);  
    else
    {
        DWObject.Addon.Barcode.Download(strhttp + "//www.dynamsoft.com/Demo/DWT/Resources/addon/Barcode.zip", OnSuccess, OnFailure); 
    }  
}

function GetBarcodeInfo(sImageIndex, result) {
    //Retrieve barcode details
    var count = result.GetCount();
     appendMessage('BarcodeCount: ' + count + '
'); //return the number of barcode symbols
    if (count == 0) {
        alert("The barcode for the selected format is not found.");
        return;
    } else {
        for (i = 0; i < count; i++) {
            var text = result.GetContent(i);
            var x = result.GetX1(i);
            var y = result.GetY1(i);
            var format = result.GetFormat(i);
            var barcodeText = ("barcode[" + (i + 1) + "]: " + text + "
");
            barcodeText += ("format:" + GetBacodeFormatDesc(format) + "
");
            barcodeText += ("x: " + x + " y:" + y + "
");
            appendMessage(barcodeText);
            
            var strBarcodeString = text + "\r\n" + GetBacodeFormatDesc(format);
            DWObject.AddText(DWObject.CurrentImageIndexInBuffer, x, y, strBarcodeString, 255, 4894463, 0, 1); //return the content of the barcode
        }
    }
}

Get Sample Code and a Free Trial

The complete source code of this sample can be got here.

If you are interested in easily embedding image capture and QR code reading in your web application using Dynamic Web TWAIN, you can download the 30-day free trial. If you have any questions, feel free to get in touch with our pre-sales team.

Get 30-day free trial

Subscribe Newsletter

Subscribe to our mailing list to get the monthly update.

Subscribename@email.com