Comment scanner les codes QR dans les navigateurs Web avec Web Workers et jsQR

  • Principal
  • Nouvelles
  • Comment scanner les codes QR dans les navigateurs Web avec Web Workers et jsQR

shisu_ka

Les codes QR sont devenus beaucoup plus populaires ces dernières années. Ils sont largement utilisés pour fournir des informations et faciliter l'enregistrement. Bien qu'il se trouve le plus souvent dans les applications mobiles natives, vous pouvez également intégrer des scans QR sur vos sites Web.

Voici comment utiliser la célèbre bibliothèque jsQR en conjonction avec Web Workers pour offrir une expérience de numérisation QR hautes performances sur le Web. Supposons que vous connaissiez déjà les bases de JavaScript et que vous disposiez d'un site fonctionnel sur lequel vous êtes prêt à ajouter votre code.

1. Mise en route

Commencez par télécharger la bibliothèque jsQR dans un format distribuable précompilé. Assurez-vous qu'il est accessible au public sur votre serveur Web ; Pour cet article, supposons que l'URL est |__+_|. jsQR est également disponible en tant que package npm si vous avez configuré une routine de construction.

Ce package fournit une détection en temps réel des codes QR visibles dans un flux vidéo. Il récupère les données dans le code et les transmet à votre application.

2. Obtenez une image de l'appareil photo

L'étape suivante consiste à acquérir un MediaStream à partir du navigateur. Utilisez le |__+_| API pour obtenir un nouveau flux depuis la caméra de l'utilisateur :

|__+_|

Nous sélectionnons la première caméra trouvée. Une logique supplémentaire peut être ajoutée pour permettre la sélection d'une caméra spécifique indiquée par l'utilisateur. Dans une application réelle, vous devez également améliorer la gestion des erreurs lorsque le |__+_| L'API n'est pas disponible. Cela peut être dû au fait que l'utilisateur utilise un ancien navigateur Web ou a bloqué de manière permanente l'autorisation d'accès à la caméra.

Utilisez le |__+_| fonction pour capturer le flux vidéo. Connectez l'alimentation à |__+_| élément afin qu'il puisse être joué et affiché à l'utilisateur :

|__+_| |__+_|

3. Créer une toile

L'étape suivante consiste à créer un |__+_| élément. Les données vidéo seront transmises de la caméra à |__+_| où les pixels seront extraits de l'image et envoyés à jsQR. Le canevas doit être dimensionné pour correspondre à la taille du flux vidéo.

|__+_|

Le contexte du canevas sera utilisé à l'étape suivante pour dessiner chaque image du flux vidéo sur le canevas.

4. Ajouter jsQR

Ajoutez ensuite jsQR à votre code. L'exécution de jsQR dans un web worker permet au navigateur de le déléguer à un processus d'arrière-plan, améliorant ainsi les performances. jsQR doit analyser chaque image vidéo, donc l'exécuter sur le thread JavaScript principal peut entraîner de sérieux ralentissements sur les appareils bas de gamme.

Le thread principal et son agent Web peuvent communiquer à l'aide de messages. Votre thread principal enverra un message au travailleur jsQR chaque fois qu'une nouvelle image vidéo sera disponible. Le travailleur inspectera ce cadre pour les codes QR dans son fil d'arrière-plan, puis enverra un message au fil principal lorsque le cadre aura été traité.

Chargez votre travailleur dans votre code JavaScript principal et ajoutez un écouteur de message :

|__+_|

Ajout ultérieur |__+_| à votre projet. Celui-ci doit être publiquement accessible dans l'URL fournie au |__+_| constructeur. Les navigateurs téléchargeront le Web Worker si nécessaire.

|__+_|

le |__+_| La fonction télécharge la bibliothèque jsQR. Cet appel est équivalent à un |__+_| dans votre code HTML, mais met le contenu du script à la disposition de votre travailleur Web.

Un écouteur de message est ajouté pour recevoir des événements du thread JavaScript principal. Chaque événement doit inclure les données, la largeur et la hauteur d'une image vidéo transmise par la caméra. Ces valeurs sont envoyées à jsQR, qui tentera de détecter un code QR dans le cadre. Le résultat est renvoyé au fil principal.

5. Tout câbler

La dernière étape consiste à créer une boucle de mise à jour qui fournit périodiquement des images vidéo au travailleur jsQR.

|__+_|

le |__+_| la fonction nécessite que le navigateur passe du temps à appeler |__+_| avant la prochaine peinture. Cette fonction obtient l'image vidéo actuelle, la dessine sur le canevas, puis extrait les données de l'image résultante prêtes à être transmises à jsQR. le |__+_| La méthode de l'instance de travail envoie en fait les données.

Le travailleur agira alors sur les données comme indiqué dans le code ci-dessus. Le résultat de la détection est communiqué au thread principal qui le traite comme indiqué à l'étape 4. Lorsqu'un QR code est détecté, l'application doit utiliser les données récupérées pour avancer dans son flux. Lorsqu'aucun code n'est détecté, |__+_| est appelée à nouveau pour transmettre la trame suivante à l'opérateur QR, prête pour l'évaluation.

Ce mécanisme garantit que vous ne surchargez pas le navigateur en effectuant plusieurs détections de trames en même temps. Chaque appel à |_+_| il est potentiellement coûteux, vous devez donc attendre que le résultat soit connu avant d'en programmer un autre. La boucle ne continue que jusqu'à ce qu'un résultat positif soit renvoyé, avec jsQR gérant une image à la fois. L'interface utilisateur de votre site et l'aperçu de la caméra en direct resteront réactifs tout le temps pendant que le travailleur s'exécute indépendamment en arrière-plan.

6. données de résultat jsQR

Chaque appel réussi à |__+_| renvoie un objet de résultat avec les propriétés suivantes :

  • |__+_| - Chaîne de données extraite du code QR (c'est la seule propriété utilisée dans l'exemple ci-dessus).
  • |__+_| -A |_+_| contenant les octets bruts lus par le code QR.
  • |__+_| - Version du code QR détectée.
  • |__+_| - Un objet qui décrit la position du code QR détecté dans l'image vidéo, y compris les points pour chaque coin.

Aucune donnée n'est disponible lorsque jsQR ne détecte pas de code dans l'image fournie.

7. Conclusion

La combinaison de jsQR avec Web Workers vous permet d'implémenter une analyse de code QR haute performance dans votre application Web. Les codes QR sont un mécanisme d'échange de données simple et pratique que la plupart des utilisateurs d'appareils mobiles connaissent déjà.

Bien que vous puissiez utiliser jsQR dans le cadre de votre boucle principale, vous devez implémenter une limitation agressive pour que votre interface utilisateur reste réactive. Cela entraînerait un délai plus long avant une découverte réussie. Les Web Workers sont compatibles avec tous les navigateurs modernes et améliorent considérablement les performances de cette solution en permettant des analyses en une fraction de seconde dans des conditions d'éclairage optimales.

Qu'est-ce que tu penses?