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.

O que é a API Shape Detection?

Com APIs como navigator.mediaDevices.getUserMedia e o Chrome para Android seletor de fotos, Ficou fácil capturar imagens ou dados de vídeo ao vivo câmeras ou enviar imagens locais. Até agora, os dados de imagem dinâmica, imagens estáticas em uma página, não é acessível por código, as imagens podem conter muitos recursos interessantes, como rostos, códigos de barras e texto.

Por exemplo, antes, se os desenvolvedores queriam extrair esses recursos da criar um leitor de QR code, ele tinha a depender de bibliotecas JavaScript externas. Isso pode sair caro o ponto de vista do desempenho e aumentar o peso geral da página. No outro sistemas operacionais, incluindo Android, iOS e macOS, os chips presentes nos módulos da câmera, que normalmente já têm alto desempenho detectores de recursos otimizados, como o FaceDetector ou o detector de recursos genéricos do iOS, CIDetector

A API Shape Detection expõe essas implementações por meio de um conjunto de interfaces JavaScript. Atualmente, os recursos com suporte são o reconhecimento facial detecção de código pela interface FaceDetector, detecção de código de barras pela interface BarcodeDetector e detecção de texto (Optical Character reconhecimento de voz (OCR)) pela interface TextDetector.

Casos de uso sugeridos

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

Detecção facial

  • Os sites de redes sociais ou de compartilhamento de fotos costumam permitir que os usuários anotar pessoas 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 nas possíveis detecção em vez de depender de outras heurísticas, ou destacar rostos detectados com Ken Burns efeitos de panorâmica e zoom em formatos semelhantes a histórias.
  • Sites de mensagens multimídia podem permitir que os usuários sobreponham objetos engraçados, como óculos de sol ou bigodes nos pontos de referência do rosto detectados.

Detecção de código de barras

  • Aplicativos da Web que leem códigos QR podem revelar casos de uso interessantes como pagamentos on-line ou navegação na web, ou usar códigos de barras para estabelecer conexões em aplicativos de mensagens.
  • Os apps de compras podem permitir que os usuários façam EAN ou Códigos de barras UPC de itens em uma loja física para comparar preços on-line.
  • Os aeroportos podem oferecer quiosques na Web onde os passageiros podem digitalizar o embarque passa Códigos Aztec para mostrar informações personalizadas relacionadas aos seus voos.

Detecção de texto

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

Status atual

Etapa Status
1. Criar explicação Concluído
2. Criar um rascunho inicial da especificação Concluído
3. Colete feedback 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, ativar #enable-experimental-web-platform-features em about://flags.

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

Para FaceDetector e BarcodeDetector, parâmetros opcionais podem ser transmitidos ao construtor do detector, que permitem fornecer dicas ao e os detectores.

Verifique cuidadosamente a matriz de suporte explicativo para um informações gerais das diferentes plataformas.

Como trabalhar com o BarcodeDetector

BarcodeDetector retorna os valores brutos do código de barras que encontra na ImageBitmapSource e as 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 o FaceDetector

O FaceDetector sempre retorna as caixas delimitadoras dos rostos que ele detecta. o ImageBitmapSource. Dependendo da plataforma, mais informações em relação a 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 o TextDetector

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

Apenas verificar a existência dos construtores para detectar o recurso A API Shape Detection não é suficiente. A presença de uma interface não informa se a plataforma é compatível com o recurso. Isso está funcionando conforme o esperado. É por isso que recomendamos uma abordagem de programação defensiva, realizando detecção de recursos assim:

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 que você detecte o recurso específico de que precisa, por exemplo, a 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 esconder as interfaces porque, mesmo entre as plataformas, os recursos podem variar e por isso os desenvolvedores devem ser incentivados a verificar precisamente a capacidade (como um formato de código de barras específico ou ponto de referência facial) que eles exigem.

Suporte ao sistema operacional

A detecção de código de barras está disponível no macOS, ChromeOS e Android. Google Play Services são obrigatórios no Android.

Práticas recomendadas

Todos os detectores funcionam de maneira assíncrona, ou seja, não bloqueiam fio Portanto, não dependa da detecção em tempo real, mas permita algumas o detector faça o trabalho.

Se você é fã de Web Workers, também ficará feliz em saber que os detectores 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 como isso funciona.

Nem todas as implementações de plataforma aceitam todos os recursos. a situação de suporte com cuidado e usar a API como uma forma aprimoramento. Por exemplo, algumas plataformas podem oferecer suporte à detecção facial por si só, mas não detecção de ponto de referência facial (olhos, nariz, boca etc.); ou o a existência e o local do texto podem ser reconhecidos, mas não o conteúdo dele.

Feedback

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

Fale sobre o design da API

Alguma coisa na API não funciona como você esperava? Ou há métodos ou propriedades ausentes que você precisa para implementar seu ideia? Tem uma pergunta 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 das especificações?

  • Registre um bug em https://new.crbug.com. Certifique-se de incluir como o máximo de detalhes possível, instruções simples de reprodução e Componentes para Blink>ImageCapture. Falha funciona muito bem para o compartilhamento de reproduções rápidas e fáceis.

Planeja usar a API?

Planeja usar a API Shape Detection no seu site? Seu apoio público ajuda a priorizar recursos e mostra a outros fornecedores de navegadores como é crucial apoiá-las.

Links úteis