Barcode Detection API

Detectar códigos de barras lineares e bidimensionais em imagens nunca foi tão simples.

Esta é uma especificação escrita por um grupo da comunidade W3C, nomeado como Accelerated Shape Detection in Images (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

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.
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 (daí o nome).
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.
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.
ean_13	Um código de barras linear baseado no padrão UPC-A e definido em iso15420.
ean_8	Um código de barras linear definido em iso15420 e derivado de EAN-13.
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.
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.

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.

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 (daí o nome).

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.

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.

ean_13

Um código de barras linear baseado no padrão UPC-A e definido em iso15420.

ean_8

Um código de barras linear definido em iso15420 e derivado de EAN-13.

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.

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)

["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.

17KB

barcodes.zip

Exemplo

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

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

PreviousNavigation NextBarcode Detection API - Parte 2

Last updated 2 months ago