Commentaires sur l'article jsQRScan, scanner un code QR en Javascript

Bonjour. je suis [b]William YOFFO[/b], ivoirien de nationalité. Dévellopeur, je Boss en ce moment sur un projet qui fait intervenir le scan de qr code, vue que l'application est web, je fait des recherches dans ce sens. c'est ainsi que mes recherches m'ont conduit jusqu'ici ( https://blog.niap3d.com/.../4,10,news-76-jsQRScan-scanner... )
pourrai-je avoir davantage d'aide concernant la mise en oeuvre d'un telle fonctionnalité? merci d'avance

Bonjour, je trouve la librairie très sympathique et c'est très sympa de votre part de la partager, mais malgré le fait que le rendu de la caméra s'affiche bien, je n'arrive pas à détecter de QR code.
Voici mon code (il y a peut être une erreur):
[code]
<div id="camera"></div>
<style>
#camera{
position:relative;
margin: 100px auto auto auto;
width:200px;
height:200px;
box-shadow: 0px 0px 3px 2px inset black;
}
canvas{
display:none;
}
</style>
<script src="qr.js"></script>
<script>
scanner = new jsQRScan({
'id': 'camera',
'width': 200,
'height': 200,
'callbackSuccess': show,
'callbackEnd': error,
'scanInterval': 1000
});
function show(){
alert('trouvé');
}
function error(){
alert('pas trouvé');
}
[/code]

J'ai finalement réussi, je pense que ça ne marchait pas car j'avait du mal à stabiliser le qrcode. En diminuant le scanInterval, ça marche beaucoup mieux.
Merci pour cet article

Bonjour Antoine,

Désolé, j'ai complètement oublié de vous répondre ;-(
Bien content que vous ayez pu résoudre votre problème.
Bon scan !

Bonjour,

Je tente ma chance pour une petite question.
Merci pour le code. Ça fonctionne très bien, c'est facile.
Seul soucis c'est que j'utilise des Halftone QrCode ( http://jsfiddle.net/lachlan/r8qWV/ ) et ceux-ci ne sont pas reconnus alors qu'un QrCode normal oui.
Je me demande à quoi cela peut-il être du? Je recherche encore mais si jamais vous avec des pistes cela m'aiderait.
Merci d'avance.

Bonsoir Eloïse,

Je pense que la librairie ne gère pas ce format. Je vas envoyer un mail au developpeur de cette librairie pour savoir s'il a une idée.

Merci pour le retour :-)

Merci beaucoup !
N'hésitez pas à me tenir au courant si vous avez des nouvelles.

Bonne soirée.

Bonjour Patrice,
je vous remercie pour votre code qui est très utile.

Ca marche très bien avec un serveur en local (code sur mon mac), mais dès que je l'utilise avec un serveur externe (code sur un synolgy) il ne voit pas ma camera sur le mac !
Comment lui dire qu'il faut rechercher la camera sur le mac et pas sur l'appareil sur lequel il y a le code ?
Merci si vous pouvez répondre à cette question.
Cordialement,
Joe

Bonsoir Joe,

C'est surprenant.
Le serveur se content d'héberger les fichiers html et javascript où il joue le rôle de moteur ?

Mon synology n'a pas de certificat de sécurité et le site web est en http et pas https, donc il est possible que chrome ne permette pas au serveur d'identifier la caméra. J'ai résolu cela en migrant mon code depuis synology vers un hébergeur.

Merci pour votre réaction.
Belle soirée

Bonjour et merci pour ce projet. Il fonctionne bien depuis mon PC Windows. Par contre impossible de le faire fonctionner sur iPhone (iPhone 7 avec IOS 11.3 et safari). Même en acceptant l'utilisation de la caméra par le navigateur, l'image vue par la caméra n'est pas visible dans le navigateur, donc impossible de scanner le QR COde. Est-ce un problème connu? Merci d'avance.

Bonjour Nicolas,

Je n'ai malheureusement pas d'iPhone pour tester.
Mais est-ce que la petite démo en bas de page sur l'actu fonctionne ?

Et ce lien [url]https://webqr.com/[/url], est-ce qu'il fonctionne sur votre iphone ?

Bonjour Patrice et merci pour la réponse.

En effet le problème est le même avec ce projet, il ne fonctionne pas sur iPhone (iOS 11) [url]https://webqr.com/[/url]

Par contre, j'ai trouvé ce projet qui fonctionne bien sur iPhone [url]https://webrtc.github.io/samples/src/content/getusermedia/gum/[/url]

Le tag video utilise des properties supplémentaires, qui n'existent pas sur webqr:
[code]<video id="gum-local" autoplay playsinline></video>[/code]


