Image de l'article jsQRScan, scanner un code QR en Javascript

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

#1

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

#2

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é');
}

#3

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

#4

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 !

#5

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.

#6

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 :-)

#7

Par Eloïse à 18h29 :

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

Bonne soirée.

#8

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

#9

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 ?

#10

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

#11

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.

#12

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 ?

#13

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>



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
https://github.com/webrtc/samples/issues/929

#14

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 ?

#15

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 &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>

#16

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.

#17

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

#18

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 ;-)

#19

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);
});


par respectivement :
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);
});


Coté HTML voici le 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>


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 ;)

Ajouter votre commentaire

Votre adresse ne sera pas affichée.

Elle sert à vous envoyer une notification.

 

Image Viewer