barKoder SDK - Vanilla JavaScript Integration Example

Cordova Cordova Examples

Vanilla Integration Example

Install Cordova Globally #

                npm install -g cordova

Create a New Cordova Project #

                cordova create my-cordova-app com.example.cordovaapp CordovaApp

Navigate into the Cordova Project #

                cd my-cordova-app

Add Android Platform #

                cordova platform add android

Add barkoder-cordova Plugin #

                cordova plugin add barkoder-cordova

Set Up the Barcode Scanner in Vanilla JavaScript #

Replace the content of the body in www/index.html with the following:

                <body>
    <div id="container">
        <div id="barkoderView"></div>
        <div class="btnContainer">
            <button id="startScanBtn" class="actionButton" disabled>Start Scanning</button>
            <button id="stopScanBtn" class="actionButton" disabled>Stop Scanning</button>
        </div>
        <div id="resultContainer" class="resultContainer" style="display:none;">
            <p>Result: <a id="resultText"></a></p>
            <p>Type: <span id="resultType"></span></p>
            <img id="resultImage" class="resultImage" alt="Scanned Thumbnail" />
        </div>
    </div>
    <script src="cordova.js"></script>
    <script src="js/config.js"></script>
    <script src="js/index.js"></script>
</body>

Replace the content of www/js/index.js with the following:

                document.addEventListener('deviceready', function() {
    const barkoderView = document.getElementById('barkoderView');
    const startScanBtn = document.getElementById('startScanBtn');
    const stopScanBtn = document.getElementById('stopScanBtn');
    const resultContainer = document.getElementById('resultContainer');
    const resultText = document.getElementById('resultText');
    const resultType = document.getElementById('resultType');
    const resultImage = document.getElementById('resultImage');
    
    let isScanning = false;

    startScanBtn.disabled = false;

    const setActiveBarcodeTypes = async () => {
        try {
            await window.Barkoder.setBarcodeTypeEnabled(BarcodeType.code128, true);
            await window.Barkoder.setBarcodeTypeEnabled(BarcodeType.code39, true);
            // add other barcode types here
            await window.Barkoder.setBarcodeTypeEnabled(BarcodeType.ean13, true);
        } catch (error) {
            console.error('Error setting active barcode types:', error);
        }
    };

    const setBarkoderSettings = async () => {
        try {
            window.Barkoder.setRegionOfInterestVisible(true);
            window.Barkoder.setRegionOfInterest(5, 5, 90, 90);
            window.Barkoder.setCloseSessionOnResultEnabled(false);
            window.Barkoder.setImageResultEnabled(true);
            window.Barkoder.setBarcodeThumbnailOnResultEnabled(true);
            window.Barkoder.setBeepOnSuccessEnabled(true);
            window.Barkoder.setPinchToZoomEnabled(true);
            window.Barkoder.setZoomFactor(2.0);
        } catch (error) {
            console.error('Error setting Barkoder settings:', error);
        }
    };

    const startScanning = async () => {
        isScanning = true;
        startScanBtn.disabled = true;
        stopScanBtn.disabled = false;
        resultContainer.style.display = 'none';

        try {
            const boundingRect = barkoderView.getBoundingClientRect();

            window.Barkoder.registerWithLicenseKey('ADD_YOUR_LICENSE_KEY_HERE');

            await new Promise((resolve, reject) => {
                window.Barkoder.initialize(
                    Math.round(boundingRect.width),
                    Math.round(boundingRect.height),
                    Math.round(boundingRect.x),
                    Math.round(boundingRect.y),
                    () => resolve(),
                    (error) => reject('Initialization error: ' + error)
                );
            });

            await setBarkoderSettings();
            await setActiveBarcodeTypes();

            window.Barkoder.startScanning(
                (barkoderResult) => {
                    resultText.textContent = barkoderResult.textualData;
                    resultText.href = barkoderResult.textualData;
                    resultType.textContent = barkoderResult.barcodeTypeName;
                    resultImage.src = "data:image/jpeg;base64," + barkoderResult.resultThumbnailAsBase64;
                    resultContainer.style.display = 'block';
                    window.Barkoder.stopScanning();
                    isScanning = false;
                    startScanBtn.disabled = false;
                    stopScanBtn.disabled = true;
                },
                (error) => console.error('Scanning error:', error)
            );
        } catch (error) {
            alert('Error: ' + error);
            isScanning = false;
            startScanBtn.disabled = false;
            stopScanBtn.disabled = true;
        }
    };

    const stopScanning = () => {
        window.Barkoder.stopScanning(
            () => {
                isScanning = false;
                startScanBtn.disabled = false;
                stopScanBtn.disabled = true;
            },
            (error) => console.error('Stop scanning error:', error)
        );
    };

    startScanBtn.addEventListener('click', startScanning);
    stopScanBtn.addEventListener('click', stopScanning);
}, false);

