Implement a Camera Barcode Scanner Using Dynamsoft Imaging SDKs

Want to embed a barcode reader to your web application and enable users to read barcodes with a webcam using their browsers? You can use Dynamsoft Camera SDK and Barcode Reader SDK to easily achieve it. The two imaging SDKs provide JavaScript APIs for you to implement barcode reading with cameras.

System Requirements

Supported devices:

Desktop web camera, laptop camera, and other UVC-compatible cameras;

Resolution 640*480 or higher are recommended

Client side:

All mainstream browsers (Chrome, Firefox, Internet Explorer, Edge, etc.) on Windows

Server side:

Any

Highlights

Access and control a web camera in JavaScript and read barcodes. You can easily integrate the imaging libraries in your web application.

Capture images from a live video stream from within a browser. Users can easily capture the barcode images from a desktop webcam or laptop camera.

Decode various barcodes including 1D, QR Code, DataMatrix, PDF417 and more.

How to Scan and Decode Barcodes in JavaScript from a Web Camera

Below for your reference is the code snippet to use for reading barcodes from a webcam capture:

var dbrObject, dcsObject, imageViewer;

//dbrObject, dcsObject init
{
    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);
        }
    );

    function onDcsInitSuccess(videoViewerId, imageViewerId) {
        dcsObject = dynamsoft.dcsEnv.getObject(videoViewerId);
        imageViewer = dcsObject.getImageViewer(imageViewerId);
        imageViewer.ui.setImageViewMode(-1, -1);
        var cameraList = dcsObject.camera.getCameraList();

        if (cameraList.length > 0) {
            dcsObject.camera.takeCameraOwnership(cameraList[0]);
            dcsObject.camera.playVideo();
        } else {
            alert('No camera is connected.');
        }
    }

    function onDcsInitFailure(errorCode, errorString) {
        alert('Init DCS failed: ' + errorString);
    }
}

// read barcode 
function scanBarcode() {           

    imageViewer.image.remove([0]); 
    dcsObject.camera.captureImage('image-container');
    var dcsURL = imageViewer.image.getImagePartUrl(imageViewer.image.getIndex());            
    var result = dbrObject.readURL(dcsURL);

    var iBarcodeCount = result.getCount();
    if (iBarcodeCount > 0) {                    
            alert(result.get(0).text);
    } else {
        setTimeout(scanBarcode, 500);
    }                        
}