API de detecção de formas: uma imagem vale mais que mil palavras, rostos e códigos de barras

# O que é a API de detecção de formas?

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

Por exemplo, no passado, se os desenvolvedores quisessem extrair esses recursos no cliente para construir um leitor de código QR , eles tinham que contar com 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 em módulos de câmera, normalmente já possuem detectores de recursos de alto desempenho e altamente otimizados, como o Android FaceDetector ou o detector de recursos genéricos do iOS, CIDetector.

A API de detecção de formas expõe essas implementações por meio de um conjunto de interfaces JavaScript. Atualmente, as funcionalidades suportadas são a detecção de faces através da FaceDetector interface, detecção de código de barras através da BarcodeDetector interface, e detecção de texto (Reconhecimento Óptico de Caracteres (OCR)) através do TextDetector interface.

# Casos de uso sugeridos

Conforme descrito acima, a API de detecção de formas atualmente suporta a detecção de faces, códigos de barras e texto. A lista de marcadores a seguir contém exemplos de casos de uso para todos os três recursos.

# Detecção de rosto

• Os sites de redes sociais online ou de compartilhamento de fotos geralmente permitem que seus usuários façam anotações nas pessoas nas imagens. Ao destacar os limites dos rostos detectados, essa tarefa pode ser facilitada.
• Os sites de conteúdo podem recortar imagens dinamicamente com base em rostos potencialmente detectados, em vez de depender de outras heurísticas, ou destacar rostos detectados com efeitos panorâmicos e de zoom semelhantes a Ken Burns em formatos semelhantes a histórias.
• Os sites de mensagens multimídia podem permitir que seus usuários sobreponham objetos engraçados, como óculos de sol ou bigodes, em pontos de referência de rosto 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 online ou navegação na web, ou usar códigos de barras para estabelecer conexões sociais em aplicativos de mensagens.
• Os aplicativos de compras podem permitir que seus usuários leiam códigos de barras EAN ou UPC de itens em uma loja física para comparar preços online.
• Os aeroportos podem fornecer quiosques na web onde os passageiros podem ler os códigos Aztec de seus cartões de embarque para mostrar informações personalizadas relacionadas a seus voos.

# Detecção de texto

• Os sites de redes sociais online podem melhorar a acessibilidade do conteúdo da imagem gerada pelo usuário, adicionando textos detectados como atributos alt <img> quando nenhuma outra descrição é fornecida.
• Os sites de conteúdo podem usar a detecção de texto para evitar colocar cabeçalhos em cima das imagens principais com texto contido.
• Os aplicativos da Web podem usar a detecção de texto para traduzir textos como, por exemplo, cardápios de restaurantes.

# Status atual

# Como usar a API de detecção de formas

Se quiser experimentar a API de detecção de formas localmente, ative o sinalizador #enable-experimental-web-platform-features about://flags.

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

Para FaceDetector e BarcodeDetector , parâmetros opcionais podem ser passados para o construtor do detector, que permitem fornecer dicas para os detectores subjacentes.

Por favor, verifique cuidadosamente a matriz de suporte no explicador para uma visão geral das diferentes plataformas.

# Trabalhando com o 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);
}

# Trabalhando com o FaceDetector {:} #facedetector

O FaceDetector sempre retorna as caixas delimitadoras de faces que detecta no ImageBitmapSource. Dependendo da plataforma, mais informações sobre os marcos do rosto, como olhos, nariz ou boca, podem estar disponíveis. É importante notar que esta API detecta apenas rostos. Não identifica a quem pertence um rosto.

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);
}

# Trabalhando com o 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 recurso

Verificar puramente a existência de construtores para detectar o recurso da API de detecção de formas não é suficiente. A presença de uma interface não informa se a plataforma subjacente oferece suporte ao recurso. Isso está funcionando conforme o planejado. É por isso que recomendamos uma abordagem de programação defensiva, fazendo a detecção de recursos como este:

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

O BarcodeDetector interface foi atualizada para incluir um método getSupportedFormats() e interfaces similares têm sido 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 que você detecte o recurso específico de que precisa, por exemplo, leitura de código QR:

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 e, portanto, os desenvolvedores devem ser encorajados a verificar precisamente a capacidade (como um formato de código de barras específico ou ponto de referência facial) de que precisam.

# Suporte para 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 forma assíncrona, ou seja, não bloqueiam a thread principal. Portanto, não confie na detecção em tempo real, mas deixe algum tempo para que o detector faça seu trabalho.

Se você é um fã de Web Workers, ficará feliz em saber que os detectores também estão expostos lá. Os resultados da detecção são serializáveis e, portanto, podem ser passados do trabalhador para o aplicativo principal via postMessage() . A demonstração mostra isso em ação.

Nem todas as implementações de plataforma oferecem suporte a todos os recursos, portanto, certifique-se de verificar a situação do suporte com cuidado e usar a API como um aprimoramento progressivo. Por exemplo, algumas plataformas podem suportar a detecção de rosto em si, mas não a detecção de pontos de referência de rosto (olhos, nariz, boca, etc.); ou a existência e a localização do texto podem ser reconhecidas, mas não o conteúdo do texto.

# Feedback

A equipe do Chrome e a comunidade de padrões da web querem ouvir sobre suas experiências com a API de detecção de formas.

# Conte-nos sobre o design da API

Existe algo na API que não funciona como você esperava? Ou faltam métodos ou propriedades de que você precisa para implementar sua ideia? Tem uma pergunta ou comentário sobre o modelo de segurança?

• Registre um problema de especificação no repositório GitHub da API de detecção de formas ou adicione suas ideias a um problema existente.

# Problemas com a implementação?

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

• Registre um bug em https://new.crbug.com. Certifique-se de incluir o máximo de detalhes que puder, instruções simples para reproduzir e definir Componentes como Blink>ImageCapture. Glitch funciona muito bem para compartilhar reproduções rápidas e fáceis.

# Planejando usar a API?

Planejando usar a API de detecção de formas em seu site? Seu apoio público nos ajuda a priorizar os recursos e mostra a outros fornecedores de navegadores como é fundamental apoiá-los.

• Compartilhe como você planeja usá-lo no tópico do discurso do WICG.
• Envie um tweet para @ChromiumDev usando a hashtag#ShapeDetection e diga-nos onde e como você está usando.

# Links úteis

• Explicador público
• API Demo | Fonte de demonstração da API
• Bug de rastreamento
• Entrada ChromeStatus.com
• Componente Blink: Blink>ImageCapture