Le code-barres et le code QR ont modernisé notre expérience d'achat et de recherche. Les clients qui transportent des smartphones peuvent désormais acheter un produit partout dans le monde, scanner son code-barres ou son code QR à l'aide de l'une des nombreuses applications téléphoniques gratuites et découvrir son prix le plus bas ainsi que l'endroit où il peut être acheté.

Des entreprises comme Walmart et Amazon ont adopté cette technique pour attirer les clients vers leurs magasins en ligne et hors ligne à l'aide de leur application téléphonique. D'autres sociétés comme Fedex et UPS permettent aux clients de scanner les codes sur les packages à l'aide d'une application téléphonique, au lieu d'avoir à taper manuellement de longues listes de caractères.

Si les utilisateurs de votre site Web mobile ont besoin de taper des codes longs comme codes d'activation, ou ils aiment rechercher des produits spécifiques sur votre site Web en fonction d'un numéro de modèle imprimé dans un magazine ou une publicité, alors vous pouvez également profiter des codes QR pour éliminer la frustration des minuscules claviers et leur épargner le besoin de revérifier pour les erreurs.

Numérisation de code QR avec votre site Web mobile

Vous n'avez pas besoin d'une application de téléphone native pour numériser les codes QR. Il est assez simple de créer votre propre lecteur de code QR. Votre site Web fonctionnant sur un smartphone équipé d'un appareil photo et exécutant un peu de JavaScript peut faire la même astuce.

Voici une démo d'un scanner de code QR qui fonctionne non seulement sur Mobile mais aussi dans la plupart des appareils modernes . Tout ce dont vous avez besoin, c'est d'un appareil photo et d'un code QR pour numériser.

Si vous n'avez pas de code QR à portée de main, en voici un qui montre les huit premiers chiffres de Pi.

Création du lecteur de code QR

Notre lecteur de code QR aura besoin de HTML et de JavaScript mais, surtout, d'une bibliothèque JavaScript capable d'interpréter le code QR.

Nous n'allons pas pour le construire nous-mêmes, car il y a d'excellentes bibliothèques qui font cela pour nous, donc nous n'avons pas besoin de réinventer la roue pour nos besoins actuels.

Commençons par créer un index.html

Ajout du code HTML

Nous aurons besoin d'un code HTML très simple pour ce projet. Ajoutez ce qui suit à votre balise body:

    
 Scanner de code QR 

    
        
    

    

    
  

Comme vous pouvez le voir, nous avons un conteneur d'emballage avec un titre, l'image de l'icône QR enveloppée dans un un , une toile et une div où nous afficherons le résultat de l'analyse.

En dehors du conteneur div nous incluons le Fichier qrCodeScanner.js . Nous le créerons plus tard, mais nous améliorerons d'abord l'apparence de notre application.

Ajout de styles

Ajoutez la feuille de style à la tête de notre HTML:

Maintenant, nous voulons créer le style Fichier .css dans le dossier src . Nous voulons juste quelques styles de base pour cet exemple d'application. Ajoutez ce qui suit à votre fichier css:

 html {
  hauteur: 100%;
}

corps {
  famille de polices: sans-serif;
  rembourrage: 0 10px;
  hauteur: 100%;
  fond: noir;
  marge: 0;
}

h1 {
  Couleur blanche;
  marge: 0;
  rembourrage: 15px;
}

#récipient {
  alignement du texte: centre;
  marge: 0;
}

# qr-canvas {
  marge: auto;
  largeur: calc (100% - 20px);
  largeur max: 400px;
}

# btn-scan-qr {
  curseur: pointeur;
}

# btn-scan-qr img {
  hauteur: 10em;
  rembourrage: 15px;
  marge: 15px;
  fond: blanc;
}

# qr-result {
  taille de police: 1.2em;
  marge: 20px auto;
  rembourrage: 20px;
  largeur max: 700px;
  couleur de fond: blanc;
}

Rien d'extraordinaire. Nous laisserons tout centré avec un gros bouton QR au milieu et le résultat en dessous. Nous utilisons le noir et blanc comme les codes QR.

Y compris les bibliothèques JavaScript dépendantes

Le secret de la lecture des codes QR est les mathématiques et le substitut des mathématiques est les bibliothèques open source. Pour lire les codes QR, nous utiliserons le port JavaScript de la bibliothèque de traitement d'images Java écrite par ZXing. La version JavaScript a été portée par Lazar Laszlo.

