Doubt/problem scanning QR Code with javascript and displaying the result in input

Asked

Viewed 274 times

1

I’m trying to get the QR code to be scanned it prints its value in the input, but I’m not getting it, I used some functions I know but the qr code is not printed in the input in any way, I’m new at this.

<!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>
javascript html

2 answers

1


For those with the same doubt I was able to find a solution, where it was very simple, follow the code below the QR Code being recognized and soon after the value being displayed in the 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>

1

I also use Instascan for the same purpose. Inside the addListener method, in place or even next to Alert, use the following, replacing the "id_field_de_send" with the id of the element that will receive the reading data:

$("#id_sending field"). Trigger("click");

Your code would look like this (replace id to work!!!):

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

". Trigger("click")" will execute the alias "enter at the end".

  • In the case, you were referring to getting the input ID?

  • That. If you are not using id, it would be good to put to discriminate the element.

  • Do some tests with recognition but I did not succeed, apparently I do not know what happened, I am very new in this field. But I will use a "gambiarra" at the moment so I can be including the value in the database.

  • After swapping the #id_send_field ID for #myText, it did not work, the console presented the following error, "Referenceerror: $ is not defined"

  • The id has to be the "input", maybe that’s it. I suffered also at first.

  • Thanks friend, you managed to open my mind to a question that was simple. I left the code below if you want to take a look

Show 1 more comment

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.