0

Como criar uma aplicação WEB para leitura de códigos de barra

PATRICK MONTEIRO
PATRICK MONTEIRO

Olá pessoal! Hoje estarei mostrando para vocês como criar um aplicativo que realiza a leitura de diferentes tipos de códigos de barra somente com javascript!

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.


A biblioteca QuaggaJS

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 EANCÓDIGO 128CÓDIGO 39EAN 8UPC-AUPC-CI2of52of5CÓ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

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


Como muitos já sabem gosto de criar aplicações web com o framework Quasar que é baseado no Vue.js.

O primeiro passo, é saber se nosso ambiente já está configurado. Os requisitos necessários são:

Agora vamos criar nosso projeto com Quasar CLI, executando o seguinte comando no seu cmd favorito:


$ quasar create quasar-barcode-reader


Apó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 --save


Agora vamos levantar nosso ambiente de desenvolvimento usando o comando:


$ quasar dev


Criando 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',
          target: document.querySelector('#scan')
        },
        frequency: 10,
        decoder: {
          readers: [
            'ean_reader'
          ],
          multiple: 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.

Conclusã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!

0
0

Comentários (0)

None

Brasil