# Leitura de QR Code usando a câmera do dispositivo

**URL:** <https://community.latromi.com.br/t/leitura-de-qr-code-usando-a-camera-do-dispositivo/422>\
**Category:** Tutoriais\
**Tags:** form, javascript\
**Created:** [Maio 13, 2020, 8:09pm UTC](https://community.latromi.com.br/t/leitura-de-qr-code-usando-a-camera-do-dispositivo/422 "2020-05-13T20:09:24Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![daniel.giacomelli](https://community.latromi.com.br/user_avatar/community.latromi.com.br/daniel.giacomelli/32/1476_2.png) [@daniel.giacomelli](https://community.latromi.com.br/u/daniel.giacomelli)\
**Post date:** [Maio 13, 2020, 8:09pm UTC](https://community.latromi.com.br/t/leitura-de-qr-code-usando-a-camera-do-dispositivo/422/1 "2020-05-13T20:09:25Z")

</div>

Neste tutoria, vou mostrar como fazer a leitura de um QR Code no Formulário Dinâmico usando a câmera do dispositivo. Usaremos a biblioteca [Instascan](https://github.com/schmich/instascan) para fazer a implementação

Você pode conferir este exemplo funcionando clicando [neste link](https://demo.latromi.com.br/web/exemplos/leitura-de-qrcode-usando-instascan).

## Importando a Biblioteca

A biblioteca Instascan não possui um endereço público para consumo, portanto é necessário importar a biblioteca antes de utilizar.

Siga os passos abaixo para importar a biblioteca:

1. Abra o menu Ferramentas → Gerenciador de Arquivos
2. Crie uma pasta para a biblioteca. Por exemplo: _Scripts/Instascan_
3. Clique no botão com símbolo “ **+** ” ou arrate o arquivo JavaScript para dentro da janela:  
 ![image](https://community.latromi.com.br/uploads/default/original/1X/210ed460c5c715f23cc277d4b20c3a8c07bcae5a.png)

Pronto! A biblioteca está disponível para uso dentro do Latromi.

## Estrutura do Formulário

Agora vamos criar um Formulário utilizando a biblioteca de Instascan.

Teremos na tela um elemento `video` que vai reproduzir a imagem da câmera do dispositivo e um campo _TextBox_, que vai receber o resultado da leitura. A leitura do QR Code ocorrerá ao posicioná-lo em frente a câmera.

 ![image](https://community.latromi.com.br/uploads/default/original/1X/b295603cc99334f13e293f70ccd75144f88783cf.jpeg "Teste realizado usando a câmera do Notebook")

### Campos

- **video** : Campo do tipo _HtmlElement_. Vamos adicionar a tag video na propriedade _Template Html_:

```html
<video id="preview" 
           style="width:100%;height:100%" 
           title="Posicione o QR code em frente a câmera para fazer a leitura">
</video>

```

- **txtQrCodeValue** : Campo do tipo _TextBox_ que vai receber o resultado da leitura do QR Code.

### Layout

Você pode configurar o Layout conforme sua preferência. Neste exemplo estou usando o modo **Empilhado** , e as seguintes dimensões nos campos:

| Campos | Largura | Altura |
| --- | --- | --- |
| video | 300 | 180 |
| txtQrCodeValue | 300 | |

### Arquivos JavaScript

Vamos precisar de dois arquivos JavaScript:

- O arquivo da biblioteca Instascan, que foi importado através do Gerenciador de Arquivos.
- Um arquivo JavaScript novo, para fazer a configuração do Formulário e a chamada das funções de leitura de QR Code.

#### Arquivo instascan.min.js

Selecione a sessão “Arquivos JavaScript” do Formulário, e clique no botão para referenciar um arquivo do Gerenciador de Arquivos. Em seguida selecione o arquivo _instascan.min.js_

 ![image](https://community.latromi.com.br/uploads/default/original/1X/d6ba6b0cf73e85e0e0ea7cc60cb7dd1d52188d3c.png)

#### JavaScript do Formulário

Agora clique no botão de criar um novo arquivo JavaScript. É neste arquivo que vai ocorrer a configuração do elemento `video` usando a biblioteca Instascan. Neste exemplo vou chamar o novo arquivo de _instascan-qrcode-form.js_.

 ![image](https://community.latromi.com.br/uploads/default/original/1X/ba79c0cfb29d5a3b28dc98e5170ceafe86fd2be4.png)

Adicione o código abaixo no arquivo criado. Salve o arquivo, e em seguida salve o Formulário.

```js
var latromi = latromi || {};

latromi.myForm = function () {

 function onFormCreatedPrivate(arguments) {
 	setupInstascan();
 }
 
 function setupInstascan() {
     let scanner = new Instascan.Scanner({
             video: document.getElementById("preview"),
             mirror: false // evita que o video fique espelhado
         }
     );
 
     scanner.addListener("scan", onScannerScan);
     
     Instascan.Camera.getCameras().then(function (cameras) {
        let selectedCamera;

        // Tratamento para pegar a camera traseira do smartphone
        if (cameras.length > 0) {
           for (let c = 0; c < cameras.length; c++) {
              if (cameras[c].name.indexOf('back') != -1) {
                  selectedCamera = cameras[c];
              }
           }
           
           if (!selectedCamera) selectedCamera = cameras[0];
        }
        
         if (selectedCamera) {
             scanner.start(selectedCamera);
         } else {
             console.error("No cameras found.");
         }
     });
 }
 
 function onScannerScan(value) {
 	let form = latromi.formManager.getFormInstance();
 	form.setFieldValue('txtQrCodeValue', value);
 }

 return {
 	onFormCreated: onFormCreatedPrivate,
 	onEventFiring: function(arguments) { },
 	onFieldValueChanged: function(arguments) { }
 }
};

// Declara o formulário
var myForm = new latromi.myForm();

// Adiciona Callbacks no Formulário
latromi.formManager.setOnFormCreatedCallback( myForm.onFormCreated );
latromi.formManager.setOnEventFiringCallback( myForm.onEventFiring );
latromi.formManager.setOnFieldValueChangedCallback( myForm.onFieldValueChanged );

```

Pronto! Agora é só testar o Formulário no navegador.

OBS.: Na primeira vez que a página for aberta, será necessário conceder permissão para utilizar a câmera do disposivo.

 ![image](https://community.latromi.com.br/uploads/default/original/1X/b4bef312728ee7f6af94888b065a81f12a19a4e3.png)

 Você pode enfrentar problemas ao implementar esta biblioteca caso não esteja utilizando o protocolo HTTPS

---

<div class="post-metadata">

**Author:** ![JandersonGF](https://community.latromi.com.br/user_avatar/community.latromi.com.br/jandersongf/32/1198_2.png) [@JandersonGF](https://community.latromi.com.br/u/JandersonGF)\
**Post date:** [Outubro 2, 2023, 12:32am UTC](https://community.latromi.com.br/t/leitura-de-qr-code-usando-a-camera-do-dispositivo/422/2 "2023-10-02T00:32:37Z")

</div>

Olá, estou tentando fazer exatamente isso num projeto da faculdade, mas estou tendo dificuldades, o arquivo no link que vc disponibiliza não tem esse arquivo "instascan.min.js.

E eu estou fazendo esse projeto no VS Code, teria como adaptar isso pra lá?? Pq não sei que programa é esse que vc utiliza…

E como eu crio uma formulário usando a biblioteca??