A API Shape Detection detecta rostos, códigos de barras e texto em imagens.
O que é a API Shape Detection?
Com APIs como a 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 das câmeras do dispositivo
ou fazer o 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 pudessem 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 criar um leitor de código QR, eles precisavam
depender de bibliotecas JavaScript externas. Isso pode ser caro do ponto de vista
de 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, 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. No momento, os recursos compatíveis são a detecção
facial pela interface FaceDetector
, a detecção de código de barras pela
interface BarcodeDetector
e a detecção de texto (reconhecimento óptico de
caracteres, 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 de marcadores a seguir contém exemplos de casos de uso para os três recursos.
Detecção facial
- Sites de redes sociais ou compartilhamento de fotos on-line geralmente permitem que os usuários marquem 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 em rostos potencialmente detectados, em vez de depender de outras heurísticas, ou destacar rostos detectados com efeitos de panorâmica e zoom semelhantes aos de Ken Burns em formatos de história.
- 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 do rosto detectados.
Detecção de código de barras
- 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 apps 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 oferecer quiosques da Web em que os passageiros podem digitalizar 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 for fornecida. - Os sites de conteúdo podem usar a detecção de texto para evitar a colocação de títulos sobre imagens principais com texto.
- Os aplicativos da Web podem usar a detecção de texto para traduzir textos, como, por exemplo, cardápios de restaurantes.
Status atual
Etapa | Status |
---|---|
1. Criar uma explicação | Concluído |
2. Criar um rascunho inicial da especificação | Concluído |
3. Coletar feedback e iterar o design | Em andamento |
4. Teste de origem | Concluído |
5. Lançar | 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 flag #enable-experimental-web-platform-features
em about://flags
.
As interfaces dos três detectores, FaceDetector
, BarcodeDetector
e
TextDetector
, são semelhantes. Todos eles fornecem um único método assíncrono
chamado detect()
, que recebe um
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 para permitir a exibição de dicas aos
detectores.
Confira cuidadosamente a matriz de suporte no texto explicativo para ter uma visão geral das diferentes plataformas.
Como trabalhar com o BarcodeDetector
O BarcodeDetector
retorna os valores brutos do código de barras encontrados no
ImageBitmapSource
e nas caixas delimitadoras, além de 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 detectados no
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 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 recursos
A verificação da existência dos construtores para detectar o recurso da API Shape Detection não é suficiente. A presença de uma interface não indica se a plataforma oferece suporte ao recurso. Isso está funcionando conforme o esperado. Por isso, recomendamos uma abordagem de programação defensiva fazendo a 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 necessário, 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 ocultar as interfaces porque, mesmo entre plataformas, os recursos podem variar. Portanto, os desenvolvedores precisam ser incentivados a verificar exatamente o recurso (como um formato de código de barras ou um ponto de referência facial) necessário.
Suporte ao sistema operacional
A detecção de código de barras está disponível no macOS, ChromeOS e Android. O Google Play Services é obrigatório no Android.
Práticas recomendadas
Todos os detectores funcionam de forma assíncrona, ou seja, não bloqueiam a linha de execução principal. Portanto, não confie na detecção em tempo real, mas sim no tempo necessário para que o detector faça o trabalho.
Se você é fã de
Web Workers,
vai gostar de saber que os detectores também são expostos.
Os resultados de detecção são serializáveis e, portanto, podem ser transmitidos do worker
para o app principal por postMessage()
. A demonstração mostra isso em ação.
Nem todas as implementações de plataforma oferecem suporte a todos os recursos. Portanto, verifique a situação de suporte com cuidado e use a API como uma melhoria progressiva. Por exemplo, algumas plataformas podem oferecer suporte à detecção de rosto em si, mas não à detecção de pontos de referência do 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 saber sobre suas experiências com a API Shape Detection.
Conte sobre o design da API
Há algo na API que não funciona como esperado? Ou há métodos ou propriedades ausentes que você precisa implementar para implementar sua ideia? Tem alguma dúvida ou comentário sobre o modelo de segurança?
- Registre um problema de especificação no repositório do GitHub da API Shape Detection ou adicione suas ideias a um problema existente.
Tem 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
Components como
Blink>ImageCapture
. O Glitch é ótimo para compartilhar reprosões rápidas e fáceis.
Planeja usar a API?
Você planeja usar a API Shape Detection no seu site? Seu apoio público nos ajuda a priorizar recursos e mostra a outros fornecedores de navegadores como é importante oferecer suporte a eles.
- Compartilhe como você planeja usá-lo na discussão do Discourse do WICG.
- Envie um tweet para @ChromiumDev usando a hashtag
#ShapeDetection
e nos informe onde e como você está usando.
Links úteis
- Explicação para o público
- Demonstração de API | Fonte da demonstração de API
- Rastreamento de bugs
- Entrada do ChromeStatus.com
- Componente do Blink:
Blink>ImageCapture