html5 qrcode
Version 2.3.8
Si vous êtes intéressé, veuillez contacter [email protected] .
Important Le projet est en mode maintenance jusqu'à nouvel ordre. L'auteur ne sera pas en mesure d'apporter des corrections de bugs ou des améliorations pour le moment. Les demandes de tirage ne seront pas non plus fusionnées pour le moment. Si vous avez une fourchette que vous pouvez entretenir, veuillez partager les détails à [email protected]. Je suis heureux de les annoncer ici! Ok pour utiliser le projet tel quel. Exemple : scanapp.org.
Utilisez cette bibliothèque légère pour intégrer facilement/rapidement des codes QR, des codes à barres et d'autres fonctionnalités de numérisation de codes courantes à votre application Web.
? Prend en charge la numérisation de différents types de codes à barres et de codes QR.
? Prend en charge différentes plates-formes, que ce soit Android, IOS, MacOs, Windows ou Linux
Prend en charge différents navigateurs comme Chrome, Firefox, Safari, Edge, Opera...
? Prend en charge la numérisation avec l'appareil photo ainsi que les fichiers locaux
➡️ Livré avec une bibliothèque de bout en bout avec interface utilisateur ainsi qu'une bibliothèque de bas niveau avec laquelle créer votre propre interface utilisateur.
? Prend en charge les personnalisations telles que la prise en charge du flash/torche, le zoom, etc.
Prend en charge deux types d'API
Html5QrcodeScanner — Scanner de bout en bout avec interface utilisateur, intégré avec moins de dix lignes de code.
Html5Qrcode — Ensemble puissant d'API que vous pouvez utiliser pour créer votre interface utilisateur sans vous soucier de la configuration de la caméra, de la gestion des autorisations, de la lecture des codes, etc.
La prise en charge de l'analyse des fichiers locaux sur l'appareil est un nouvel ajout utile pour le navigateur Web qui ne prend pas en charge l'accès aux caméras Web en ligne sur les smartphones. Remarque : cela ne télécharge les fichiers sur aucun serveur – tout est fait localement.
| Démo sur scanapp.org | Démo sur qrcode.minhazav.dev - Scanner différents types de codes |
Aidez à encourager le développement de fonctionnalités et la correction de bugs en soutenant les objectifs de parrainage de ce projet. Voir la liste des demandes de fonctionnalités sponsorisées ici.
La documentation de ce projet a été déplacée vers scanapp.org/html5-qrcode-docs.
Nous travaillons continuellement à l'ajout de la prise en charge de plus en plus de plates-formes. Si vous trouvez une plate-forme ou un navigateur sur lequel la bibliothèque ne fonctionne pas, n'hésitez pas à signaler un problème. Consultez le lien de démonstration pour le tester.
Légendes
Firefox | Chrome | Safari | Opéra | Bord |
|---|---|---|---|---|
Chrome | Firefox | Bord | Opéra | Opéra Mini | CU |
|---|---|---|---|---|---|
Safari | Chrome | Firefox | Bord |
|---|---|---|---|
| * | * |
* Pris en charge pour les versions IOS >= 15.1
Avant la version 15.1, Webkit pour IOS est utilisé par Chrome, Firefox et d'autres navigateurs sous IOS et ils ne disposent pas encore d'autorisations de webcam. Il y a un problème persistant concernant la résolution du support pour iOS - numéro/14
La bibliothèque peut être facilement utilisée avec plusieurs autres frameworks, j'ai ajouté des exemples pour quelques-uns d'entre eux et je continuerais à en ajouter d'autres.
| HTML5 | VueJ | ÉlectronJ | Réagir | Allumé |
L'analyse du code dépend de la bibliothèque Zxing-js. Nous travaillerons dessus pour ajouter la prise en charge de davantage de types d'analyse de code. Si vous pensez qu’un certain type de code serait utile, veuillez déposer une demande de fonctionnalité.
| Code | Exemple |
|---|---|
| Code QR | |
| AZTÈQUE | |
| CODE_39 | |
| CODE_93 | |
| CODE_128 | |
| FIT | |
| EAN_13 | |
| EAN_8 | |
| PDF_417 | |
| UPC_A | |
| UPC_E | |
| DONNEES_MATRIX | |
| MAXICODE* | |
| RSS_14* | |
| RSS_EXPANDED* |
*Les formats ne sont pas pris en charge par notre intégration expérimentale avec l'intégration native de l'API BarcodeDetector (En savoir plus).
Découvrez une expérience de scanner de bout en bout sur scanapp.org.
Il s'agit d'une bibliothèque JavaScript multiplateforme permettant d'intégrer des codes QR, des codes à barres et quelques autres types de capacités de numérisation de codes à vos applications exécutées sur un navigateur compatible HTML5.
Prise en charge :
Trouvez des directives détaillées sur la façon d'utiliser cette bibliothèque sur scanapp.org/html5-qrcode-docs.
Scannez cette image ou visitez blog.minhazav.dev/research/html5-qrcode.html
Consultez ces articles sur la façon d'utiliser cette bibliothèque :
Figure : Capture d'écran de Google Chrome exécuté sur MacBook Pro
Retrouvez la documentation complète de l'API sur scanapp.org/html5-qrcode-docs/docs/apis.
configuration facultative supplémentaire dans la méthode start() Objet de configuration qui peut être utilisé pour configurer à la fois le comportement d'analyse et l'interface utilisateur (UI). La plupart des champs ont des propriétés par défaut qui seront utilisées sauf si une valeur différente est fournie. Si vous ne souhaitez rien remplacer, vous pouvez simplement transmettre un objet vide {} .
fps — Entier, exemple = 10 AKA image par seconde, la valeur par défaut est de 2, mais elle peut être augmentée pour obtenir une analyse plus rapide. Une valeur trop élevée pourrait affecter les performances. Une valeur >1000 échouera tout simplement.
qrbox — QrDimensions ou QrDimensionFunction (Facultatif), Exemple = { width: 250, height: 250 } Utilisez cette propriété pour limiter la zone du viseur que vous souhaitez utiliser pour la numérisation. Le reste du viseur serait ombré. Par exemple, en passant config { qrbox : { width: 250, height: 250 } } , l'écran ressemblera à :
Cela peut être utilisé pour définir une zone de numérisation rectangulaire avec une configuration telle que :
let config = { qrbox : { width : 400 , height : 150 } }Cette config accepte également une fonction de type
/**
* A function that takes in the width and height of the video stream
* and returns QrDimensions.
*
* Viewfinder refers to the video showing camera stream.
*/
type QrDimensionFunction =
( viewfinderWidth : number , viewfinderHeight : number ) => QrDimensions ;Cela vous permet de définir des dimensions dynamiques de la boîte QR en fonction des dimensions de la vidéo. Voir par exemple cet article de blog : Définition de la taille de la boîte QR dynamique dans Html5-qrcode - Blog ScanApp
Cela pourrait être souhaitable pour la lecture de codes à barres.
Si cette valeur n'est pas définie, aucune boîte QR ombrée ne sera rendue et le scanner analysera toute la zone du flux vidéo.
aspectRatio — Float, exemple 1.777778 pour un rapport hauteur/largeur 16:9 Utilisez cette propriété pour restituer le flux vidéo dans un certain rapport hauteur/largeur. L'adoption d'un rapport hauteur / largeur non standard tel que 100000:1 pourrait empêcher le flux vidéo de s'afficher. Les valeurs idéales peuvent être :
| Valeur | Rapport hauteur/largeur | Cas d'utilisation |
|---|---|---|
| 1.333334 | 4:3 | Format d'image standard de la caméra |
| 1.777778 | 16:9 | Plein écran, cinématique |
| 1.0 | 1:1 | Vue sur la place |
Si vous ne transmettez aucune valeur, tout le viseur sera utilisé pour le balayage. Remarque : cette valeur doit être inférieure à la largeur et à la hauteur de l' QR code HTML element .
disableFlip — Booléen (facultatif), par défaut = false Par défaut, le scanner peut rechercher des codes QR inversés horizontalement. Cela permet également de scanner le code QR à l'aide de la caméra frontale sur les appareils mobiles qui sont parfois mis en miroir. C'est false par défaut et je recommande de le modifier uniquement si :
Voici un exemple de QR Code normal et en miroir
| Code QR normal | Code QR en miroir |
|---|---|
rememberLastUsedCamera — Booléen (facultatif), par défaut = true Si true la dernière caméra utilisée par l'utilisateur et la météo ou non, l'autorisation a été accordée seront mémorisées dans le stockage local. Si l'utilisateur a déjà accordé des autorisations, l'option de demande d'autorisation dans l'interface utilisateur sera ignorée et la dernière caméra sélectionnée sera automatiquement lancée pour la numérisation.
Si true la bibliothèque se souviendra si les autorisations de la caméra ont été précédemment accordées et quelle caméra a été utilisée pour la dernière fois. Si les autorisations sont déjà accordées pour la « caméra », la numérisation du code QR démarrera automatiquement * pour la caméra précédemment utilisée.
supportedScanTypes - Array<Html5QrcodeScanType> | []Ceci n'est pris en charge que pour
Html5QrcodeScanner.
Par défaut = [Html5QrcodeScanType.SCAN_TYPE_CAMERA, Html5QrcodeScanType.SCAN_TYPE_FILE]
Ce champ peut être utilisé pour :
Camera ou sur File .Comment utiliser :
function onScanSuccess ( decodedText , decodedResult ) {
// handle the scanned code as you like, for example:
console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}
let config = {
fps : 10 ,
qrbox : { width : 100 , height : 100 } ,
rememberLastUsedCamera : true ,
// Only support camera scan type.
supportedScanTypes : [ Html5QrcodeScanType . SCAN_TYPE_CAMERA ]
} ;
let html5QrcodeScanner = new Html5QrcodeScanner (
"reader" , config , /* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ;Pour une analyse basée sur des fichiers uniquement, choisissez :
supportedScanTypes: [ Html5QrcodeScanType . SCAN_TYPE_FILE ]Pour prendre en charge les deux tels qu'ils sont aujourd'hui, vous pouvez ignorer ce champ ou le définir comme :
supportedScanTypes: [
Html5QrcodeScanType . SCAN_TYPE_CAMERA ,
Html5QrcodeScanType . SCAN_TYPE_FILE ]Pour définir l'analyse basée sur les fichiers par défaut, modifiez l'ordre :
supportedScanTypes: [
Html5QrcodeScanType . SCAN_TYPE_FILE ,
Html5QrcodeScanType . SCAN_TYPE_CAMERA ] showTorchButtonIfSupported - boolean | undefinedCeci n'est pris en charge que pour
Html5QrcodeScanner.
Si c'est true l'interface utilisateur rendue aura un bouton pour activer ou désactiver le flash en fonction de la prise en charge de l'appareil et du navigateur. La valeur est false par défaut.
Par défaut, le flux de la caméra et les fichiers image sont analysés par rapport à tous les formats de code pris en charge. Les classes Html5QrcodeScanner et Html5Qrcode peuvent être configurées pour prendre en charge uniquement un sous-ensemble de formats pris en charge. Les formats pris en charge sont définis dans l'énumération Html5QrcodeSupportedFormats.
enum Html5QrcodeSupportedFormats {
QR_CODE = 0 ,
AZTEC ,
CODABAR ,
CODE_39 ,
CODE_93 ,
CODE_128 ,
DATA_MATRIX ,
MAXICODE ,
ITF ,
EAN_13 ,
EAN_8 ,
PDF_417 ,
RSS_14 ,
RSS_EXPANDED ,
UPC_A ,
UPC_E ,
UPC_EAN_EXTENSION ,
}Je recommande de l'utiliser uniquement si vous devez omettre explicitement la prise en charge de certains formats ou si vous souhaitez réduire le nombre d'analyses effectuées par seconde pour des raisons de performances.
Html5Qrcode const html5QrCode = new Html5Qrcode (
"reader" , { formatsToSupport : [ Html5QrcodeSupportedFormats . QR_CODE ] } ) ;
const qrCodeSuccessCallback = ( decodedText , decodedResult ) => {
/* handle success */
} ;
const config = { fps : 10 , qrbox : { width : 250 , height : 250 } } ;
// If you want to prefer front camera
html5QrCode . start ( { facingMode : "user" } , config , qrCodeSuccessCallback ) ; Html5QrcodeScanner function onScanSuccess ( decodedText , decodedResult ) {
// Handle the scanned code as you like, for example:
console . log ( `Code matched = ${ decodedText } ` , decodedResult ) ;
}
const formatsToSupport = [
Html5QrcodeSupportedFormats . QR_CODE ,
Html5QrcodeSupportedFormats . UPC_A ,
Html5QrcodeSupportedFormats . UPC_E ,
Html5QrcodeSupportedFormats . UPC_EAN_EXTENSION ,
] ;
const html5QrcodeScanner = new Html5QrcodeScanner (
"reader" ,
{
fps : 10 ,
qrbox : { width : 250 , height : 250 } ,
formatsToSupport : formatsToSupport
} ,
/* verbose= */ false ) ;
html5QrcodeScanner . render ( onScanSuccess ) ; La bibliothèque prend désormais en charge certaines fonctionnalités expérimentales qui sont prises en charge dans la bibliothèque mais qui ne sont pas recommandées pour une utilisation en production, soit en raison des tests limités effectués, soit de la compatibilité limitée des API sous-jacentes utilisées. En savoir plus ici. Certaines fonctionnalités expérimentales incluent :
Les modifications de code ne doivent être apportées qu’à /src.
Exécutez npm install pour installer toutes les dépendances.
Exécutez npm run-script build pour créer une sortie JavaScript. La distribution JavaScript de sortie est construite sur /dist/html5-qrcode.min.js. Si vous développez sur le système d'exploitation Windows, exécutez npm run-script build-windows .
Essai
npm testEnvoyer une pull request
./src . Ne modifiez pas ./dist manuellement. @all-contributors please add @mebjas for this new feature or tests
Vous pouvez contribuer au projet de plusieurs manières :
Ce projet ne serait pas possible sans tous nos fantastiques contributeurs et sponsors. Si vous souhaitez soutenir la maintenance et l'entretien de ce projet, vous pouvez faire un don via les sponsors GitHub.
Parrainez le projet pour prioriser les demandes de fonctionnalités/bugs qui vous concernent . (Cela dépend de l'étendue de la demande et de la bande passante des contributeurs).
Aidez à encourager le développement de fonctionnalités et la correction de bugs en soutenant les objectifs de parrainage de ce projet. Voir la liste des demandes de fonctionnalités sponsorisées ici.
Un grand merci également aux organisations suivantes pour les parrainages non monétaires
Le décodeur utilisé pour la lecture du code QR provient de Zxing-js https://github.com/zxing-js/library
