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 las imágenes.

Thomas Steiner

¿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 desde las cámaras del dispositivo, o subir imágenes locales. Hasta el momento, no se podía acceder a estos datos de imágenes dinámicas, así como a las imágenes estáticas de una página, a través de código, a pesar de que las imágenes pueden contener muchas funciones 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ódigos QR, debían depender de 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, incluidos Android, iOS y macOS, pero también los chips de hardware que se encuentran en los módulos de cámara, suelen tener detectores de características de alto rendimiento y muy optimizados, como FaceDetector de Android o el detector de características 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 admitidas son la detección de rostros a través de la interfaz FaceDetector, la detección de códigos de barras a través de 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 actualmente admite 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

  • Los sitios de redes sociales o de uso compartido de fotos en línea suelen permitir que sus usuarios agreguen anotaciones a las personas en las imágenes. Si se destacan 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 paneo y zoom similares a los de Ken Burns en formatos de historia.
  • Los sitios de mensajería multimedia pueden permitir que sus usuarios superpongan objetos divertidos, como lentes de sol o bigotes, en los puntos de referencia de rostro 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 aplicaciones de compras pueden permitir que los usuarios escaneen los códigos de barras EAN o UPC de los artículos en una tienda física para comparar precios en línea.
  • Los aeropuertos pueden proporcionar kioscos web en los que los pasajeros puedan 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 generado por 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 imágenes hero con texto contenido.
  • Las aplicaciones web pueden usar la detección de texto para traducir textos, como los menús de restaurantes.

Estado actual

Paso Estado
1. Crea una explicación Completar
2. Crea un borrador inicial de la especificación Completar
3. Recopila comentarios y itera en el diseño En curso
4. Prueba de origen Completar
5. Lanzamiento Detección de códigos 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 solo método asíncrono llamado detect() que toma un ImageBitmapSource como entrada (es decir, un CanvasImageSource, un Blob o un ImageData).

Para FaceDetector y BarcodeDetector, se pueden pasar parámetros opcionales al constructor del detector que permiten proporcionar sugerencias a los detectores subyacentes.

Revisa cuidadosamente la matriz de compatibilidad en 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 delimitados, así como 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 los rostros que detecta en ImageBitmapSource. Según la plataforma, es posible que haya más información sobre los puntos de referencia del rostro, como los ojos, la nariz o la 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 de límite 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 atributos

No es suficiente verificar solo la existencia de los constructores para detectar la API de Shape Detection. 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 mediante la detección de atributos de la siguiente manera:

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

Esto te permite 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 porque, incluso entre 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 o un punto de referencia facial) que requieren.

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 espera un poco mientras el detector hace su trabajo.

Si eres fan de los trabajadores web, te alegrará saber que los detectores también se exponen 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(). En la demostración, se muestra esto en acción.

No todas las implementaciones de plataformas admiten todas las funciones, por lo que debes verificar la situación de compatibilidad con cuidado y usar la API como una mejora progresiva. Por ejemplo, es posible que algunas plataformas admitan la detección de rostros per se, pero no la detección de puntos de referencia de rostros (ojos, nariz, boca, etcétera). También es posible que se reconozca la existencia y la ubicación del texto, pero no su contenido.

Comentarios

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

Cuéntanos sobre el diseño de la API

¿Hay algo en 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? ¿O la implementación es diferente de la especificación?

  • Informa un error en https://new.crbug.com. Asegúrate de incluir la mayor cantidad de detalles posible, instrucciones simples para reproducirlo y establecer Componentes en Blink>ImageCapture. Glitch es excelente para compartir reproducciones rápidas y fáciles.

¿Tienes pensado usar la API?

¿Planeas usar la API de Shape Detection en tu sitio? Tu apoyo público nos ayuda a priorizar las funciones y les muestra a otros proveedores de navegadores lo importante que es admitirlas.

Vínculos útiles