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 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?

¿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.

Vínculos útiles