| Data de elaboração | 18/10/21 |
| Responsável pelo estudo | Diego Gonçalves de Almeida (Assessor) |
| Equipe do estudo | Esquadrão Suicida |
| Alvo | e-Estado - Inventário |
| Origem | Implementação: Definir melhor forma para implementar leitura de Qr-code com javascript. |
| Objetivo | Realizar estudo de viabilidade técnica de implementação de uso do QR Code no processo de inventário de bens móveis em e-Patrimônio. Definir a melhor abordagem para implementação de leitura de Qr-code em aplicações javascript. |
| Documentação correlata (opcional) | https://www.npmjs.com/package/react-qr-reader - https://github.com/cozmo/jsQR - https://www.npmjs.com/package/qr-scanner |
| Observações | Não possui. |
Glossário
Definir a melhor abordagem para implementação de leitura de Qr-code em aplicações javascript. Permitir a interação com o sistema atras de leituras de Qr-codes, reduzindo a necessidade de digitação e melhorando o uso de sistemas em dispositivos moveis.
A biblioteca ‘react-qr-reader’ fornece um componente pronto para utilização em aplicações react, ela tem com dependência (core) a jsQR (https://github.com/cozmo/jsQR), uma biblioteca que realiza a conversão da imagem com o qr-code para o dado esperado.
Apesar da react-qr-reader não receber atualizações a muito tempo ela se mostrou uma opção viável em aplicações React pois o core da biblioteca se mantem atualizado.
import React, { Component } from ‘react’
import QrReader from ‘react-qr-reader’const Scanner = () => {
const [result, setResult] = React.useState(‘’)const handleScan = data => {
if (data) {
setResult(data)
}
}const handleError = err => { console.error(err) } return ( <div> <QrReader delay={300} onError={handleError} onScan={handleScan} style={{ width: '100%' }} /> <p>{result}</p> </div> )}
Apesar da abordagem mais ‘low level’ a biblioteca se mostrou muito boa, utiliza também o jsQR como engine de decodificação de qr-code e também WebWorkers, o que torna a leitura muito fluida. Ela e agnóstica a frameworks, permitindo assim a implementação em diversas especies de aplicações front end, seja usando algum framework ou implementações utilizando apenas HTML e Javascript.
Exemplo utilizando ReactJS:
import { useEffect, useRef } from «react»;
import QrScanner from «qr-scanner»;
import QrWorker from «!!file-loader!../node_modules/qr-scanner/qr-scanner-worker.min.js»;import «./modal.css»;
QrScanner.WORKER_PATH = QrWorker;
export const Modal = ({ onRead, onClose }) => {
const videRef = useRef(null);
const selectRef = useRef(null);useEffect(() => {
console.log(«montando qrscanner»);
const scanner = new QrScanner(
videRef.current,
(result) => {
console.log(result);
onRead(result);
onClose();
return scanner.stop();
},
(err) => {
console.log(err);
},
(video) => {},
);scanner.start().then(() => { QrScanner.listCameras(true).then((cameras) => cameras.forEach((camera) => { const option = document.createElement("option"); option.value = camera.id; option.text = camera.label; selectRef.current?.add(option); }), ); }); return () => { scanner.stop(); console.log("desmontando qrscanner"); };}, []);
return (
< div className=«modal» onClick={onClose}>
< div>
< video ref={videRef}>
< select ref={selectRef}>
< /div>
< /div>
);
};
Ambas as bibliotecas estudadas trouxeram resultados satisfatórios:
melhor em aplicações react pois e de fácil implementação;
utilizar em aplicações que utilizam javascript puro em seu front end;
[1] REACT-QR-READER. Disponível em: https://www.npmjs.com/package/react-qr-reader. Acesso em: 31 ago. 2021.
https://documentos.sistemas.ro.gov.br/link/1285#bkmrk-[2]-qr-scanner.-disp
[2] QR-SCANNER. Disponível em: https://www.npmjs.com/package/qr-scanner. Acesso em: 31 ago. 2021.