Étant donné que la bibliothèque JavaScript comprend 17 fichiers, nous avons pris la liberté de les fusionner en un seul fichier, en enveloppant le code dans une fonction anonyme pour éviter la pollution de l'espace de noms global et en mettant

Quelques ajustements mineurs à la bibliothèque

Afin de rendre la bibliothèque plus adaptable, nous avons ajouté quelques modifications mineures à la fonction de sortie de la bibliothèque pour faire la différence entre une réponse succès et une réponse erreur .

Deux modifications importantes ont été apportées à qrcode.js sur ces deux lignes:

 qrcode.result = "erreur de décodage du QR Code";
// ...
qrcode.callback ("Impossible de charger l'image");

Ces chaînes ont été remplacées par des objets Error :

 qrcode.result = Error ("error decoding QR Code");
// ...
qrcode.callback (Erreur ("Impossible de charger l'image"));

Maintenant, je peux détecter dans ma fonction de rappel si une erreur s'est produite, simplement en vérifiant si la charge utile de rappel est une instance de Erreur ou non.

Ces changements peuvent être trouvés dans ce fork de la bibliothèque.

Ajout de la balise de script

Pour utiliser la bibliothèque dans notre lecteur de code QR, nous devons d'abord l'inclure dans notre code HTML à l'aide d'une balise de script standard:

La traiter comme un App

Nous devrons faire quelque chose pour dire aux navigateurs mobiles que nous ne voulons pas mettre ce site à l'échelle en mode portrait. Ceci peut être réalisé en ajoutant la balise META suivante dans l'élément head :

Ajout du JavScript

Nous devons maintenant créer le fichier qrCodeReader.js dans le fichier [1945901211] ] src qui devrait être au même niveau que notre fichier HTML.

Ajoutons du code à notre nouveau fichier:

 const qrcode = window.qrcode;

const video = document.createElement ("video");
const canvasElement = document.getElementById ("qr-canvas");
const canvas = canvasElement.getContext ("2d");

const qrResult = document.getElementById ("qr-result");
const outputData = document.getElementById ("outputData");
const btnScanQR = document.getElementById ("btn-scan-qr");

laissez balayage = faux;

En haut de ce morceau de code, nous obtenons l'objet qrcode de la fenêtre et l'assignons à une constante pour plus de commodité. Nous créons également un élément vidéo que nous utiliserons pour gérer les images provenant de la caméra.

Ensuite, nous obtenons l'élément canvas et nous l'utilisons pour attribuer le Contexte 2D à une constante. Nous en aurons besoin pour dessiner les images provenant de notre caméra.

Ensuite, nous obtenons les éléments pertinents pour afficher les résultats et interagir avec l'application et, en bas, nous déclarons la variable de numérisation pour garder le statut de notre scanner.

Ensuite, nous allons définir le rappel pour notre lecteur de code QR. Ajoutez ce qui suit au bas du fichier:

 qrcode.callback = (res) => {
  if (res) {
    outputData.innerText = res;
    balayage = faux;

    video.srcObject.getTracks (). forEach (track => {
      track.stop ();
    });

    qrResult.hidden = false;
    btnScanQR.hidden = false;
    canvasElement.hidden = true;
  }
};

Ici, nous attribuons la fonction de rappel de l'objet qrcode . Celui-ci sera appelé par la bibliothèque lorsqu'elle détectera un code QR. Il fournit le paramètre res contenant le résultat de l'analyse, nous l'associons donc à la propriété innerText de l'élément outputData .

Il existe quatre autres choses qui se passent ici. Tout d'abord, nous définissons la variable de balayage sur false, car nous ne voulons plus balayer après avoir déjà décodé notre code QR.

Ensuite, nous obtenons toutes les pistes du flux à l'intérieur de la propriété srcObjec de l'élément vidéo et en les arrêtant un par un. C'est ainsi que nous arrêtons de diffuser la caméra de l'utilisateur.

Juste après cela, nous nous assurons d'afficher l'élément qrResult et l'élément btnScanQR afin que l'utilisateur puisse voir le résultat et déclencher un autre scan. Enfin, nous masquons l'élément canvasElement car nous n'en avons plus besoin.

C'est tout ce dont nous avons besoin pour gérer la réponse du scanner.

Nous devons maintenant accéder au flux de la caméra et configurer une boucle pour dessiner les images dans notre toile à chaque image. Nous avons également besoin d'une autre boucle pour rechercher des codes QR toutes les x millisecondes.

