Como utilizar a biblioteca QuaggaJS para leitura de códigos de barras

Olá,

Semana passada recebi a missão de realizar a leitura de códigos de barras pelo LATROMI, então logo pensei a biblioteca instascan que geralmente é utilizada para realizar esse trabalho na plataforma.

Criei um formulário com ajuda de um tutorial da comunidade, porém, não consegui ler o código de barras com a biblioteca instascan
Capturar

Fiz o teste com o mesmo código de barras, porém, com a biblioteca QuaggaJS e consegui realizar a leitura do código de barras online, no site da biblioteca.

  1. Para utilizar a biblioteca QuaggaJS no LATROMI exportei a biblioteca para o servidor

    Capturar1

  2. Criei um arquivo chamado initQuaggaJS que basicamente serviria para iniciar a utilização da biblioteca.

    Quagga.init({
        inputStream: {
            name: "Live",
            type: "LiveStream",
            target: document.querySelector('#preview')
        },
        decoder: {
            readers: ["code_128_reader"]
        }
    }, function (err) {
        if (err) {
            console.log(err);
            return
        }
        console.log("Initialization finished. Ready to start");
        Quagga.start();
    });
    Quagga.onDetected(function (data) {
        console.log(data);
    });
    
  3. E para mostrar as imagem da câmera criei um objeto HTMLElement com o código HTML dentro para ser identificado pelo initQuaggaJS.

    <!--<video id="preview" style="width:100%;height:100%"></video> -->
    <div id="preview" style="width:100%;height:100%"></div>
    

As leituras deveriam sair no console, mas isso não esta acontecendo.

Alguém tem alguma ideia de como eu poderia utilizar a biblioteca?

Olá @Framos!

Acho que o problema é que você está iniciando a biblioteca Quagga antes do Formulário Dinâmico estar completamente carregado.

Modifique o JavaScript e coloque o código de inicialização do Quagga como callback do “evento” FormCreated, dessa forma:

latromi.formManager.setOnFormCreatedCallback( function(args) {
	// Coloque o código "Quagga.init" aqui
});

Se ainda assim não funcionar, tente fazer a leitura usando um computador, com a aba console do navegador aberta para ver se ocorre algum erro.

1 Curtida

Olá @daniel.giacomelli , muito obrigado por ajudar, funcionou perfeitamente.

1 Curtida

@Framos, tentamos implementar este exemplo do Quagga, mas encontramos um probleminha.

O elemento target não pode ser um video, mas sim um container para o elemento video.

Trocamos para um elemento div e funcionou. Alterei o código no tua postagem original.

OK, obrigado @daniel.giacomelli.