Create www/js/config.js with the following content: plugins/barkoder-cordova-plugin/www/BarcoderConfig.ts

                // Enum-like objects for TypeScript enums
const DecodingSpeed = {
    fast: 0,
    normal: 1,
    slow: 2
};

const FormattingType = {
    disabled: 0,
    automatic: 1,
    gs1: 2,
    aamva: 3
};

const MsiChecksumType = {
    disabled: 0,
    mod10: 1,
    mod11: 2,
    mod1010: 3,
    mod1110: 4,
    mod11IBM: 5,
    mod1110IBM: 6
};

const Code39ChecksumType = {
    disabled: 0,
    enabled: 1
};

const Code11ChecksumType = {
    disabled: 0,
    single: 1,
    double: 2
};

const BarkoderResolution = {
    normal: 0,
    high: 1
};

const BarcodeType = {
    aztec: 0,
    aztecCompact: 1,
    qr: 2,
    qrMicro: 3,
    code128: 4,
    code93: 5,
    code39: 6,
    codabar: 7,
    code11: 8,
    msi: 9,
    upcA: 10,
    upcE: 11,
    upcE1: 12,
    ean13: 13,
    ean8: 14,
    pdf417: 15,
    pdf417Micro: 16,
    datamatrix: 17,
    code25: 18,
    interleaved25: 19,
    itf14: 20,
    iata25: 21,
    matrix25: 22,
    datalogic25: 23,
    coop25: 24,
    code32: 25,
    telepen: 26,
    dotcode: 27
};

// BarkoderConfig class
class BarkoderConfig {
    constructor(config) {
        Object.assign(this, config);
    }
}

// DekoderConfig class
class DekoderConfig {
    constructor(config) {
        Object.assign(this, config);
    }
}

// BarcodeConfig class
class BarcodeConfig {
    constructor(config) {
        Object.assign(this, config);
    }
}

// BarcodeConfigWithLength class
class BarcodeConfigWithLength {
    constructor(config) {
        Object.assign(this, config);
    }

    setLengthRange(minLength, maxLength) {
        this.minLength = minLength;
        this.maxLength = maxLength;
    }
}

// MSIBarcodeConfig class
class MSIBarcodeConfig {
    constructor(config) {
        Object.assign(this, config);
    }

    setLengthRange(minLength, maxLength) {
        this.minLength = minLength;
        this.maxLength = maxLength;
    }
}

// Code39BarcodeConfig class
class Code39BarcodeConfig {
    constructor(config) {
        Object.assign(this, config);
    }

    setLengthRange(minLength, maxLength) {
        this.minLength = minLength;
        this.maxLength = maxLength;
    }
}

// Code11BarcodeConfig class
class Code11BarcodeConfig {
    constructor(config) {
        Object.assign(this, config);
    }

    setLengthRange(minLength, maxLength) {
        this.minLength = minLength;
        this.maxLength = maxLength;
    }
}

// DatamatrixBarcodeConfig class
class DatamatrixBarcodeConfig {
    constructor(config) {
        Object.assign(this, config);
    }

    setLengthRange(minLength, maxLength) {
        this.minLength = minLength;
        this.maxLength = maxLength;
    }
}

// GeneralSettings class
class GeneralSettings {
    constructor(config) {
        Object.assign(this, config);
    }

    setROI(x, y, width, height) {
        this.roiX = x;
        this.roiY = y;
        this.roiWidth = width;
        this.roiHeight = height;
    }
}

// Exporting classes and enum-like objects
module.exports = {
    DecodingSpeed,
    FormattingType,
    MsiChecksumType,
    Code39ChecksumType,
    Code11ChecksumType,
    BarkoderResolution,
    BarcodeType,
    BarkoderConfig,
    DekoderConfig,
    BarcodeConfig,
    BarcodeConfigWithLength,
    MSIBarcodeConfig,
    Code39BarcodeConfig,
    Code11BarcodeConfig,
    DatamatrixBarcodeConfig,
    GeneralSettings
};

Replace the content of www/css/index.css with the following:

                #container {
  margin-top: 30px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

#container p {
  font-size: 16px;
  line-height: 22px;
  color: #8c8c8c;
  margin: 0;
}

#container a {
  text-decoration: none;
  color: #007bff;
  word-wrap: break-word;
}

#barkoderView {
  height: 400px;
}

.btnContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.actionButton {
  width: 100%;
  height: 40px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.actionButton:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.resultContainer {
  margin-top: 20px;
  width: 100%;
}

.resultImage {
  width: 100%;
  max-width: 200px;
  height: auto;
  margin-top: 10px;
  border-radius: 5px;
}

Build and Run Your Cordova App #

                cordova build android
cordova run android

Angular Integration Example

React Integration Example