Analyser chaque trame serait un gaspillage de ressources, il est donc préférable de gérer cela dans une boucle distincte où nous pouvons contrôler la fréquence à laquelle nous exécutons le

Nous le ferons dans le gestionnaire onclick de l'élément btnScanQR :

 btnScanQR.onclick = () =>
  navigator.mediaDevices
    .getUserMedia ({video: {revêtementMode: "environnement"}})
    .then (fonction (flux) {
      balayage = vrai;
      qrResult.hidden = true;
      btnScanQR.hidden = true;
      canvasElement.hidden = false;
      video.setAttribute ("playsinline", true); // requis pour dire à iOS safari que nous ne voulons pas du plein écran
      video.srcObject = stream;
      video.play ();
      cocher();
      analyse();
    });
};

OK, passons par là. Nous appelons la fonction getUserMedia à partir de l’objet mediaDevices qui fait partie de l’objet navigateur . Cela obligera le navigateur à demander à l'utilisateur la permission d'utiliser son appareil photo.

La fonction getUserMedia prend un objet comme paramètre, auquel nous passons l'objet vidéo avec le faceMode défini sur "environnement" . Si l'utilisateur utilise un appareil mobile, cela tentera de placer l'appareil photo à l'arrière. Il renvoie une promesse qui, une fois résolue, fournit un flux que nous pouvons affecter à l'élément srcObject de l'élément vidéo que nous avons créé. Ensuite, nous définissons l'attribut "playsinline" sur true ce qui empêchera le safari iOS de passer en plein écran.

À ce stade, nous pouvons jouer () la vidéo mais, bien sûr, cela ne suffit pas. Nous devons dessiner le flux à chaque image, nous appelons donc la fonction tick à cet effet, puis la fonction scan pour déclencher l'algorithme.

Définissons le tick fonction:

 fonction tick () {
  canvasElement.height = video.videoHeight;
  canvasElement.width = video.videoWidth;
  canvas.drawImage (vidéo, 0, 0, canvasElement.width, canvasElement.height);

  numérisation && requestAnimationFrame (cochez);
}

Il s'agit d'une boucle classique image par image. Nous définissons la hauteur et la largeur du canvasElement aux dimensions de la vidéo . Ensuite, nous dessinons la vidéo sur la toile et en bas nous utilisons requestAnimationFrame et passons la fonction tick afin qu'elle soit appelé à nouveau lorsque le navigateur dessine la trame suivante. Nous faisons cela conditionnellement à la variable de balayage étant vraie .

Définissons maintenant la fonction de balayage:

 fonction scan () {
  essayez {
    qrcode.decode ();
  } catch (e) {
    setTimeout (scan, 300);
  }
}

Maintenant, c'est assez simple. Nous exécutons la fonction de décodage de la bibliothèque qrcode qui recherchera une toile avec un ID de "qr-canvas" et scanner son contenu. Si nous ne trouvons rien, l'erreur que nous avons définie sera détectée et nous appellerons un setTimeout pour numériser en 300 millisecondes. Vous pouvez définir cela sur autre chose pour voir ce qui se passe. Plus vous attendez le prochain scan, plus ce sera lent. Moins vous attendez, plus vous exigez de l'appareil de l'utilisateur, alors faites attention. Essayez de chercher un endroit idéal.

C'est tout ce dont nous avons besoin! Essayons maintenant l'application.

Voir le lecteur de code QR en action

Voici le projet de travail dans codesandbox . Cliquez sur le bouton QR et montrez à la caméra un code QR à scanner. Tenez-le en place pendant un instant et vous obtiendrez votre résultat. Vous serez surpris de sa rapidité et de sa fluidité.

Conclusion

Nous l'avons donc ici, votre propre lecteur de code QR pour votre site Web mobile. Vous pouvez également l'utiliser à partir de n'importe quelle plate-forme, ce qui la rend super dynamique et apporte beaucoup de valeur à vos clients.

Les codes QR existent depuis de nombreuses années, et le code de traitement d'image écrit par ZXing a d'abord été porté sur JavaScript presque il y a neuf ans. Il a si bien résisté à l'épreuve du temps qu'il reste l'une des options les plus rapides – sinon les plus rapides du Web. Il est également gratuit et open source, ce qui le rend encore meilleur.

Nous espérons que vous vous amuserez avec quelque chose d'incroyable!

Ressources téléchargeables

Liens externes