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,
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?
- Registre um problema de especificação no repositório da API Shape Detection no GitHub (em inglês) ou adicione suas ideias a um problema atual.
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.
- Conte como você planeja usá-lo na conversa do discurso do WICG (em inglês).
- Envie um tweet para @ChromiumDev com a hashtag
#ShapeDetection
e conte para a gente onde e como você está usando a hashtag.
Links úteis
- Explicações públicas
- Demonstração da API | Fonte da demonstração da API
- Rastreamento de bugs
- Entrada ChromeStatus.com
- Componente do Blink:
Blink>ImageCapture