La API de detección de formas (Shape Detection API): una imagen vale más que mil palabras, rostros y códigos de barras

# ¿Qué es la API de detección de formas?

Con API como navigator.mediaDevices.getUserMedia y el selector de fotos de Chrome para Android, se ha vuelto bastante fácil capturar imágenes o datos de video en vivo desde las cámaras del dispositivo, o cargar imágenes locales. Hasta ahora, estos datos de imágenes dinámicas, así como las imágenes estáticas en una página, no eran accesibles por código, aunque 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 querían extraer tales características en el cliente para construir un lector de códigos QR, tenían que depender de bibliotecas JavaScript externas. Esto podría resultar caro desde el punto de vista del rendimiento y aumentar el peso total de la página. Por otro lado, los sistemas operativos incluyendo Android, iOS y macOS, pero también los chips de hardware que se encuentran en los módulos de la cámara, normalmente ya tienen detectores de funciones altamente optimizados y de alto rendimiento, como el FaceDetector Android o el detector de funciones genéricas de iOS, CIDetector.

La API de detección de formas expone estas implementaciones a través de un conjunto de interfaces JavaScript. Actualmente, las funciones admitidas son la detección de rostros a través de la FaceDetector, la detección de códigos de barras a través de la 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 detección de formas 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 rostros

• Las redes sociales o los sitios para compartir fotos comúnmente permiten a sus usuarios anotar personas en imágenes. Al resaltar los límites de los rostros detectados, esta tarea se puede facilitar.
• Los sitios de contenido pueden recortar imágenes dinámicamente basándose en rostros potencialmente detectados en lugar de depender de otras heurísticas, o resaltar rostros detectados con efectos de panorámica y zoom similares al efecto Ken Burns en formatos similares a un story.
• Los sitios de mensajería multimedia pueden permitir a sus usuarios superponer objetos divertidos como gafas de sol o bigotes en los puntos de referencia detectados.

# Detección de códigos 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 utilizar códigos de barras para establecer conexiones sociales en aplicaciones de mensajería.
• Las aplicaciones de compras pueden permitir a sus usuarios escanear códigos de barras EAN o UPC de artículos en una tienda física para comparar precios en línea.
• Los aeropuertos pueden proporcionar quioscos web donde 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 pueden mejorar la accesibilidad del contenido de imágenes generado por el usuario agregando textos detectados como atributos alt para etiquetas de <img> cuando no se proporcionan otras descripciones.
• Los sitios de contenido pueden usar la detección de texto para evitar colocar encabezados sobre imágenes con contenido de texto.
• Las aplicaciones web pueden utilizar la detección de texto para traducir textos como, por ejemplo, menús de restaurantes.

# Estado actual

# Cómo utilizar la API de detección de formas

Si desea experimentar con la API de detección de formas localmente, habilite la #enable-experimental-web-platform-features en about://flags.

Las interfaces de los tres detectores, FaceDetector, BarcodeDetector y TextDetector , son similares. Todas proporcionan un único método asincrónico llamado detect() que toma ImageBitmapSource como entrada (es decir, CanvasImageSource, un Blob o ImageData).

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

Consulte atentamente la matriz de soporte en el explicador para obtener una descripción general de las diferentes plataformas.

# Trabajar con BarcodeDetector

El BarcodeDetector devuelve los valores sin procesar del código de barras que encuentra en ImageBitmapSource y los cuadros delimitadores, 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);
}

# Trabajar con FaceDetector

FaceDetector siempre devuelve los cuadros delimitadores de caras que detecta en ImageBitmapSource. Dependiendo de la plataforma, puede haber más información disponible 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);
}

# Trabajar con TextDetector

TextDetector siempre devuelve 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 características

Verificar exclusivamente la existencia de los constructores para detectar características de la API de detección de formas no es suficiente. La presencia de una interfaz no le dice si la plataforma subyacente es compatible con la función. Esto está funcionando según lo previsto. Es por eso que recomendamos un enfoque de programación defensiva al realizar una detección de características 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))();

La interfaz del BarcodeDetector se ha actualizado para incluir un método getSupportedFormats() y se han propuesto interfaces similares para FaceDetector y 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 le permite detectar la función específica que necesita, por ejemplo, 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 en particular 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. Se requiere Google Play Services para Android.

# Prácticas recomendadas

Todos los detectores funcionan de forma asincrónica, es decir, no bloquean el hilo principal. Por lo tanto, no confíe en la detección en tiempo real, sino más bien deje un tiempo para que el detector haga su trabajo.

Si eres fanático de 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 aplicación principal a través de postMessage(). La demostración muestra esto en acción.

No todas las implementaciones de plataforma admiten todas las funciones, así que asegúrese de verificar la situación de soporte cuidadosamente y use la API como una mejora progresiva. Por ejemplo, algunas plataformas pueden admitir la detección de rostros per se, 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 del mismo.

# Feedback

El equipo de Chrome y la comunidad de estándares web desean conocer sus experiencias con la API de detección de formas.

# 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 necesita para implementar su idea? ¿Tiene alguna pregunta o comentario sobre el modelo de seguridad?

• Presenta un problema de especificación en el repositorio de GitHub de la API de detección de formas o agregue sus comentarios a un problema existente.

# ¿Problemas con la implementación?

¿Encontraste un error con la implementación de Chrome? ¿O la implementación es diferente de la especificación?

• Presenta un error en https://new.crbug.com. Asegúrese de incluir todos los detalles que pueda, instrucciones sencillas para reproducir y configure Componentes en Blink>ImageCapture. Glitch funciona muy bien para compartir repros rápidos y fáciles.

# ¿Planea utilizar la API?

¿Planea utilizar la API de detección de formas en su sitio? Su apoyo público nos ayuda a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es brindarles soporte.

• Comparta cómo planea usarlo en el hilo de WICG de Discourse.
• Envíe un tweet a @ChromiumDev usando el hashtag#ShapeDetection y déjanos saber dónde y cómo la está usando.

# Enlaces útiles

• Explicador público
• Demostración de API | Código fuente de la demostración de API
• Seguimiento de errores
• Entrada de ChromeStatus.com
• Componente Blink: Blink>ImageCapture