Details:
getUserMedia() does not start unless some additional properties are added to the <video> tag: playsinline and autoplay, and controls="true".
Details are being tracked in
[url]https://github.com/webrtc/samples/issues/929[/url]

Bonjour Nicolas,

J'ai essayé d'ajouter les paramètres manquants :

[url]https://blog.niap3d.com/jsQRScan/jsQRScan.1.1.js[/url]

Est-ce que vous pouvez tester ?

Merci Patrice,

jsQRScan ne fonctionne toujours pas avec iOS.
Mais je viens de trouver un autre projet, instascan, que j'ai réussi à faire fonctionner sur iOS

[code]<html>
<head>
<title>Instascan &ndash; Demo</title>
<link rel="icon" type="image/png" href="https://schmich.github.io/instascan/favicon.png">
<link rel="stylesheet" href="https://schmich.github.io/instascan/style.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
</head>
<body>
<a href="https://github.com/schmich/instascan"><img style="position: absolute; top: 0; right: 0; border: 0; z-index: 1" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<div id="app">
<div class="sidebar">
<section class="cameras">
<h2>Cameras</h2>
<ul>
<li v-if="cameras.length === 0" class="empty">No cameras found</li>
<li v-for="camera in cameras">
<span v-if="camera.id == activeCameraId" :title="formatName(camera.name)" class="active">{{ formatName(camera.name) }}</span>
<span v-if="camera.id != activeCameraId" :title="formatName(camera.name)">
<a @click.stop="selectCamera(camera)">{{ formatName(camera.name) }}</a>
</span>
</li>
</ul>
</section>
<section class="scans">
<h2>Scans</h2>
<ul v-if="scans.length === 0">
<li class="empty">No scans yet</li>
</ul>
<transition-group name="scans" tag="ul">
<li v-for="scan in scans" :key="scan.date" :title="scan.content">{{ scan.content }}</li>
</transition-group>
</section>
</div>
<div class="preview-container">
<video id="preview" autoplay playsinline></video>
</div>
</div>
<script type="text/javascript" src="https://schmich.github.io/instascan/app.js"></script>
</body>
</html>[/code]

Merci pour l'info Nicolas.

Est-ce que les tags manquants ont été ajoutés ?
Ou est-ce qu'il y a une autre erreur ?
Difficile de tester sans un appareil dans les mains.

Bonjour Patrice,

Je viens de tester le v1.1 de votre code sur un iphone iOS 12 et malheureusement cela ne fonctionne pas quelque soit le navigateur ...

A ce jour je ne trouve que très peu de projet qui fonctionne avec getUserMedia et iOS ...

Pourtant l'affichage bête et méchant de la caméra fonctionne bien ...

Auriez vous une idée ?

Bonne journée,

Jordan

J'ai vu récemment que Safari ne comprenait pas les promesses then. Je ne sais pas si c'est le cas dans iOS 12, mais ça vaudrait le coup d'essayer.

Par exemple dans la fonction VideoInputChange changer :
navigator.mediaDevices.getUserMedia(req)
.then(function(){
qrStream = stream;
qrVideo.srcObject = stream;
qrVideo.play();
})
.catch(function(err){
console.log("Error mediaDevices : " + err);
});

Par

navigator.mediaDevices.getUserMedia(req, function(stream){
qrStream = stream;
qrVideo.srcObject = stream;
qrVideo.play();
}, function(err){
console.log("Error mediaDevices : " + err);
});



À déboguer et à tester ;-)

Bonjour Patrice et merci beaucoup pour cette réponse très rapide !

Tout d'abord la fonction modifiée à aidé mais n'apporte pas la solution complète ...

Du coup j'ai un peux cherché et je suis arrivé à quelque chose de pas trop mal qui fonctionne même si il y a surement des amélioration à faire.

Dans la version 1.1 de jsQRScan :
Fonction VideoInputChange remplacer les éléments suivant
[code]if(aId) var req = { video: {facingMode: {exact: aId}}, audio: false };[/code]
[code]qrVideo.src = window.URL.createObjectURL(stream);[/code]
[code]navigator.mediaDevices.getUserMedia(req)
.then(function(){
qrStream = stream;
qrVideo.srcObject = stream;
qrVideo.play();
})
.catch(function(err){
console.log("Error mediaDevices : " + err);
});[/code]

par respectivement :
[code]if(aId == "iPhoneEnv") var req = { audio: false, video: { facingMode: { exact: "environment" } } };
else if(aId == "iPhoneUser") var req = { audio: false, video: { facingMode: { exact: "User" } } };
else if(Number.isInteger(aId)) var req = { video: {facingMode: {exact: aId}}, audio: false };[/code]
[code]try {
qrVideo.srcObject = stream;
} catch (error) {
qrVideo.src = window.URL.createObjectURL(stream);
}[/code]
[code]navigator.mediaDevices.getUserMedia(req, function(stream){
qrStream = stream;
qrVideo.srcObject = stream;
qrVideo.play();
}, function(err){
console.log("Error mediaDevices : " + err);
});[/code]

