A QR kód egy nagyon jó dolog, képben tudunk rengetegféle információt tárolni. Most megmutatom nektek, hogyan lehet JavaScript-tel QR kódot olvasni.

Hirdetés

Nemrég az egyik munkám során az volt a feladat, hogy QR kódos belépőket tudjak beolvasni weboldalon keresztül, majd ezalapján beazonosítani a vendéget. Megnéztem jó pár megoldást, de ami a legyegyszerűbb és a legjobb az az InstaScan.

Használata rettentő egyszerű és gyors. Mindössze csak egy JavaScript fájlt kell betölteni az oldalba és már működik is. Nézzük is a példakódot.

<!DOCTYPE html>
<html>
  <head>
    <title>Instascan</title>
    <script type="text/javascript" src="instascan.min.js"></script>
  </head>
  <body>
    <video id="preview"></video> //itt fog megjelenni a kamera képe
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content); // a kontent nevű változóba kapjuk meg a QR kódban tárolt adatot
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]); // a cameras tömbben találhatóak az elérhető kamerák, ugyanis egy telefonon akár már 4-5 kamera is lehet
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
  </body>
</html>

Mint láthatjtok a fenti kódból is, a szkript használata roppant egyszerű, amire vigyázni kell tényleg, hogy melyik kamerát figyelje a program. Itt ki is tudjátok próbálni a QR kód olvasót: https://schmich.github.io/instascan/

Remélem segítettem ezzel a kis tutoriállal! 🙂 Bármi kérdés vagy probléma van, írjatok nyugodtan és segítek.

Válaszolj

Az e-mail címed nem publikáljuk.