Neste artigo você conhecerá uma excelente alternativa para aplicações javascript possam realizar a leitura de códigos de barras.
Normalmente para fazermos um app como este, é necessário gerar um app nativo ou hibrido para Android ou iOS para poder ter acesso a recursos como câmera. Porém, hoje vou ta mostrando algo um pouco diferente, você poderá gerar um aplicativo web, e ainda assim conseguir ter acesso a câmera do celular e realizar a leitura do código de barras.
Para isso iremos utilizar uma biblioteca chamda QuaggaJs junto com o Quasar Framework, que é um framework baseado em Vue.js.
A biblioteca QuaggaJS focada em leitura de códigos de barras
O QuaggaJS é um scanner de código de barras escrito inteiramente em JavaScript que suporta localização em tempo real e decodificação de vários tipos de códigos de barras como EAN, CÓDIGO 128, CÓDIGO 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CÓDIGO 93 e CÓDIGO DE BARRAS.
A biblioteca também é capaz de usargetUserMediapara obter acesso direto ao fluxo da câmera do usuário. Embora o código dependa de um pesado processamento de imagem, mesmo os smartphones mais simples são capazes de localizar e decodificar códigos de barras em tempo real.
Suporte de navegadores
O Quagga faz uso de muitas APIs modernas da Web que ainda não são implementadas por todos os navegadores. Existem dois modos nos quais o Quagga opera:
1. Analisando imagens estáticas e
2. Usando uma câmera para decodificar as imagens de uma transmissão ao vivo.
Este último requer a presença da API MediaDevices. Você pode visualizar a compatibilidade com os navegadores neste link.
Criando o projeto com Quasar Framework
O primeiro passo, é saber se nosso ambiente já está configurado. Os requisitos necessários são:
- Node >=8 e NPM >=5
- Quasar CLI
Agora vamos criar nosso projeto com Quasar CLI, executando o seguinte comando no seu cmd favorito:
$ quasar create quasar-barcode-readerApós selecionar as opções desejadas no projeto e finalizar a criação do projeto e faça a instalação do Quagga via npm:
$ npm install quagga --saveAgora vamos levantar nosso ambiente de desenvolvimento usando o comando:
$ quasar devCriando e configurando o Leitor de código
No diretório src/pages vamos alterar nosso código do arquivo Index.vue para:
<template>
<div class="row items-center" style="height: 100vh">
<div class="col text-center q-pa-sm ">
<q-btn color="primary" icon="camera_alt" label="Ler Código de Barras"
class="full-width" size="lg" @click="iniciarLeitor()"
v-show="cameraStatus === 0"/>
<div class="text-h6" v-if="code">Codigo: {{ code }}</div>
<div id="scan" v-show="cameraStatus === 1"></div>
<q-page-sticky position="bottom-right" :offset="[18, 18]">
<q-btn icon="cancel" color="negative" label="Fechar" v-show="cameraStatus === 1"
@click="onStop" />
</q-page-sticky>
</div>
</div>
</template>
<script>
import Quagga from 'quagga'
export default {
name: 'Leitor',
data () {
return {
code: '',
dialog: false,
cameraStatus: 0
}
},
methods: {
iniciarLeitor () {
this.cameraStatus = 1
Quagga.init({
inputStream: {
name: 'Live',
type: 'LiveStream',
// constraints: {
// width: 300,
// height: 300
// },
target: document.querySelector('#scan')
},
frequency: 10,
decoder: {
readers: [
'ean_reader'
],
multiple: false
}
// numOfWorkers: navigator.hardwareConcurrency,
// locate: false
}, (err) => {
if (err) {
console.log(err)
return
}
console.log('Initialization finished. Ready to start')
Quagga.start()
Quagga.onDetected(this.onDetected)
})
},
onDetected (data) {
this.code = data.codeResult.code
this.cameraStatus = 0
this.onStop()
},
onStop () {
Quagga.stop()
this.cameraStatus = 0
}
}
}
</script>
<style>
video {
width: 100%;
height: auto;
}
canvas {
display: none;
}
</style>
Observe o método iniciarLeitor() que é disparado ao clicar no botão, ele dispara o Quagga.init() onde passamos vários parâmetros de configuração. Para entender a necessidade de cada parâmetro, basta ler a documentação do Quagga neste link.
O parâmetro decoder: { readers: ‘ean_reader’ } serve para configura o tipo de código que será lido. Optei pelo ear_reader, pois posso efetuar a leitura dos códigos de produtos que compramos no supermercado.
Nossa aplicação ficará da seguinte forma:
Ao realizar a leitura do código, será exibido:
E leitura nem sempre é exata. Por exemplo, na webcam de meu notebook aconteceu erros de leituras dependendo do tamanho do código de barras do produto e do material da embalagem(plástico tem um pouco de reflexão da luz, prejudicando a leitura).
No celular só é possível realizar a leitura se sua aplicação estiver num domínio https, pois para acessar a câmera dos dispositivo o https é exigido.
Update
Fiz um vídeo explicando passo a passo de como integrar o QuaggaJs com Vue 3 e Quasar Framework em meu canal do youtube. Confira:
Também fiz um vídeo mostrando como realizar a leitura de QRCodes utilizando uma lib para Vue 3 também. Confira:
Conclusão
O QuaggaJS sem dúvidas é uma biblioteca bem interessante, pois permite realizar a leitura de código de barras com aplicativos web como SPA, PWA já que é construída com Javascript.
A precisão da leitura não é 100%, mas é possível realizar configurações para que alcance o melhor resultado possível. Isso também vai depender da resolução da câmera.
Deixei uma aplicação SPA DEMO no endereço: https://quasar-barcode-reader.surge.sh.
E o código base para você fazer sua aplicação, no Github neste link: https://github.com/patrickmonteiro/quasar-barcode-reader.
Espero que este artigo e o projeto ajude você em seus projetos, até breve!
Referências:
Documentação QuaggaJS: https://serratus.github.io/quaggaJS/
Documentação Quasar Framework: https://quasar.dev
