BrowserTools
Publicité
Accueil / Générateurs / Scanner de Codes QR

Scanner de Codes QR

Scannez des codes QR depuis votre appareil photo ou une image importée, entièrement dans votre navigateur.

Chargement de Scanner de Codes QR… Si rien ne se passe, activez JavaScript.

Les codes QR encodent des URL, des cartes de contact, des identifiants Wi-Fi, des informations de paiement et du texte arbitraire dans un code-barres bidimensionnel compact que n'importe quel appareil photo de smartphone peut lire en moins d'une seconde. Mais que faire si vous devez décoder un code QR à partir d'une capture d'écran, d'un fichier image ou d'un second écran, sans sortir votre téléphone ? Les navigateurs modernes exposent désormais l'API BarcodeDetector, une interface native qui traite les données d'image localement sur l'appareil, rendant possible un scan de QR entièrement basé sur le navigateur, sans aucun envoi vers un serveur ni application tierce.

Questions fréquentes

Les images scannées ou les images de l'appareil photo sont-elles envoyées à un serveur ?
Non. Tout le décodage se fait localement dans votre navigateur. Lorsque vous importez un fichier image, il est lu directement depuis la mémoire de votre appareil via l'API File et transmis au moteur de décodage du navigateur. Les images de l'appareil photo sont traitées dans le pipeline graphique du navigateur et ne quittent jamais votre appareil. Aucune donnée n'est journalisée ni stockée.
Comment l'API BarcodeDetector fonctionne-t-elle techniquement ?
L'API BarcodeDetector est une interface native du navigateur qui accepte une source d'image, un HTMLImageElement, HTMLCanvasElement, ImageBitmap ou Blob, et renvoie une Promise se résolvant en un tableau d'objets de code-barres détectés, chacun avec une chaîne rawValue et un boundingBox. En interne, elle délègue aux frameworks d'analyse d'image du système d'exploitation : Vision.framework sur macOS/iOS et ML Kit sur Android, de sorte que la vitesse et la précision de détection égalent celles de l'application appareil photo native.
Quels navigateurs et formats de codes-barres sont pris en charge ?
Les navigateurs basés sur Chromium (Chrome, Edge, Opera) sur ordinateur et Android prennent en charge BarcodeDetector et peuvent décoder les codes QR, Aztec, Code 128, Code 39, Code 93, Codabar, Data Matrix, EAN-8, EAN-13, ITF, PDF417 et UPC-A/E. Safari 17 sur macOS et iOS 17 ont ajouté la prise en charge. Firefox n'implémente pas BarcodeDetector ; l'outil affichera un avis de compatibilité du navigateur et utilisera une solution de repli en JavaScript.
Quelle autorisation le navigateur demande-t-il lors de l'utilisation de l'appareil photo ?
Le navigateur affiche une demande d'autorisation d'appareil photo standard la première fois que vous activez le scan en direct. C'est exigé par la spécification `getUserMedia` et ne peut être contourné. Vous pouvez révoquer l'autorisation à tout moment dans les paramètres du site de votre navigateur. L'outil ne demande que la vidéo, sans audio, et arrête le flux de l'appareil photo dès que vous fermez le scanner ou que vous le quittez.
Puis-je scanner un code QR depuis une capture d'écran ou une image de mon ordinateur ?
Oui. Cliquez sur le bouton Importer une image, sélectionnez n'importe quel fichier PNG, JPEG ou WebP de votre appareil, et l'outil tentera de décoder tous les codes-barres de l'image. C'est particulièrement utile pour les codes QR reçus dans des e-mails ou des captures d'écran, où pointer l'appareil photo d'un téléphone vers un écran est malaisé.
Pourquoi le scan échoue-t-il parfois sur un code QR valide ?
Les causes courantes sont les artefacts de compression JPEG qui floutent les bords des modules, le faible contraste entre les modules sombres et l'arrière-plan, un code trop petit dans le cadre de l'image, une rotation supérieure à 45 degrés sur certains décodeurs, ou des dommages physiques masquant plus que ne le permet le niveau de correction d'erreurs. Essayez d'ouvrir l'image dans un éditeur de photos pour augmenter le contraste et la netteté, puis réimportez-la.
En quoi est-ce différent de simplement utiliser l'appareil photo de mon téléphone ?
L'appareil photo de votre téléphone est l'option la plus simple pour les codes physiques dans le monde réel. Cet outil est plus rapide pour les codes QR numériques, les images sur votre écran, dans les pièces jointes d'e-mails, dans les PDF, où sortir votre téléphone et le pointer vers l'écran est plus lent et moins précis que de simplement importer le fichier. Il vous permet aussi d'inspecter le contenu d'un code QR avant d'ouvrir l'URL, ce qui constitue une vérification de sécurité utile.
Puis-je l'utiliser pour vérifier un code QR que je viens de générer ?
Oui, et c'est une bonne pratique. Après avoir généré un code QR, téléchargez l'image et importez-la ici pour confirmer qu'elle se décode exactement vers l'URL ou les données que vous vouliez. Cela permet de détecter des erreurs comme l'encodage du mauvais protocole (http au lieu de https) ou un espace blanc accidentel dans la saisie qui pourrait faire que le code se scanne mais redirige de manière incorrecte.
Est-il sûr de scanner un code QR inconnu avec cet outil ?
L'outil décode le contenu brut et l'affiche sous forme de texte avant que vous ne preniez la moindre action. C'est plus sûr que de scanner directement avec l'appareil photo d'un téléphone, qui ouvre généralement les URL automatiquement. Vous pouvez inspecter l'URL décodée, vérifier la présence de domaines ou de redirections suspects, et décider de la visiter, de la copier ou de l'écarter.
L'outil fonctionne-t-il sur les navigateurs mobiles ?
Oui. Sur Android, Chrome prend en charge BarcodeDetector nativement, donc le scan par appareil photo est disponible. Sur iOS, Safari 17 ou version ultérieure prend en charge l'API. La voie d'import de fichiers fonctionne sur tous les navigateurs mobiles. Pour le scan en direct par appareil photo sur mobile, pointer l'application appareil photo par défaut de votre appareil vers un code physique est généralement plus pratique, mais l'outil basé sur le navigateur est utile pour décoder un code QR visible sur le même écran.

