Dúvida/problema ao scanear QR Code com javascript e exibir o resultado no input

Stack Overflow em Português Asked on December 2, 2021

Estou tentando fazer com que o QR code ao ser scaneado ele imprima o valor dele no input, mas não estou conseguindo, utilizei algumas funções que eu conheço mas o qr code não é impresso no input de nenhuma forma, sou novato nisso.

<!DOCTYPE html>
<html>
  <head>
    <title>Instascan</title>
    <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js" ></script> 
  </head>
  <body>
  
    <video id="preview"></video>
    
    <script>
        let scanner = new Instascan.Scanner(
            {
                video: document.getElementById('preview')
            }
        );
        scanner.addListener('scan', function(content) {
            alert('Escaneou o conteudo: ' + content);
        });
        Instascan.Camera.getCameras().then(cameras => 
        {
            if(cameras.length > 0){
                scanner.start(cameras[0]);
            } else {
                console.error("Não existe câmera no dispositivo!");
            }
        });
        
        var opa = "teste"
    </script>
    
    <input type="text" id="myText" value=""> </input>   
    <p><button onclick="myFunction()" id="meuElemento">QR CODE</button></p>

    <script>
    
    var botao = document.getElementById("meuElemento");

    botao.onclick = function myFunction() {
      document.getElementById("myText").value = content; 
    }



    // alerta de presença cadastrada
    function myFunction2() {
      alert("Presença Cadastrada!");
    }
    </script>
    
 </body>
</html>

html javascript

2 Answers

Para quem estava com a mesma duvida consegui descobrir uma solução, onde era bem simples, segue o código abaixo do QR Code sendo reconhecido e logo após o valor sendo exibido no input.

<!DOCTYPE html>
<html>
  <head>
    <title>Instascan</title>
    <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js" ></script> 
  </head>
  <body>
    <video id="preview"></video>
<script type="text/javascript">
      let scanner = new Instascan.Scanner({ video: document.getElementById('preview') });
      scanner.addListener('scan', function (content) {
        document.getElementById("yourInputFieldId").value = content; // Pass the scanned content value to an input field
      });
      Instascan.Camera.getCameras().then(function (cameras) {
        if (cameras.length > 0) {
          scanner.start(cameras[0]);
        } else {
          console.error('No cameras found.');
        }
      }).catch(function (e) {
        console.error(e);
      });
    </script>
<input type='text' id='yourInputFieldId' />

 </body>
</html>

Answered by André Cabral on December 2, 2021

Utilizo também o Instascan com o mesmo objetivo. Dentro do método addListener, no lugar ou até junto do alert, utilize o seguinte, substituindo o "id_campo_de_envio" pelo id do elemento que receberá o dado de leitura:

$("#id_campo_de_envio").trigger("click");

Seu código ficaria assim (substitua o id para funcionar!!!):

<!DOCTYPE html>
<html>
  <head>
    <title>Instascan</title>
    <script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js" ></script> 
  </head>
  <body>
  
    <video id="preview"></video>
    
    <script>
        let scanner = new Instascan.Scanner(
            {
                video: document.getElementById('preview')
            }
        );
        scanner.addListener('scan', function(content) {
            $("#id_campo_de_envio").trigger("click");
        });
        Instascan.Camera.getCameras().then(cameras => 
        {
            if(cameras.length > 0){
                scanner.start(cameras[0]);
            } else {
                console.error("Não existe câmera no dispositivo!");
            }
        });
        
        var opa = "teste"
    </script>
    
    <input type="text" id="myText" value=""> </input>   
    <p><button onclick="myFunction()" id="meuElemento">QR CODE</button></p>

    <script>
    
    var botao = document.getElementById("meuElemento");

    botao.onclick = function myFunction() {
      document.getElementById("myText").value = content; 
    }



    // alerta de presença cadastrada
    function myFunction2() {
      alert("Presença Cadastrada!");
    }
    </script>
    
 </body>
</html>

O ".trigger("click")" executará o vulgo "enter no final".

Answered by Rodrigo Carvalho de Brito on December 2, 2021

Add your own answers!

Ask a Question

Get help from others!