vue qrcode reader

Un ensemble de composants Vue.js pour détecter les codes QR et divers autres formats de code-barres directement dans le navigateur:

• QrcodeStream scanne en continu les cadres à partir d'un flux de caméra.

• QrcodeDropZone est une région vide où vous pouvez glisser-décoder des images pour être décodées.

• QrcodeCapture est un champ de téléchargement de fichiers classique, numérisant instantanément tous les fichiers que vous sélectionnez.

Tous les composants sont réactifs. Au-delà de cela, près du style zéro. Faites-leur s'adapter à votre disposition. L'utilisation est simple et simple:

 <qrcode-stream @ détect = "ondetect"> </ qrcode-stream>

 Méthodes: {
  ondetect (détecté codes) {// ...
  }}

Installation

Avec NPM

Courir

 NPM Installer Vue-Qrcode Reader

Vous pouvez importer les composants indépendamment

 import {qrcodeStream, qrcodedRopZone, qrcodecapture} de 'vue-qrcode-leader'const myComponent = {
  //
  Composants: {qrcodeStream, qrcodedropzone, qrcodecapture}

  // ...}

ou enregistrez-les tous dans le monde entier tout de suite

 Importer Vue à partir de 'Vue'IMPORT VUEQRCODEREReader de' Vue-Qrcode-Reader'Vue.Use (VueQrcodeReader)

Sans NPM

Inclure le fichier JS suivant:

https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js

Assurez-vous de l'inclure après Vue:

 <script src = "./ vue.js"> </ script> <script src = "./ vue-qrcode-reader.umd.js"> </ script>

Tous les composants sont automatiquement enregistrés à l'échelle mondiale. Utilisez la cas de kebab pour les référencer dans vos modèles:

 <qrcode-stream> </ qrcode-stream> <qrcode-drop-zone> </ qrcode-drop-zone> <qrcode-capture> </Qrcode-capture>

Dépannage ⚡

Je ne vois pas l'appareil photo lors de l'utilisation QrcodeStream .

• Vérifiez si cela fonctionne sur la page de démonstration. En particulier la démonstration des erreurs de manche, car elle rend les messages d'erreur.

• La démo fonctionne mais cela ne fonctionne pas dans mon projet: écoutez l'événement error pour enquêter sur les erreurs.

• La démo ne fonctionne pas: examinez attentivement la section de support du navigateur ci-dessus. Peut-être que votre appareil n'est tout simplement pas pris en charge.

J'exécute un serveur de développement sur localhost. Comment tester sur mon appareil mobile sans HTTPS?

• Si votre configuration est Desktop Chrome + Android Chrome, utilisez un débogage à distance qui permet à votre appareil Android d'accéder à votre serveur local en tant que localhost.

• Sinon, utilisez un proxy inversé comme Ngrok ou Servo pour rendre temporairement votre serveur local accessible publiquement avec HTTPS.

• Il existe également de nombreux services d'hébergement sans serveur / statiques qui ont HTTPS activé par défaut et où vous pouvez déployer votre application Web gratuitement (par exemple GitHub Pages , GitLab Pages , Google Firebase , Netlify , Heroku , Zeit Now , ...)

Certains de mes codes QR ne sont pas détectés.

• Assurez-vous qu'il y a une bordure blanche autour du code QR.

• Testez vos codes QR dans les packages en amont: barcode-detector -> zxing-wasm -> zxing-cpp et les problèmes de détection de fichiers dans le référentiel le plus élevé où le problème se produit pour la première fois.

Les codes à barres 1D ne sont pas détectés.

La valeur par défaut pour le formats Prop est "['qr_code']" , qui reflète le paramètre avant que l'accessoire formats soit disponible. Vous devrez ajouter d'autres formats de code-barres à cet accessoire pour détecter ces types de codes à barres. Découvrez cette démo.

Comment le faire fonctionner avec Vue 2?

La prise en charge est supprimée mais vous pouvez rétrograder vers Vue-QRCode-Reader V3. * Ou plus bas.

J'obtiens une erreur "Impossible de récupérer" au moment de l'exécution pour un fichier WASM.

Ce fichier WASM implémente le détecteur de code QR. Malheureusement, il n'est pas très pratique de regrouper ce fichier avec le package. Donc, par défaut, nous le récupérons à l'exécution à partir d'un CDN. C'est un problème pour les applications ou applications hors ligne qui s'exécutent dans un réseau avec une stratégie CSP stricte. Pour une solution de contournement, voir: # 354

torch n'est pas pris en charge sur mon appareil, bien qu'il ait une lampe de poche.

La prise en charge de torch est incohérente entre les appareils, les caméras et les navigateurs et les systèmes d'exploitation. Sur certains appareils, la caméra arrière prend en charge torch , mais la caméra frontale ne le fait pas, même si la caméra frontale a réellement une lampe de poche.

De plus, torch n'est pas du tout pris en charge sur iOS (dernier vérifié iOS 17.1).

Visitez cette page avec votre appareil. La liste des liens représente toutes les caméras installées sur l'appareil. Si vous cliquez, la caméra doit être chargée. En dessous de la vue de la caméra, l'objet JSON des "capacités" est imprimé. S'il ne contient pas la paire de touches / valeur "torch": true , alors la lampe de poche n'est pas prise en charge pour cet appareil photo.

Cet objet JSON a fourni en charge utile de l'événement camera-on .