Coté HTML voici le code :
[code]<!DOCTYPE html>
<html lang="fr">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#video canvas
{
display: none;
}
#video video
{
max-width: 300px;
width: 300px;
height: auto;
}
</style>
</head>
<body>
<div id="video" style="display:block;"></div>
<script src="./js/jsQRScan.1.1.js" type="text/javascript"></script>
<script>
scanner = new jsQRScan({
'id': 'video',
/*'width': 290,
'height': "auto",*/
'streamId': "iPhoneEnv",
'callbackSuccess': success,
'callbackEnd': error,
'scanMaxDuration': 20000,
'scanInterval': 100
});
function success(callback)
{
alert(callback);
}
function error()
{
alert("rien n'est trouvé");
}
</script>
</body>
</html>[/code]

Deux principaux changement à l'utilisation.

1- l'ajout de deux type de streamId, "iPhoneEnv" et "iPhoneUser" qui permettent d'utiliser respectivement la caméra arrière et avant de l'iPhone. (Attention par défaut en utilisant streamId = 0, c'est la caméra utilisateur qui est utilisée. Pareil si on ne la renseigne pas.

2- Ajout d'un peux de CSS afin d'avoir une video sans "bordure" à voir si on peu gérer le width et height en auto dans le javascript. Je n'ai pas cherché à tout modifier ...

Pour ma pars dans l'état actuel j'obtient systématiquement une alert avec la valeur de mon qrCode.

Pour info j'ai fais mes tests avec un iPhone XS Max ...

Encore un grand merci ;)

L'image ne s'affiche pas, que ce soit sur mon ordi portable ou mon téléphone. Il ne détecte pas non plus le qr code quand je l'approche. Les navigateurs utilisés prennent bien en charges getUserMedia. De plus, le lien de lazarSoft, lui, fonctionne très bien. Avez-vous une idée de pourquoi ?

Bonjour fitz35,

Désolé je ne sais pas d'où vient le problème. Je n'ai pas poursuivi le développement du QR Code, maintenant que Chrome intègre un lecteur de QR Code.

Bonjour Patrice,

merci de votre réponse, je ne pensait pas en recevoir... Je suis étudiant et je réalise un projet nécessitant un détecteur de qr code. Je me suis débrouillé avec le code de lazarloft.

Bonjour,

J'ai essayé la démo de la librairie de votre site sur Chrome et Firefox sur plusieurs appareils sous Android (en activant les Fonctionnalités expérimentales de la plate-forme Web pour Chrome) mais cela ne fonctionne pas.
Firefox : v 68.9.0
Chrome : v 83.0.4103.83 et v 83.0.4103.101
J'ai vérifié, ces navigateurs sont pourtant compatibles avec getUserMedia.

Avez-vous une idée ? Cette fonctionnalité web me plairait beaucoup, et mon application devra tourner sur ce genre d'environnement.

Merci de votre réponse !

Bien cordialement,
Bannie95

Bonjour Bannie95,

Je n'ai pas continué le développement de ce bout de code. Je l'avais fait en espérant en faire quelque chose par la suite, mais finalement ça n'a pas jamais été le cas.

Mais vous pouvez regardez sur le site qui m'a servit de base :
[url]https://webqr.com/[/url]

Bonjour, merci beaucoup pour ce code il marche à merveille ! J'ai modifié la fonction show à la fin pour afficher le contenu du code QR dans le "alert()", mais là j'aimerais afficher le contenu directement sur un champ (input) que j'ai dans ma page.
Le souci est que même après des recherches je ne trouve pas comment faire et si j'essaie de toucher le alert() du code le lecteur ne marche plus ...
Pourriez-vous m'aider ?

Bonsoir Butter,

Je suis surpris que le code fonctionne encore.

Vous avez un exemple en ligne ?

Sii il marche toujours bien ! Pour un projet à la fac je compte l'utiliser pour contrôler l'accès à un wifi à travers un portail captif, j'aimerai qu'après le scan du code QR le user et password soient collés directement vers leurs 2 champs respectifs, pour que ce soit plus simple je créerai des utilisateurs ayant le même nom et mdp, je ne sais même pas si c'est faisable car j'y ait juste pensé car pour moi c'est logique au lieu d'afficher dans une fenetre j'enverrai vers un input, mais après plusieurs tentatives je ne trouve pas la bonne méthode ...

Salut Patrice comment faire pour afficher le contenue du Qr code ?

Salut Patrice comment faire pour afficher le contenue du Qr code ?