UNPKG

3.22 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3
4 <head>
5 <meta charset="utf-8">
6 <title>Scandit Example Page</title>
7 <meta name="viewport" content="width=device-width, initial-scale=1.0">
8 <script src="build/browser/index.min.js"></script>
9
10 <!-- The following is only an example style for the container element and other demo elements, it's not required -->
11 <style>
12 body {
13 background-color: black;
14 color: white;
15 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
16 }
17
18 .scanner {
19 position: absolute;
20 top: 0;
21 bottom: 0;
22 left: 0;
23 right: 0;
24 margin: auto;
25 max-width: 1280px;
26 max-height: 80%;
27 }
28
29 .result-text {
30 padding: 1rem;
31 font-size: 18pt;
32 text-align: center;
33 }
34 </style>
35 </head>
36
37 <body>
38 <div id="scandit-barcode-picker" class="scanner"></div>
39 <div id="scandit-barcode-result" class="result-text"></div>
40 <button id="scandit-barcode-picker-starter-button" class="start-scanner-button" onclick="startBarcodePicker();" style="display: none;">Start and show BarcodePicker</button>
41
42 <script>
43 var scanditBarcodePicker;
44 var barcodeResultElement = document.getElementById("scandit-barcode-result");
45 var starterButton = document.getElementById("scandit-barcode-picker-starter-button");
46
47 ScanditSDK.configure("YOUR_LICENSE_KEY_IS_NEEDED_HERE", {
48 engineLocation: "build"
49 }).then(function() {
50 return ScanditSDK.BarcodePicker.create(document.getElementById("scandit-barcode-picker"), { accessCamera: false, visible: false, playSoundOnScan: true, vibrateOnScan: true })
51 .then(function(barcodePicker) {
52 barcodeResultElement.innerHTML = "The BarcodePicker is loading...";
53 scanditBarcodePicker = barcodePicker;
54 var scanSettings = new ScanditSDK.ScanSettings({ enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39", "code93", "itf"], codeDuplicateFilter: 1000 });
55 barcodePicker.applyScanSettings(scanSettings);
56 barcodePicker
57 .on("scan", function(scanResult) {
58 barcodeResultElement.innerHTML = scanResult.barcodes.reduce(function(string, barcode) {
59 return string + ScanditSDK.Barcode.Symbology.toHumanizedName(barcode.symbology) + ": " + barcode.data + "<br>";
60 }, "");
61 })
62 .on("scanError", function(error) {
63 console.error(error);
64 })
65 .on("ready", function() {
66 barcodeResultElement.innerHTML = "The BarcodePicker is ready!";
67 starterButton.style.display = "inline-block";
68 });
69 });
70 }).catch(function(error) {
71 alert(error);
72 });
73
74 function startBarcodePicker() {
75 starterButton.style.display = "none";
76 barcodeResultElement.innerHTML = "The BarcodePicker is accessing the camera...";
77 scanditBarcodePicker.accessCamera().then(function() {
78 barcodeResultElement.innerHTML = "";
79 scanditBarcodePicker.setVisible(true);
80 });
81 }
82 </script>
83 </body>
84
85</html>