# Barcode Detection API

Esta é uma especificação escrita por um grupo da comunidade W3C, nomeado como Accelerated Shape Detection in Images ([shape detection api](https://wicg.github.io/shape-detection-api)).

### Introdução

Fotos e imagens constituem a maior parte da Web e muitas incluem informações detectáveis por métodos computacionais, que por sua vez são um tanto caros de processar, no entanto levaria a casos de uso interessantes como marcação de pessoas ou objetos em fotos e encaminhamento para páginas com facilidade. Você pode estar pensando "mas clicar em um link não é mais simples que ler um QRCode?" e a resposta é sim!

Porém, existem outros casos de uso onde estamos no mundo real e desejamos acessar um recurso do mundo virtual, um exemplo bem útil e comum de encontrar é quando chegamos a um restaurante e o acesso ao cardápio é feito através de um QRCode impresso, sem isso precisamos descobrir a URL e digita-la letra por letra. Pode não parecer, mas em algumas ocasiões isso pode ser frustrante ou desafiador, caso o domínio não seja amigável ou até mesmo em casos de acessibilidade para um surdo-mudo ou alguém com dificuldades especiais.

### Compatibilidade

<table data-header-hidden><thead><tr><th width="259">Navegador</th><th width="153.33333333333331" data-type="checkbox">Suporte</th><th>Versão</th></tr></thead><tbody><tr><td><strong>Chrome</strong></td><td>true</td><td>83+</td></tr><tr><td><strong>Edge</strong></td><td>true</td><td>83+</td></tr><tr><td><strong>Opera</strong></td><td>true</td><td>69+</td></tr><tr><td><strong>Android Browser</strong></td><td>true</td><td>126</td></tr><tr><td><strong>Chrome for Android</strong></td><td>true</td><td>126</td></tr><tr><td><strong>Opera Mobile</strong></td><td>true</td><td>80+</td></tr><tr><td><strong>Samsung Internet</strong></td><td>true</td><td>13+</td></tr><tr><td><strong>Safari on iOS</strong></td><td>false</td><td></td></tr><tr><td><strong>Firefox</strong></td><td>false</td><td></td></tr><tr><td><strong>Safari</strong></td><td>false</td><td></td></tr></tbody></table>

### Conceitos e uso

Alguns casos de uso por meio de formatos de código de barras suportados. Os códigos QR podem ser usados ​​para pagamentos on-line, navegação na web ou estabelecimento de conexões de mídia social, os códigos Aztec podem ser usados ​​para escanear cartões de embarque e os aplicativos de compras podem usar códigos de barras EAN para comparar preços de itens físicos.

### Exemplos de tipos de código

| Format       | Description                                                                                                                                                                                                                                      | Image                                                                                                                                                                                                                                                            |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| aztec        | Uma matriz quadrada bidimensional seguindo iso24778 e com um padrão quadrado de alvo no centro, lembrando assim uma pirâmide asteca. Não requer uma zona vazia circundante.                                                                      | <img src="https://2526379013-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LoQi4uVkEaI9WVGc-5k%2Fuploads%2FryadjgUCGzBlSsr8XjsB%2Faztec.svg?alt=media&#x26;token=654e41f0-0348-4cea-b14a-b0296cae25f9" alt="" data-size="original">       |
| code\_128    | Um código de barras linear (unidimensional), decodificáveis bidirecionalmente e autoverificável seguindo iso15417 e capaz de codificar todos os 128 caracteres do [ASCII](https://developer.mozilla.org/en-US/docs/Glossary/ASCII) (daí o nome). | <img src="https://2526379013-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LoQi4uVkEaI9WVGc-5k%2Fuploads%2FybtZRnJo3UpXtAbYbQKG%2Fcode_128.svg?alt=media&#x26;token=166d9ec0-f793-496b-bedb-562329a7c2a6" alt="" data-size="original">    |
| code\_39     | Um código de barras linear (unidimensional) de autoverificação seguindo iso16388. É um tipo de código de barras discreto e de comprimento variável.                                                                                              | <img src="https://2526379013-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LoQi4uVkEaI9WVGc-5k%2Fuploads%2FAv6rkaWE5CNaAPJCOTvO%2Fcode_39.svg?alt=media&#x26;token=b8ee6cd1-47b6-4181-a16c-0310d0489d79" alt="" data-size="original">     |
| data\_matrix | Um código de barras bidimensional independente de orientação composto por módulos preto e branco dispostos em um padrão quadrado ou retangular seguindo a iso16022.                                                                              | <img src="https://2526379013-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LoQi4uVkEaI9WVGc-5k%2Fuploads%2F4VOeyLV4uq2lYvdaSHrG%2Fdata-matrix.svg?alt=media&#x26;token=4a58532d-8050-4dbc-ac28-780d11d4e4ac" alt="" data-size="original"> |
| ean\_13      | Um código de barras linear baseado no padrão UPC-A e definido em iso15420.                                                                                                                                                                       | <img src="https://2526379013-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LoQi4uVkEaI9WVGc-5k%2Fuploads%2FUu9LIAcMjruZZriI08ch%2Fean13.svg?alt=media&#x26;token=b61d463b-1e6a-4501-ab7e-7d4d681732b2" alt="" data-size="original">       |
| ean\_8       | Um código de barras linear definido em iso15420 e derivado de EAN-13.                                                                                                                                                                            | <img src="https://2526379013-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LoQi4uVkEaI9WVGc-5k%2Fuploads%2Fn3J8MeVWJhOhfDdfZMGr%2Fean8.svg?alt=media&#x26;token=b92dd3b1-65ac-40b2-bd71-0b875d962c16" alt="" data-size="original">        |
| qr\_code     | Um código de barras bidimensional que utiliza o padrão iso18004. As informações codificadas podem ser texto, URL ou outros dados.                                                                                                                | <img src="https://2526379013-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LoQi4uVkEaI9WVGc-5k%2Fuploads%2FP0B31E4UOvwZVavX3f8l%2Fqr-code.svg?alt=media&#x26;token=39b76062-90ea-4fd6-be7e-cdd92fe103b2" alt="" data-size="original">     |
| unknown      | Este valor é usado pela plataforma para indicar que ela não sabe ou especifica qual formato de código de barras está sendo detectado ou suportado.                                                                                               |                                                                                                                                                                                                                                                                  |

### Conceitos técnicos

Entrando nos conceitos técnicos, a detecção é obtida por meio do método `detect()`, que recebe um objeto, podendo ser um dos a seguir, `HTMLImageElement`, `SVGImageElement`, `HTMLVideoElement`, `HTMLCanvasElement`, `ImageBitmap`, `OffscreenCanvas`, `VideoFrame`, `Blob`, ou `ImageData`. Além de parâmetros opcionais que podem fornecer dicas sobre quais formatos de código detectar.

### Implementação

Bem, agora podemos começar a explorar as APIs disponíveis no objeto `window`

Verifique se está utilizando algum dos navegadores que tenham suporte, conforme a tabela acima e usando o console JavaScript, execute:

`BarcodeDetector.getSupportedFormats().then(console.log)`

```javascript
["aztec", "code_128", "code_39", "code_93", "data_matrix", "ean_13", "ean_8", "itf", "pdf417", "qr_code", "upc_e"]
```

O retorno é um array contendo os formatos de códigos que podem ser lidos.

#### Recursos

Faça o download do pacote de imagens em SVG que preparei para nossos testes.

{% file src="<https://2526379013-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LoQi4uVkEaI9WVGc-5k%2Fuploads%2FIIRcuuCKciI1WFSEO2km%2Fbarcodes.zip?alt=media&token=63f4b226-ab72-4023-9d97-b27ad45d1bbe>" %}

#### Exemplo

Para testar essa API da Web apenas um arquivo HTML simples será suficiente, vamos lá.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <img src="aztec.svg" alt="aztec" />
    <img src="data-matrix.svg" alt="data-matrix" />
    <img src="code_128.svg" alt="code_128" />
    <img src="code_39.svg" alt="code_39" />
    <img src="ean13.svg" alt="ean13" />
    <img src="ean8.svg" alt="ean8" />
    <img src="qr-code.svg" alt="qr-code" />

    <script>
      setTimeout(() => {
        const detector = new BarcodeDetector();

        const log = (id) => {
          return (...data) => {
            console.log(id, ...data);
          };
        };

        for (const image of document.images) {
          detector.detect(image).then(log(image.alt));
        }
      }, 1000);
    </script>
  </body>
</html>
```

Hoje paramos por aqui mas em breve escrevo uma implementação mais avançada usando esta API.

Valeu, abraço.

\[]s