Wer einen Online Shop betreibt, der möchte vielleicht auch die Barcodes seiner Produkte in seinem Shop anzeigen lassen. Nun könnte man natürlich alles von Hand abtippen aber da ich ein sehr fauler Mensch bin – zeige ich euch hier wie man einen Barcode Scanner programmieren kann. Damit könnt ihr dann einfach euer Smartphone nehmen, die Webseite öffnen und eure Kamera startet dann und erkennt den Barcode und zeigt ihn euch an. Ihr könntet dann diese Info weiterverarbeitet – in dem ihr sie per eMail an euch weiterleitet, oder direkt in ein Formular weiterverarbeiten könnt.

Übrigens der gleiche Code funktioniert auch für QR Codes 🙂

Video

CDN

Für dieses Projekt arbeiten wir mit dem HTML5 Barcodescanner. Man findet diese Scripte dann auf Github unter: mebjas/html5-qrcode. Ihr könnt das Projekt dann dort herunterladen und einbinden oder ihr verwendet wie ich das CDN davon

1

<script src="https://unpkg.com/html5-qrcode"></script>

CSS

Als erstes muss man das ganze ja leicht designen und hier positioniere ich den Container einfach in die Mitte er Seite und sage wie gross da Kamerafeld sein soll.

1
2
3
4
5
6
7
8
9
10
11
12

.container {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #reader {
            width: 600 px;
        }
        #result {
            text-align: center;
            font-size: 1.5rem;
        }

HTML

Als nächstes muss ich mit ID Div’s definieren wo die Kamera angezeigt wird und wo das Resultat angezeigt werden soll

1
2
3
4

<div class="container">
    <div id="reader"></div>
    <div id="result"></div>
</div>

Javascript

Zum Schluss kommt der Javascript part. Den müsst ihr einfach ganz am Schluss einbauen oder als defer von extern verlinken.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

const scanner = new Html5QrcodeScanner('reader',{
    qrbox: {
        width: 250,
        height: 250,
    },
    fps: 20,
});
 
scanner.render(success,error);
 
function success(result){
    document.getElementById('result').innerHTML = `
    <h2>Erfolgreich gescannt</h2>
    <p><a href="${result}">${result}</a></p>
    <br><br>
    <a href="index.html">nochmal scannen</a>
        `;
        scanner.clear();
 
        document.getElementById('reader').remove();
 
}
 
function error(err){
    //console.error(err);
}

Viel Spass mit diesem nützlichen Barcode Scanner