À propos de Scanner de Codes QR

Les cas d'usage d'un scanner de QR basé sur le navigateur sont plus larges qu'il n'y paraît au premier abord. Les développeurs rencontrent fréquemment des codes QR dans la documentation, les maquettes de design, les flux d'authentification et les environnements de test où scanner avec un téléphone est peu pratique. Les professionnels de l'informatique vérifient les identifiants Wi-Fi encodés en QR avant de déployer une signalétique. Les chercheurs en sécurité inspectent les codes QR dans les campagnes de phishing en toute sécurité, en décodant l'URL sans cliquer dessus. Les créateurs de contenu et les responsables marketing décodent les codes QR des concurrents pour voir vers où ils redirigent. Quiconque reçoit une image avec un code QR intégré peut la déposer dans cet outil et en lire le contenu instantanément.

L'outil utilise deux voies de décodage selon la prise en charge du navigateur. Dans les navigateurs basés sur Chromium (Chrome 88+, Edge 88+, Opera 74+) et Safari 17+, il utilise l'API native `BarcodeDetector`, qui transmet les données d'image brutes au moteur de décodage intégré du navigateur, le même moteur que celui utilisé par l'application appareil photo du système d'exploitation. Dans les navigateurs qui ne prennent pas en charge `BarcodeDetector`, il se rabat sur une implémentation JavaScript. Dans les deux cas, les données d'image sont traitées entièrement sur votre appareil ; rien n'est envoyé vers un serveur. Pour le mode appareil photo, l'outil utilise l'API `getUserMedia` pour accéder au flux de votre webcam, traite les images localement et arrête le flux dès que vous quittez la page.

Pour de meilleurs résultats lors de l'import d'une image, utilisez une version à fort contraste du code avec au moins 10 pixels par module (chaque carré noir ou blanc). Les images JPEG compressées peuvent introduire des artefacts aux frontières des modules qui perturbent les décodeurs ; les fichiers PNG se décodent de manière plus fiable. Si un scan échoue, essayez d'augmenter la luminosité et le contraste de l'image dans un éditeur d'images avant de l'importer. Pour le scan en direct par l'appareil photo, assurez-vous d'un éclairage uniforme sans reflet prononcé sur la surface du code, et tenez l'appareil stable à une distance où le code entier remplit environ la moitié du cadre.

Des caméras qui lisent des codes : comment le scan de codes-barres dans le navigateur est devenu possible

Pendant la majeure partie des 70 ans d'histoire du code-barres, en lire un nécessitait du matériel spécialisé : des scanners laser dans les supermarchés, des lecteurs portatifs dédiés dans les entrepôts, ou au minimum une application mobile native avec un accès direct à l'appareil photo. L'idée qu'une page web puisse décoder un code-barres en temps réel sans aucun logiciel installé aurait semblé invraisemblable encore en 2015. Le changement est venu de deux évolutions convergentes : l'amélioration rapide des performances des GPU mobiles et l'accord des éditeurs de navigateurs pour normaliser l'accès aux caméras des appareils via l'API `getUserMedia`, qui a atteint une prise en charge généralisée vers 2016.

Les premiers scanners de QR basés sur le navigateur reposaient entièrement sur des bibliothèques JavaScript qui implémentaient l'algorithme de décodage Reed-Solomon de manière logicielle. Ils fonctionnaient mais étaient lents, gourmands en CPU et sujets à l'échec sur des images peu contrastées ou légèrement floues. L'amélioration décisive est venue lorsque Google a proposé la Shape Detection API, ensuite affinée en l'API BarcodeDetector, qui expose les mêmes pipelines d'analyse d'image accélérés par le matériel que ceux utilisés par les applications natives. En déléguant aux frameworks Vision ou ML Kit du système d'exploitation, la vitesse de détection s'est améliorée de plusieurs ordres de grandeur et la fiabilité a égalé celle des applications appareil photo natives.

L'API BarcodeDetector a été livrée dans Chrome 83 en 2020 et représente une tendance plus large des navigateurs à absorber des capacités qui nécessitaient auparavant des applications natives : accès au système de fichiers, Bluetooth, USB, presse-papiers et désormais la vision par ordinateur. Chaque capacité normalisée réduit l'écart entre les applications web et les applications natives, même si les éditeurs de navigateurs sont en désaccord sur l'étendue de cet accès. La décision de Firefox de ne pas implémenter BarcodeDetector reflète un débat philosophique permanent sur la question de savoir si les navigateurs devraient exposer des API matérielles de bas niveau, un débat que le cas d'usage du scan de codes-barres rend concret et pratique.

Publicité
Publicité
Publicité