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.

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 1 year ago

Was this helpful?