The sample below will demonstrate how to read barcodes in JavaScript using ByteScout Cloud API (low level).

Also, see the following tutorial: How to generate barcodes in JavaScript.

Sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Barcode Reader Cloud API Example</title>
    <script src="read_barcode.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>

    <form id="form1">
        <p>
            <label>Copy-paste your API Key for Bytescout.IO here</label>
            <input type="text" id="apiKey" placeholder="API Key"/>
        </p>
        <p>
            <label>Input File</label>
            <input type="file" name="file" id="inputFile"/>
        </p>
        <p>
            <label>Barcode types to find</label>
            <select multiple="multiple" size="10" id="barcodeTypesToFind">
                <option selected="selected">All</option>
                <option>All1D</option>
                <option>All2D</option>
                <option>AllOMRElements</option>
                <option>AustralianPostCode</option>
                <option>Aztec</option>
                <option>CircularI2of5</option>
                <option>Codabar</option>
                <option>CodablockF</option>
                <option>Code128</option>
                <option>Code16K</option>
                <option>Code39</option>
                <option>Code39Extended</option>
                <option>Code39Mod43</option>
                <option>Code39Mod43Extended</option>
                <option>Code93</option>
                <option>DataMatrix</option>
                <option>EAN13</option>
                <option>EAN2</option>
                <option>EAN5</option>
                <option>EAN8</option>
                <option>GS1</option>
                <option>GS1DataBarExpanded</option>
                <option>GS1DataBarExpandedStacked</option>
                <option>GS1DataBarLimited</option>
                <option>GS1DataBarOmnidirectional</option>
                <option>GS1DataBarStacked</option>
                <option>GTIN12</option>
                <option>GTIN13</option>
                <option>GTIN14</option>
                <option>GTIN8</option>
                <option>IntelligentMail</option>
                <option>Interleaved2of5</option>
                <option>ITF14</option>
                <option>MaxiCode</option>
                <option>MICR</option>
                <option>MicroPDF</option>
                <option>MSI</option>
                <option>PatchCode</option>
                <option>PDF417</option>
                <option>Pharmacode</option>
                <option>PostNet</option>
                <option>PZN</option>
                <option>QRCode</option>
                <option>RoyalMail</option>
                <option>RoyalMailKIX</option>
                <option>Trioptic</option>
                <option>UPCA</option>
                <option>UPCE</option>
                <option>UPU</option>
                <option>Checkbox</option>
                <option>Circle</option>
                <option>Oval</option>
                <option>UnderlinedField</option>
                <option>HorizontalLine</option>
                <option>VerticalLine</option>
                <option>Segment</option>
            </select>
        </p>
        <button type="button" id="submit" onclick="return onSubmit()">Proceed</button>
    </form>

    <div id="errorBlock" style="display: none">
        <h2>Error:</h2>
        <h4>Code: <span id="statusCode"></span></h4>
        <div id="errors"></div>
    </div>

    <div id="resultBlock" style="display: none">
        <h2>Result:</h2>
        <pre id="result"></pre>
    </div>

</body>
</html>

read_barcode.js

function onSubmit() 
{
    // Hide result blocks
    document.getElementById("errorBlock").style.display = "none";
    document.getElementById("resultBlock").style.display = "none";

    // Get API Key
    var apiKey = document.getElementById("apiKey").value.trim();
    if (apiKey == null || apiKey == "") {
        alert("API Key should not be empty.");
        return false;
    }

    // UPLOAD FILE

    var url = "https://bytescout.io/api/v1/file/upload?apiKey=" + apiKey; // Get your API key by registering at http://www.bytescout.io
    var formData = new FormData(document.getElementById("form1"));

    var httpRequest = new XMLHttpRequest();
    httpRequest.open("POST", url, true);

    // Handle asynchronous response
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4) { 
            // If OK
            if (httpRequest.status == 200) {
                readBarcode(apiKey, httpRequest.responseText);
            }
            // Else display error
            else {
                document.getElementById("errorBlock").style.display = "block"; // show hidden errorBlock
                // Display error
                document.getElementById("statusCode").innerHTML = httpRequest.status + " - " + httpRequest.statusText;
                document.getElementById("errors").innerHTML = httpRequest.responseText;
            }
        }
    }

    httpRequest.send(formData);

    return true;
}

function readBarcode(apiKey, uploadedFileId)
{
    // Prepare URL
    var url = "https://bytescout.io/api/v1/barcodereader/read";
    url += "?apiKey=" + apiKey;
    url += "&inputType=fileID";
    url += "&input=" + uploadedFileId; // Specify uploaded file id
    url += "&outputType=content"; // Set output type Content.

    // Add selected barcode types to find
    var listBox = document.getElementById("barcodeTypesToFind");
    for (var i = 0; i < listBox.options.length; i++) {
        if (listBox.options[i].selected == true) {
            url += "&properties.barcodeTypesToFind." + listBox.options[i].value + "=true";
        }
    }

    // Prepare request
    var httpRequest = new XMLHttpRequest();
    httpRequest.open("GET", url, true);
    // Handle asynchronous response
    httpRequest.onreadystatechange = function () {
        if (httpRequest.readyState == 4) {
            // If OK
            if (httpRequest.status == 200) {
                document.getElementById("resultBlock").style.display = "block"; // show hidden resultBlock
                document.getElementById("result").innerHTML = httpRequest.responseText;
            }
                // Else display error
            else {
                document.getElementById("errorBlock").style.display = "block"; // show hidden errorBlock
                // Display error
                document.getElementById("statusCode").innerHTML = httpRequest.status + " - " + httpRequest.statusText;
                document.getElementById("errors").innerHTML = httpRequest.responseText;
            }
        }
    }
    // Send request
    httpRequest.send();
}