scandit-sdk
Version:
Scandit Barcode Scanner SDK for the Web
86 lines (76 loc) • 3.22 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scandit Example Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="build/browser/index.min.js"></script>
<!-- The following is only an example style for the container element and other demo elements, it's not required -->
<style>
body {
background-color: black;
color: white;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
.scanner {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 1280px;
max-height: 80%;
}
.result-text {
padding: 1rem;
font-size: 18pt;
text-align: center;
}
</style>
</head>
<body>
<div id="scandit-barcode-picker" class="scanner"></div>
<div id="scandit-barcode-result" class="result-text"></div>
<button id="scandit-barcode-picker-starter-button" class="start-scanner-button" onclick="startBarcodePicker();" style="display: none;">Start and show BarcodePicker</button>
<script>
var scanditBarcodePicker;
var barcodeResultElement = document.getElementById("scandit-barcode-result");
var starterButton = document.getElementById("scandit-barcode-picker-starter-button");
ScanditSDK.configure("YOUR_LICENSE_KEY_IS_NEEDED_HERE", {
engineLocation: "build"
}).then(function() {
return ScanditSDK.BarcodePicker.create(document.getElementById("scandit-barcode-picker"), { accessCamera: false, visible: false, playSoundOnScan: true, vibrateOnScan: true })
.then(function(barcodePicker) {
barcodeResultElement.innerHTML = "The BarcodePicker is loading...";
scanditBarcodePicker = barcodePicker;
var scanSettings = new ScanditSDK.ScanSettings({ enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39", "code93", "itf"], codeDuplicateFilter: 1000 });
barcodePicker.applyScanSettings(scanSettings);
barcodePicker
.on("scan", function(scanResult) {
barcodeResultElement.innerHTML = scanResult.barcodes.reduce(function(string, barcode) {
return string + ScanditSDK.Barcode.Symbology.toHumanizedName(barcode.symbology) + ": " + barcode.data + "<br>";
}, "");
})
.on("scanError", function(error) {
console.error(error);
})
.on("ready", function() {
barcodeResultElement.innerHTML = "The BarcodePicker is ready!";
starterButton.style.display = "inline-block";
});
});
}).catch(function(error) {
alert(error);
});
function startBarcodePicker() {
starterButton.style.display = "none";
barcodeResultElement.innerHTML = "The BarcodePicker is accessing the camera...";
scanditBarcodePicker.accessCamera().then(function() {
barcodeResultElement.innerHTML = "";
scanditBarcodePicker.setVisible(true);
});
}
</script>
</body>
</html>