API de Shape Detection: una imagen vale más que mil palabras, rostros y códigos de barras

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 el selector de fotos de Chrome para Android, se volvió bastante fácil capturar imágenes o datos de video en vivo de las cámaras del dispositivo, o subir imágenes locales. Hasta ahora, no se puede acceder a estos datos de imagen dinámica ni a las imágenes estáticas de una página, aunque las imágenes en realidad pueden contener muchas características interesantes, como rostros, códigos de barras y texto.

Por ejemplo, en el pasado, si los desarrolladores querían extraer esas funciones en el cliente para compilar un lector de código QR, debían usar bibliotecas externas de JavaScript. Esto podría ser costoso desde el punto de vista del rendimiento y aumentar el peso general de la página. Por otro lado, los sistemas operativos (como Android, iOS y macOS), pero también los chips de hardware que se encuentran en los módulos de cámara, por lo general, ya tienen detectores de funciones de alto rendimiento y altamente optimizados, como el FaceDetector de Android o el detector de funciones genérico 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 la detección de rostros a través de la interfaz FaceDetector, la detección de códigos de barras mediante la interfaz BarcodeDetector y la detección de texto (reconocimiento óptico de caracteres, [OCR]) a través de la interfaz TextDetector.

Casos de uso sugeridos

Como se describió anteriormente, la API de Shape Detection admite actualmente la detección de rostros, códigos de barras y texto. La siguiente lista de viñetas contiene ejemplos de casos de uso para las tres funciones.

Detección de rostro

  • Por lo general, los sitios de redes sociales en línea o para compartir fotos permiten que sus usuarios agreguen anotaciones a las personas en las imágenes. Si destacas los límites de los rostros detectados, esta tarea se puede facilitar.
  • Los sitios de contenido pueden recortar imágenes de forma dinámica en función de rostros potencialmente detectados en lugar de depender de otras heurísticas, o destacar los rostros detectados con efectos de desplazamiento lateral y zoom similares a los de Ken Burns en formatos de historias.
  • Los sitios de mensajería multimedia pueden permitir que los usuarios superpongan objetos divertidos, como anteojos de sol o bigotes, en puntos de referencia de rostros detectados.

Detección de código de barras

  • Las aplicaciones web que leen códigos QR pueden desbloquear casos de uso interesantes como pagos en línea o navegación web, o usar códigos de barras para establecer conexiones sociales en aplicaciones de mensajería.
  • Las apps de compras pueden permitir que los usuarios escaneen códigos de barras EAN o UPC de los artículos de una tienda física para comparar precios en línea.
  • Los aeropuertos pueden proporcionar kioscos web en los que los pasajeros pueden escanear los códigos Aztec de sus tarjetas de embarque 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 del contenido de imágenes generadas por los usuarios si agregan textos detectados como atributos alt para las etiquetas <img> cuando no se proporcionan otras descripciones.
  • Los sitios de contenido pueden usar la detección de texto para evitar colocar encabezados sobre las hero images 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

Step Estado
1. Crear explicación Completo
2. Crea el borrador inicial de la especificación Completo
3. Recopila comentarios y, luego, itera sobre el diseño En curso
4. Prueba de origen Completo
5. Lanzamiento Detección de código de barras completa
Detección de rostro en curso
Detección de texto en curso

Cómo usar la API de Shape Detection

Si deseas experimentar con la API de Shape Detection de forma local, habilita la marca #enable-experimental-web-platform-features en about://flags.

Las interfaces de los tres detectores, FaceDetector, BarcodeDetector y TextDetector, son similares. Todos proporcionan un único método asíncrono llamado 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 a los detectores subyacentes.

Revisa detenidamente la matriz de compatibilidad de la explicación para obtener una descripción general de las diferentes plataformas.

Cómo trabajar con BarcodeDetector

BarcodeDetector muestra los valores sin procesar del código de barras que encuentra en ImageBitmapSource y los cuadros delimitadores, además de otra información, como los formatos 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 rostros que detecta en ImageBitmapSource. Según la plataforma, es posible que esté disponible más información sobre 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

Comprobar puramente la existencia de los constructores para detectar la API de Shape Detection no es suficiente. La presencia de una interfaz no te 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 una detección de funciones como la siguiente:

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 propusieron 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"
  ]
*/

De esta manera, podrás detectar la función específica que necesitas, por ejemplo, el escaneo de 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, ya que, incluso en todas las plataformas, las capacidades pueden variar, por lo que se debe alentar a los desarrolladores a que comprueben con precisión la capacidad (como un formato de código de barras o un punto de referencia facial) en particular.

Compatibilidad con el sistema operativo

La detección de códigos de barras está disponible en macOS, ChromeOS y Android. Los Servicios de Google Play son obligatorios en Android.

Prácticas recomendadas

Todos los detectores funcionan de forma asíncrona, es decir, no bloquean el subproceso principal. Por lo tanto, no dependas de la detección en tiempo real, sino que deja que el detector realice su trabajo de algún tiempo.

Si eres fan de los Web Workers, te alegrará saber que los detectores también están expuestos allí. Los resultados de la detección se pueden serializar y, por lo tanto, se pueden pasar del trabajador a la app principal a través de 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 verificar cuidadosamente la situación de asistencia y de usar la API como una mejora progresiva. Por ejemplo, algunas plataformas pueden admitir la detección de rostros por sí mismo, pero no la detección de puntos de referencia de rostros (ojos, nariz, boca, etc.), o se puede reconocer la existencia y la ubicación del texto, pero no el contenido de texto.

Comentarios

El equipo de Chrome y la comunidad de estándares de la Web quieren conocer tus experiencias con la API de Shape Detection.

Cuéntanos sobre el diseño de la API

¿Hay algo acerca de la API que no funciona como esperabas? ¿O faltan métodos o propiedades que necesitas para implementar tu idea? ¿Tienes alguna pregunta o comentario sobre el modelo de seguridad?

¿Tienes problemas con la implementación?

¿Encontraste un error en la implementación de Chrome? ¿La implementación es diferente de las especificaciones?

  • Informa un error en https://new.crbug.com. Asegúrate de incluir la mayor cantidad de detalles posible, instrucciones simples para reproducir el contenido y configura Componentes como Blink>ImageCapture. Glitch funciona muy bien para compartir repros rápidos y fáciles.

¿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 la importancia de admitirlas.

Vínculos útiles