Angular2 + balayage de code QR à partir de navigateurs mobiles

Question

Je fais des recherches sur les moyens disponibles de numériser un code QR en utilisant les navigateurs sur Android, iOS et éventuellement Windows Phone. La solution idéale serait d'avoir une seule application réactive Angular2 + qui fonctionnerait à la fois sur un écran d'ordinateur mobile et de taille normale. L'application entière est censée être une sorte d'inventaire basé sur des autocollants de code QR identifiant les articles.

J'ai trouvé un joli composant https://github.com/goergch/angular2-qrscanner mais il ne fonctionne pas vraiment sur les navigateurs que j'ai sur mon téléphone (Firefox, Chrome, HTC Browser, Dolphin). Et malheureusement, il n'y a aucune information si les navigateurs mobiles sont pris en charge.

Est-ce que quelqu'un connaît une bibliothèque/un composant que je pourrais tester à cette fin? Ou devrais-je l'oublier et juste construire le système avec Ionic (ou peut-être NativeScript) et compiler des applications natives?

Merci d'avance pour toutes vos suggestions.

Answer 1

Je viens de travailler pour Android après 2 jours de débogage. Tout d'abord, il doit fonctionner sur SSL pour pouvoir accéder à la caméra de votre client (c'est désormais une exigence dans les dernières versions de Chrome et FF sur Android). Mais pour l'essentiel, le problème avec Android est lié aux dimensions de la toile utilisée pour générer une image à partir du flux vidéo de la caméra. Les valeurs que vous transmettez ont été réellement utilisées pour l'élément vidéo que vous voyez sur votre appareil. Cependant, il s'agit d'un élément de canevas masqué utilisé pour générer une image à partir du flux vidéo, puis analyser un code QR valide. Sur les appareils mobiles, cet élément de la toile était gonflé à des dimensions énormes, sans tenir compte de ce que vous transmettez au composant. Ainsi, un scan utilisant les dimensions passées ne balayerait qu'une infime partie de l'image rendue dans la toile géante.

Le correctif consiste à s'assurer que vous transmettez les valeurs du modèle de composant pouvant être affichées sur l'écran d'un smartphone, par exemple 320 x 480. Ensuite, dans votre fichier css de composant, forcez cette restriction sur l'élément canvas.

Donc, vous devriez avoir modèle de composant quelque chose comme ce qui suit: ...

<qr-scanner 
(onRead)="captureScan($event)" 
facing="environment" 
[mirror]="true" 
[stopAfterScan]="true" 
[updateTime]="1000" 
[canvasWidth]="320" 
[canvasHeight]="480" 
></qr-scanner> 

...

Et dans votre fichier css: ...

canvas { 
    width: 320px !important; 
    height: 480px !important; 
} 

..

Ce correctif fonctionne maintenant sur Chrome & FF sur android.