Par Yoffo à 16h25 :
Bonjour. je suis William YOFFO, 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
Par Antoine à 14h35 :
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):
<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é');
}
Par Antoine à 15h05 :
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
Par Patrice à 15h16 :
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 !
Par Eloïse à 17h05 :
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.
Par Patrice à 17h45 :
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 :-)
Par Eloïse à 18h29 :
Merci beaucoup !
N'hésitez pas à me tenir au courant si vous avez des nouvelles.
Bonne soirée.
Par Joe à 16h29 :
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
Par Patrice à 19h53 :
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 ?
Par Joe à 00h05 :
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
Par Nicolas à 07h49 :
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.
Par Patrice à 11h17 :
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 https://webqr.com/, est-ce qu'il fonctionne sur votre iphone ?
Par Nicolas à 21h56 :
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) https://webqr.com/
Par contre, j'ai trouvé ce projet qui fonctionne bien sur iPhone https://webrtc.github.io/samples/src/content/getusermedia/gum/
Le tag video utilise des properties supplémentaires, qui n'existent pas sur webqr:
<video id="gum-local" autoplay playsinline></video>Par Patrice à 11h47 :
Bonjour Nicolas,
J'ai essayé d'ajouter les paramètres manquants :
https://blog.niap3d.com/jsQRScan/jsQRScan.1.1.js
Est-ce que vous pouvez tester ?
Par Nicolas à 16h03 :
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
<html>
<head>
<title>Instascan – 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>Par Patrice à 10h39 :
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.
Par Jordan à 17h35 :
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
Par Patrice à 10h21 :
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 ;-)
Par Jordan à 14h19 :
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
if(aId) var req = { video: {facingMode: {exact: aId}}, audio: false };qrVideo.src = window.URL.createObjectURL(stream);navigator.mediaDevices.getUserMedia(req)
.then(function(){
qrStream = stream;
qrVideo.srcObject = stream;
qrVideo.play();
})
.catch(function(err){
console.log("Error mediaDevices : " + err);
});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 };try {
qrVideo.srcObject = stream;
} catch (error) {
qrVideo.src = window.URL.createObjectURL(stream);
}navigator.mediaDevices.getUserMedia(req, function(stream){
qrStream = stream;
qrVideo.srcObject = stream;
qrVideo.play();
}, function(err){
console.log("Error mediaDevices : " + err);
});<!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>Par fitz35 à 17h11 :
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 ?
Par Patrice à 10h43 :
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.
Par fitz35 à 14h09 :
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.
Par Bannie95 à 11h21 :
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
Par Patrice à 14h44 :
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 :
https://webqr.com/
Par Butter à 16h05 :
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 ?
Par Patrice à 19h35 :
Bonsoir Butter,
Je suis surpris que le code fonctionne encore.
Vous avez un exemple en ligne ?
Par Butter à 02h07 :
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 ...
Par evariste à 23h08 :
Salut Patrice comment faire pour afficher le contenue du Qr code ?
Par evariste à 23h09 :
Salut Patrice comment faire pour afficher le contenue du Qr code ?