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?
- Registre um problema de especificação no repositório da API Shape Detection no GitHub (em inglês). ou adicionar ideias a um problema.
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.
- Compartilhe como você planeja usá-la na conversa sobre a WCG (em inglês).
- Envie um tweet para @ChromiumDev usando a hashtag
#ShapeDetection
e informe onde e como você o utiliza.
Links úteis
- Explicações públicas
- Demonstração da API | Fonte da demonstração da API
- Rastreamento de bug
- Entrada de ChromeStatus.com
- Componente Blink:
Blink>ImageCapture