Descrizione
Ho creato un componente per fare lo scan di un QR code, in modo che una webapp possa scannerizzare in modo semplice un QR code senza usare la shell nativa.
Trascinando la client library su un campo di pannello fa sì che quello diventi un bottone che apre la webcam. Sul cellulare funziona purché la app sia in https oppure la scansione non si avvia.
Elenco funzionalità
Scansione di un QR Code con webcam.
il valore letto viene impostato come valore del campo e pure inviato come idMap nell’evento del componente QrCodeAcquired.
Come complessità è simile al RangeSlider degli esempi.
Componenti esterne
Utilizza html5-qrcode versione 2.3.8, componente salvato nella custom.
=====
Per fare un preventivo dovevo essere certo di poter acquisire un QRCode da webapp e quindi ho fatto un rapido prototipo e poi l’ho un po’ rifinito e già che è utile ho deciso di condividerlo.
Lo trovate nel teamworks di community come “Qr Code Scanner Community”.
Spero sia utile, ciao!
7 Mi Piace
Utilissimo!
Grazie, stavo giusto cercando di farlo anche io ma avevo problemi con zxing-js, quagga e le API native del browser (sembra sia supportato solo su webview).
A me serve lato InDe Cloud (sempre webapp online), ma penso non sia troppo diversa l’implementazione.
Ti faccio sapere se riesco ad usarlo con successo
1 Mi Piace
Ho appena aggiornato il componente. Ora l’ho fatto più developer friendly: basta esportare il componente ed importarlo in un progetto dove si vuole fare un qr code scan.
C’è solo un metodo scanQrCode, se gli si passa un IdForm, manderà il SendMessage al form, altrimenti manda un appMessage.
È davvero molto più facile rispetto alla versione caricata ieri ed è più simile a come andrebbe fatto un componente Foundation (di fatto ora è come usare la shell mobile nativa per acquisire un QrCode).
invece di restiture solo il valore scannerizzato, restituisce un oggetto che ha proprietà diverse:
- value (il valore scansito)
- cameraResolution (se esempio 800x600)
- format (QR_CODE, datamatrix, …)
- CameraFacing (“user” se si sta usando la camera del telefono puntata verso l’utente oppure l’altro valore, che mi sfugge, se si usa una camera “bella”, il componente che uso comunque sceglie da solo quale camera attivare, di solito le belle e usa “user” per fallback)
- timestamp
Spero sia utile, ciao!
2 Mi Piace