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.

Ajouter votre commentaire

Votre adresse ne sera pas affichée.

Elle sert à vous envoyer une notification.

 

Image Viewer