API Shape Detection: uma imagem vale por mil palavras, rostos e códigos de barras

A API Shape Detection detecta rostos, códigos de barras e texto em imagens.

Thomas steiner

O que é a API Shape Detection?

Com APIs como a navigator.mediaDevices.getUserMedia e o seletor de fotos do Chrome para Android, ficou bastante fácil capturar imagens ou dados de vídeo ao vivo das câmeras de dispositivos ou fazer upload de imagens locais. Até agora, esses dados de imagem dinâmica, assim como as imagens estáticas em uma página, não estavam acessíveis por código, embora as imagens possam realmente conter muitos recursos interessantes, como rostos, códigos de barras e texto.

Por exemplo, antes, se os desenvolvedores quisesse extrair esses recursos do cliente para criar um leitor de código QR, eles precisavam de bibliotecas JavaScript externas. Isso pode ser caro do ponto de vista do desempenho e aumentar o peso geral da página. Por outro lado, sistemas operacionais, incluindo Android, iOS e macOS, mas também chips de hardware encontrados nos módulos de câmera, geralmente já têm detectores de recursos de alto desempenho e altamente otimizados, como o FaceDetector do Android ou o detector de recursos genérico do iOS, CIDetector.

A API Shape Detection expõe essas implementações usando um conjunto de interfaces JavaScript. Atualmente, os recursos compatíveis são detecção facial pela interface FaceDetector, detecção de código de barras pela interface BarcodeDetector e detecção de texto (reconhecimento óptico de caracteres (OCR, na sigla em inglês) pela interface TextDetector.

Casos de uso sugeridos

Conforme descrito acima, a API Shape Detection atualmente tem suporte à detecção de rostos, códigos de barras e texto. A lista com marcadores a seguir contém exemplos de casos de uso dos três recursos.

Detecção facial

  • Sites de compartilhamento de fotos e redes sociais on-line costumam permitir que os usuários façam anotações em imagens. Ao destacar os limites dos rostos detectados, essa tarefa pode ser facilitada.
  • Os sites de conteúdo podem cortar imagens dinamicamente com base em rostos potencialmente detectados, em vez de depender de outras heurísticas, ou destacar rostos detectados com efeitos de movimentação e zoom semelhantes a Ken Burns em formatos parecidos com histórias.
  • Sites de mensagens multimídia podem permitir que os usuários sobreponham objetos engraçados, como óculos de sol ou bigodes em pontos de referência detectados.

Detecção de código de barras

  • Os aplicativos da Web que leem códigos QR podem desbloquear casos de uso interessantes, como pagamentos on-line ou navegação na Web, ou usar códigos de barras para estabelecer conexões sociais em aplicativos de mensagens.
  • Os apps de compras podem permitir que os usuários leiam códigos de barras EAN ou UPC de itens em uma loja física para comparar preços on-line.
  • Os aeroportos podem fornecer quiosques da Web em que os passageiros podem ler os códigos Aztec dos cartões de embarque para mostrar informações personalizadas relacionadas aos voos.

Detecção de texto

  • Os sites de redes sociais on-line podem melhorar a acessibilidade do conteúdo de imagem gerado pelo usuário adicionando textos detectados como atributos alt para tags <img> quando nenhuma outra descrição é fornecida.
  • Os sites de conteúdo podem usar a detecção de texto para evitar colocar títulos sobre imagens principais com texto contido.
  • Aplicativos da Web podem usar a detecção de texto para traduzir textos como, por exemplo, cardápios de restaurantes.

Status atual

Step Status
1. Criar explicação Concluído
2. Criar rascunho inicial da especificação Concluído
3. Reunir feedbacks e iterar no design Em andamento
4. Teste de origem Concluído
5. lançamento Detecção de código de barras concluída
Detecção facial em andamento
Detecção de texto em andamento

Como usar a API Shape Detection

Se você quiser testar a API Shape Detection localmente, ative a sinalização #enable-experimental-web-platform-features em about://flags.

As interfaces dos três detectores, FaceDetector, BarcodeDetector e TextDetector, são semelhantes. Todas elas fornecem um único método assíncrono chamado detect(), que usa um ImageBitmapSource como entrada (ou seja, um CanvasImageSource, um Blob ou ImageData).

Para FaceDetector e BarcodeDetector, parâmetros opcionais podem ser transmitidos para o construtor do detector, o que permite fornecer dicas aos detectores subjacentes.

Confira a matriz de suporte na explicação para ter uma visão geral das diferentes plataformas.

Como trabalhar com a BarcodeDetector

O BarcodeDetector retorna os valores brutos do código de barras que encontra no ImageBitmapSource e nas caixas delimitadoras, bem como outras informações, como os formatos dos códigos de barras detectados.

const barcodeDetector = new BarcodeDetector({
  // (Optional) A series of barcode formats to search for.
  // Not all formats may be supported on all platforms
  formats: [
    'aztec',
    'code_128',
    'code_39',
    'code_93',
    'codabar',
    'data_matrix',
    'ean_13',
    'ean_8',
    'itf',
    'pdf417',
    'qr_code',
    'upc_a',
    'upc_e'
  ]
});
try {
  const barcodes = await barcodeDetector.detect(image);
  barcodes.forEach(barcode => searchProductDatabase(barcode));
} catch (e) {
  console.error('Barcode detection failed:', e);
}

Como trabalhar com a FaceDetector

O FaceDetector sempre retorna as caixas delimitadoras dos rostos que detecta em ImageBitmapSource. Dependendo da plataforma, mais informações sobre pontos de referência do rosto, como olhos, nariz ou boca, podem estar disponíveis. É importante observar que essa API só detecta rostos. Ele não identifica a quem um rosto pertence.

const faceDetector = new FaceDetector({
  // (Optional) Hint to try and limit the amount of detected faces
  // on the scene to this maximum number.
  maxDetectedFaces: 5,
  // (Optional) Hint to try and prioritize speed over accuracy
  // by, e.g., operating on a reduced scale or looking for large features.
  fastMode: false
});
try {
  const faces = await faceDetector.detect(image);
  faces.forEach(face => drawMustache(face));
} catch (e) {
  console.error('Face detection failed:', e);
}

Como trabalhar com a TextDetector

O TextDetector sempre retorna as caixas delimitadoras dos textos detectados e, em algumas plataformas, os caracteres reconhecidos.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

Detecção de recursos

Não é suficiente apenas verificar a existência dos construtores para detectar a API Shape Detection. A presença de uma interface não informa se a plataforma oferece suporte ao recurso. Isso está funcionando conforme o esperado. É por isso que recomendamos uma abordagem de programação defensiva com uma detecção de recursos como esta:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

A interface BarcodeDetector foi atualizada para incluir um método getSupportedFormats(), e interfaces semelhantes foram propostas para FaceDetector e para TextDetector.

await BarcodeDetector.getSupportedFormats();
/* On a macOS computer logs
  [
    "aztec",
    "code_128",
    "code_39",
    "code_93",
    "data_matrix",
    "ean_13",
    "ean_8",
    "itf",
    "pdf417",
    "qr_code",
    "upc_e"
  ]
*/

Isso permite detectar o recurso específico de que você precisa, por exemplo, leitura de QR code:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

Isso é melhor do que ocultar as interfaces, porque, mesmo entre as plataformas, os recursos podem variar. Portanto, recomendamos que os desenvolvedores verifiquem precisamente a capacidade de que precisam, como um formato de código de barras ou ponto de referência facial específico.

Suporte ao sistema operacional

A detecção de código de barras está disponível no macOS, ChromeOS e Android. O Google Play Services é necessário no Android.

Práticas recomendadas

Todos os detectores funcionam de maneira assíncrona, ou seja, eles não bloqueiam a linha de execução principal. Portanto, não dependa da detecção em tempo real, mas permita que o detector faça o trabalho por algum tempo.

Se você gosta do Web Workers, vai gostar de saber que os detectores também estão expostos lá. Os resultados da detecção são serializáveis e podem ser transmitidos do worker para o app principal via postMessage(). A demonstração mostra isso na prática.

Nem todas as implementações de plataforma oferecem suporte a todos os recursos. Portanto, confira a situação de suporte com cuidado e use a API como uma melhoria progressiva. Por exemplo, algumas plataformas podem oferecer suporte à detecção facial por si só, mas não à detecção de pontos de referência faciais (olhos, nariz, boca etc.). Também é possível que a existência e a localização do texto sejam reconhecidas, mas não o conteúdo dele.

Feedback

A equipe do Chrome e a comunidade de padrões da Web querem saber sobre suas experiências com a API Shape Detection.

Fale sobre o design da API

Algo na API não funciona como você esperava? Ou há métodos ou propriedades ausentes que você precisa para implementar sua ideia? Tem alguma dúvida ou comentário sobre o modelo de segurança?

Problemas com a implementação?

Você encontrou um bug na implementação do Chrome? Ou a implementação é diferente da especificação?

  • Registre um bug em https://new.crbug.com. Inclua o máximo de detalhes possível, instruções simples para reprodução e defina Componentes como Blink>ImageCapture. O Glitch funciona muito bem para compartilhar repetições rápidas e fáceis.

Pretende usar a API?

Quer usar a API Shape Detection no seu site? Seu suporte público nos ajuda a priorizar recursos e mostra a outros fornecedores de navegadores como é importante oferecer suporte a eles.

Links úteis