> For the complete documentation index, see [llms.txt](https://docs.guiseek.dev/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.guiseek.dev/web-apis/barcode-detection-api.md).

# 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="/files/5Y4n5DVJ3d81xiIDYYDL" 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="/files/pYxrbrqXNO2gVR3WHevr" 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="/files/7PvaYR3UsVnwRMyz2oM5" 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="/files/lQJWYQd8D1otU4I4RlwA" alt="" data-size="original"> |
| ean\_13      | Um código de barras linear baseado no padrão UPC-A e definido em iso15420.                                                                                                                                                                       | <img src="/files/LcnNyBXG4pVeNrHnwjEH" alt="" data-size="original"> |
| ean\_8       | Um código de barras linear definido em iso15420 e derivado de EAN-13.                                                                                                                                                                            | <img src="/files/pFmb3WT8pnUedk9dCc4W" 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="/files/z6dHudil7bhNMxGVsJvx" 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="/files/a1YyU5it3xnMqKkUwFSH" %}

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