Lire qrcode à partir d'une page web avec l'appareil photo.

Je cherche une solution pour lire un QRCode sur une page web.

Permet de dire que j'ai généré avec PHP et certains (bibliothèque zxing ou autre chose) un QRCode et son imprimé sur un morceau de papier, ok?

Ce que je voudrais faire maintenant, c'est à lire avec une tablette/smartphone via une page web.
J'parcourir à la page, il me demande de but le QRCode avec l'appareil photo, et puis le contenu numérisé est envoyé à la page qui le décode.

Il y a quelque chose là-bas pour gérer cela sans la nécessité d'utiliser un appareil Android/iOS app?
Il pourrait être un autre type de code-barres en 2D aswell, pas exclusivement un QRCode.

OriginalL'auteur Sclerato | 2013-07-15

7

J'ai déjà travaillé avec Lazarsoft de jsqrcode

Il a bien fonctionné dans le navigateur, et je sais qu'il a fait une démo pour le tester sur un téléphone avec appareil photo.

Voici son référentiel: https://github.com/LazarSoft/jsqrcode

De soutien d'appareil-photo: utilisation de l'CamCanvas API: http://www.taboca.com/p/camcanvas/

Grâce edi, malade de donner un coup d'oeil à vos liens.
Je suis en train de la jsqrcode test.html je peux voir la web cam aperçu, mais ce n'est pas balayant le code qr, une idée?

OriginalL'auteur edi9999

Vous pouvez lire les QR Codes à l'aide d'instascan.

Copie instascan.min.js de la libère de la page et de les charger avec:

<script type="text/javascript" src="instascan.min.js"></script>

Exemple de code pour lire les QR Code.

<!DOCTYPE html>
<html>
  <head>
    <title>QR Code Reader using Instascan</title>
    <script type="text/javascript" src="instascan.min.js"></script>
  </head>
  <body>
    <video id="preview"></video>
    <script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        console.log(content);
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
  </body>
</html>

Je suis d'erreur dans la console:

Uncaught (in promise) TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

. Quel est le problème?
ok, en fait, le fichier javascript dans la version officielle (1.0.0) a un bug. Ce lien est préférable https://rawgit.com/schmich/instascan-builds/master/instascan.min.js

OriginalL'auteur Codemaker

1

Pour moi tous les tests avec LazarSoft a échoué sur tous les appareils (il ne pouvait pas se concentrer correctement). C'est pourquoi je propose une autre solution ici. Il a besoin d'une app, MAIS c'est un existant, de sorte que vous n'avez pas à écrire des applications spécifiques pour les différents appareils.

Utiliser le lecteur de code-Barres par ZXing! Oui c'est possible sans un aller-retour vers le serveur, contrairement à ce que presque n'importe quelle source sur le net, c'est vous dire. Cette application est très fiable dans des conditions différentes (Volume+ pour allumer la lumière) où d'autres scanners échoué.
https://play.google.com/store/apps/details?id=com.google.zxing.client.android&hl=fr

Limitations:
1. Le lecteur de code-barres et de son mécanisme de rappel actuellement ne fonctionne que sur android et ios (les autres sont prévus).
2. Évidemment la solution ne fonctionne que sur les appareils équipés d'une caméra et de l'application installée.
Solution:
1. Mécanisme de déclenchement: Le scanner de code à barres est ouvert lorsque l'URI suivante s'ouvre: http://zxing.appspot.com/scan?...
2. Rappel: Avec ret=... un rappel URI peut être spécifié. C'est le site avec le code qui est de la manipulation de l'analyse, il est possible d'utiliser le même site qui a déclenché le scanner, mais il sera un peu plus compliqué et n'est pas expliqué ici (pas encore d'aller-retour vers le serveur est nécessaire). Avec {CODE}, où les données numérisées est inséré. Notez que la fonction de rappel d'URI a échappé.
  
  Par exemple:
  
  http://zxing.appspot.com/scan?ret=http%3A%2F%2Ffoo.com%2Fscan.htm%23%7BCODE%7D (sans échappement: ...ret=http://foo.com/scan.htm#{CODE})
  
  Important: Vous devez utiliser l'ancre # pour récupérer le code, sinon la solution n'est pas d'aller travailler (en raison de la mise en cache, voir ci-dessous).
3. Manifeste de Cache: Créer un manifeste de cache, ajouter scan.htm pour les entrées mises en cache et ajouter le manifeste de site qui ouvre le scanner (<html cache="foo.appcache">). Contenu du fichier:
```
CACHE MANIFEST

CACHE:
scan.htm

NETWORK:
*
```
4. Processus de l'analyse: Voici un exemple pour scan.htm:
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
  </head>
  <body>
    <script>
      var code = window.location.hash.substr(1);
      ...
    </script>
  </body>
</html>
```
Explication

Parce que le site est mis en cache, pas d'aller-retour vers le serveur est nécessaire. Cela fonctionne, parce que avec # vous êtes toujours sur le même site, si vous voulez passer le code comme ?code=... alors que vous auriez à mettre en cache tous les codes possibles.

Désolé, je ne sais pas comment formater mieux.
Tiret 4 places (8 places) pour le bloc de code en vertu de numérotation ou de la liste. Astuce: après l'indentation de 4 espaces avec Ctrl + K, ajouter un peu de texte aléatoire sur une ligne avant le bloc de code, sélectionnez cette ligne et Ctrl + K à nouveau, puis supprimez le texte que vous venez d'ajouter.
Ah merci, j'ai essayé différentes versions de this.

OriginalL'auteur maraca
0

Instascan (https://github.com/schmich/instascan) a été récemment publié et résoudre un grand nombre des inconvénients de Lazarsoft et le rappel de la solution par @maraca. Il utilise HTML5 pour appareil photo et peut être déployé hors ligne.

OriginalL'auteur Oren Pinsky

Vous devez vous connecter pour publier un commentaire.

Explication