La API de Shape Detection detecta rostros, códigos de barras y texto en imágenes.
¿Qué es la API de Shape Detection?
Con APIs como navigator.mediaDevices.getUserMedia
y Chrome para Android
selector de fotos,
ahora es bastante fácil capturar imágenes
o datos de video en vivo desde el dispositivo
cámaras o subir imágenes locales. Hasta ahora, estos datos de imágenes dinámicas, así como
imágenes estáticas de una página, a pesar de que no se pudo acceder
las imágenes pueden contener muchas características interesantes, como rostros,
códigos de barras y texto.
Por ejemplo, en el pasado, si los desarrolladores quisieran extraer esas funciones
cliente creara un lector de códigos QR, tenían
depender de bibliotecas externas de JavaScript. Esto puede resultar costoso
el punto de vista del rendimiento y aumentar el peso total de la página. Del otro
los sistemas operativos (Android, iOS y macOS) y el hardware
que se encuentran en módulos de cámara, generalmente ya tienen rendimiento
detectores de funciones optimizados, como el
FaceDetector
o el detector de atributos genéricos de iOS,
CIDetector
La API de Shape Detection expone estas implementaciones a través de
un conjunto de interfaces de JavaScript. Actualmente, las funciones compatibles son las
detección a través de la interfaz FaceDetector
, detección de códigos de barras a través de la interfaz
interfaz BarcodeDetector
y detección de texto (carácter óptico
reconocimiento, (OCR)) a través de la interfaz TextDetector
.
Casos de uso sugeridos
Como se describió anteriormente, la API de Shape Detection actualmente admite la detección de rostros, códigos de barras y texto. La siguiente lista de viñetas contiene ejemplos de los casos de uso de las tres funciones.
Detección de rostro
- Las redes sociales o los sitios para compartir fotos en línea, por lo general, permiten que sus usuarios hacer anotaciones a personas en imágenes. Al destacar los límites de los rostros detectados, esta tarea se puede facilitar.
- Los sitios de contenido pueden recortar las imágenes de forma dinámica según los anuncios potencialmente detectados en lugar de utilizar otros métodos heurísticos, o destacar los rostros detectados con actividades similares a las de Ken Burns efectos de zoom y desplazamiento lateral en formatos que parecen historias.
- Los sitios de mensajería multimedia pueden permitir que sus usuarios superpongan objetos divertidos, como gafas de sol o bigotes en los puntos de referencia faciales detectados.
Detección de código de barras
- Las aplicaciones web que leen códigos QR pueden desbloquear casos de uso interesantes, como realizar pagos en línea o la navegación web, o usar códigos de barras para establecer redes conexiones en aplicaciones de mensajería.
- Las apps de compras permiten que los usuarios EAN o Códigos de barras UPC de artículos en una tienda física para comparar precios en línea.
- Los aeropuertos pueden ofrecer kioscos web donde los pasajeros puedan escanear su embarque pases Códigos Aztec para mostrar información personalizada relacionada con sus vuelos.
Detección de texto
- Los sitios de redes sociales en línea pueden mejorar la accesibilidad de
contenido de imágenes generadas por usuarios agregando el texto detectado como atributos de
alt
para las etiquetas<img>
cuando no se proporcionan otras descripciones. - Los sitios de contenido pueden utilizar la detección de texto para evitar colocar encabezados en imágenes destacadas con texto contenido.
- Las aplicaciones web pueden usar la detección de texto para traducir textos como, por ejemplo, menús de restaurantes.
Estado actual
Paso | Estado |
---|---|
1. Crear explicación | Completo |
2. Crea el borrador inicial de la especificación | Completo |
3. Recopila comentarios y iterar en el diseño | En curso |
4. Prueba de origen | Completo |
5. Lanzamiento | Detección de código de barras Completo |
Detección de rostro en curso | |
Detección de texto en curso |
Cómo usar la API de Shape Detection
Si quieres experimentar con la API de Shape Detection de forma local, puedes hacer lo siguiente:
habilita el #enable-experimental-web-platform-features
marca en about://flags
.
Las interfaces de los tres detectores, FaceDetector
, BarcodeDetector
y
TextDetector
son similares. Todas proporcionan un único método asíncrono.
llamada detect()
que toma un
ImageBitmapSource
como entrada (es decir, un
CanvasImageSource
, un
Blob
o
ImageData
).
Para FaceDetector
y BarcodeDetector
, se pueden pasar parámetros opcionales
al constructor del detector, que permiten proporcionar sugerencias al
detectores subyacentes.
Revisa cuidadosamente la matriz de compatibilidad en la explicación para un de las diferentes plataformas.
Cómo trabajar con BarcodeDetector
BarcodeDetector
muestra los valores de código de barras sin procesar que encuentra en la
ImageBitmapSource
y los cuadros delimitadores, además de otra información, como
el formato de los 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);
}
Cómo trabajar con FaceDetector
FaceDetector
siempre muestra los cuadros delimitadores de los rostros que detecta en
ImageBitmapSource
Según la plataforma, tendrás más información
en relación con puntos de referencia faciales, como ojos, nariz o boca,
Es importante tener en cuenta que esta API solo detecta rostros.
No identifica a quién pertenece un rostro.
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);
}
Cómo trabajar con TextDetector
TextDetector
siempre muestra los cuadros delimitadores de los textos detectados.
y, en algunas plataformas, los caracteres reconocidos.
const textDetector = new TextDetector();
try {
const texts = await textDetector.detect(image);
texts.forEach(text => textToSpeech(text));
} catch (e) {
console.error('Text detection failed:', e);
}
Detección de funciones
Si solo verificas la existencia de los constructores para detectar los atributos, La API de Shape Detection no es suficiente. La presencia de una interfaz no indica si la plataforma subyacente admite la función. Esto funciona según lo previsto. Por eso recomendamos un enfoque de programación defensiva con la detección de funciones así:
const supported = await (async () => 'FaceDetector' in window &&
await new FaceDetector().detect(document.createElement('canvas'))
.then(_ => true)
.catch(e => e.name === 'NotSupportedError' ? false : true))();
Se actualizó la interfaz BarcodeDetector
para incluir un método getSupportedFormats()
.
y se han propuesto interfaces similares,
para FaceDetector
y
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"
]
*/
Esto te permite detectar la función específica que necesitas, como escanear códigos QR:
if (('BarcodeDetector' in window) &&
((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
console.log('QR code scanning is supported.');
}
Esto es mejor que ocultar las interfaces porque, incluso entre las plataformas, las capacidades pueden variar. por lo que se debe alentar a los desarrolladores a verificar con precisión la capacidad (como un formato de código de barras en particular o un punto de referencia facial).
Compatibilidad con el sistema operativo
La detección de código de barras está disponible en macOS, ChromeOS y Android. Servicios de Google Play son obligatorios en Android.
Prácticas recomendadas
Todos los detectores funcionan de forma asíncrona, es decir, no bloquean el tráfico conversación. Así que no confíes en la detección en tiempo real, sino que debes permitir para que el detector haga su trabajo.
Si eres fanático de
Trabajadores web,
le alegrará saber que allí también se exponen los detectores.
Los resultados de la detección se pueden serializar y, por lo tanto, se pueden pasar desde el trabajador
a la app principal mediante postMessage()
. La demostración muestra esto en acción.
No todas las implementaciones de la plataforma admiten todas las funciones, así que asegúrate de comprobar la situación actual de soporte y usar la API como una mejoras. Por ejemplo, algunas plataformas podrían admitir la detección en sí, pero no la detección del punto de referencia facial (ojos, nariz, boca, etc.); o el se puede reconocer la existencia y la ubicación del texto, pero no el contenido del texto.
Comentarios
El equipo de Chrome y la comunidad de estándares de la Web quieren saber sobre tu experiencias con la API de Shape Detection.
Cuéntanos sobre el diseño de la API
¿Algo en la API no funciona como esperabas? O ¿faltan métodos o propiedades que necesites para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad?
- Informa un problema de especificaciones en el repositorio de GitHub de la API de Shape Detection. o agrega lo que piensas a un problema existente.
¿Tiene problemas con la implementación?
¿Encontraste un error en la implementación de Chrome? ¿O la implementación diferente de la especificación?
- Informa un error en https://new.crbug.com. Asegúrate de incluir como
detalles como puedas, instrucciones sencillas de reproducción y
Componentes a
Blink>ImageCapture
. Error funciona muy bien para compartir repros rápidos y sencillos.
¿Piensas usar la API?
¿Planeas usar la API de Shape Detection en tu sitio? Tu apoyo público nos ayuda a priorizar funciones y muestra a otros proveedores de navegadores cómo esencial para respaldarlos.
- Comparte cómo piensas usarlo en la conversación del discurso de WICG.
- Envía un tweet a @ChromiumDev con el hashtag
#ShapeDetection
y cuéntanos dónde y cómo la utilizas.
Vínculos útiles
- Explicación pública
- Demostración de la API | Fuente de la demostración de la API
- Seguimiento de errores
- Entrada de ChromeStatus.com
- Componente de parpadeo:
Blink>ImageCapture