# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.guiseek.dev/web-apis/barcode-detection-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.