Accueil > Mobile > Brèves d’experts : comment scanner un QRCode en web mobile ?

Brèves d’experts : comment scanner un QRCode en web mobile ?

Avant de s’intéresser à le scanner, ce QRCode, intéressons-nous à qui il est !

Vous avez sans doute déjà vu ces drôles de codes barres carrés…

QR (abréviation de Quick Response) signifie que son contenu peut être décodé rapidement après avoir été lu par un smartphone (entre autres). Il permet de stocker plus d’informations qu’un code barres classique et surtout des données directement reconnues par des applications, permettant ainsi de déclencher facilement des actions comme envoyer un mail, faire un paiement, afficher un texte et j’en passe.

Maintenant qu’on sait ce que c’est  (dans les grandes lignes), revenons au sujet du jour, à savoir comment le scanner en web mobile !

J’ai espionné quelques ODésiens qui en discutaient…

Christian :

Est-ce que quelqu’un sait scanner un QRCode en web mobile ? Attention je ne parle pas d’application Hybride, mais bien d’un site mobile.

Bruno :

Il y a des librairies prenant en entrée l’image png de ton QRCode et te renvoyant la chaîne de caractères contenue dans l’image. Suivant le format de ton QRCode (Aztec, QRCode classique, PDF417, …), la librairie peut être payante ou non.

Dong :

Une librairie open source pour décoder toutes sortes de codes-barre : https://code.google.com/p/zxing/

Yannick :

En non-mobile il existe la librairie ZXing qui lit pas mal de formats. Il me semble avoir vu à une époque une implémentation online de cette librairie, mais je ne l’ai pas retrouvée.

Julien :

Il y a aussi des libs js utilisant les canvas et le FileReader / Blob, mais c’est limité aux plateformes permettant de faire de la capture via de l’input file :

Dans les deux cas, il faut HTML5 et que les input[file][capture] soit disponible.

Alexis :

http://www.raymondcamden.com/index.cfm/2013/5/20/Capturing-camerapicture-data-without-PhoneGap

Christian :

OK, merci pour les retours.

Je connaissais ZXing mais au final si l’on veut tout faire en full Web, il faut effectivement en passer par un input/file/capture (HTML5 mais relativement dispo sur les devices récents) et envoyer l’image au serveur pour décoder. Reste à trouver le moyen de masquer l’horrible champ « veuillez choisir un fichier », qui en fait veut dire « prendre la photo », ce qui n’est pas très parlant pour l’utilisateur…

Christian :

En fin de compte la solution était tout simplement sur le site de ZXing : http://code.google.com/p/zxing/wiki/ScanningFromWebPages

Pour faire des pages Web qui s’intègrent dans un site Web mobile existant, tout en disposant des capacités de l’application native, c’est possible en utilisant une URL spéciale sur laquelle est bindée l’application de ZXing.

Categories: Mobile Tags: ,
  1. 05/10/2013 à 00:05 | #1

    merci pour votre partage, très intéressant tout ca !

  2. 02/11/2015 à 18:15 | #2

    oui effectivement, merci pour ton article et surtout pour la solution que tu y apporte.

  1. Pas encore de trackbacks


4 + = dix