Código QR escaneado por un teléfono móvil

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

La API de detección de formas detecta rostros, códigos de barras y texto en imágenes.

Published on Updated on

Translated to: English, Português, 한국어

Esta API es parte del proyecto de nuevas funcionalidades. La detección de códigos de barras se lanzó en Chrome 83. La detección de rostros y texto está disponible detrás de una bandera. Esta publicación se actualizará a medida que la API de detección de formas evolucione.

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

Precaución

La detección de texto, a pesar de ser un campo interesante, no se considera lo suficientemente estable en plataformas informáticas o conjuntos de caracteres para estandarizarse en este momento, por lo que la detección de texto se ha trasladado a una especificación informativa separada.

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

PasoEstado
1. Crear un explicadorCompleto
2. Crear borrador inicial de especificaciónEn curso
3. Recopilar comentarios e iterar el diseñoEn curso
4. Prueba de origenCompleto
5. LanzamientoDetección de código de barras Completo
Detección facial En curso
Detección de texto En curso

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

Advertencia

Hasta ahora, solo la detección de códigos de barras está disponible de forma predeterminada, comenzando en Chrome 83, pero la detección de rostros y texto está disponible detrás de una bandera. Siempre puede usar la API de detección de formas para experimentos locales habilitando la bandera #enable-experimental-web-platform-features.

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.

Gotchas

Si su ImageBitmapSource tiene un origen de script efectivo que no es el mismo que el origen de script efectivo del documento, los intentos de llamar a detect() fallarán con una nueva SecurityError DOMException. Si el origen de su imagen es compatible con CORS, puede utilizar el crossorigin para solicitar acceso a CORS.

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.

Precaución

El reconocimiento de texto no está disponible universalmente.

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.

Precaución

Esta API es una optimización y no algo garantizado que esté disponible en la plataforma para todos los usuarios. Se espera que los desarrolladores combinen esto con su propio código de reconocimiento de imágenes y aprovechen la optimización de la plataforma cuando esté disponible.

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?

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

Enlaces útiles

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.