API Shape Detection: une image vaut mille mots, visages et codes-barres

L'API Shape Detection détecte les visages, les codes-barres et le texte dans les images.

Thomas Steiner

Qu'est-ce que l'API Shape Detection ?

Avec des API telles que navigator.mediaDevices.getUserMedia et le sélecteur de photos de Chrome pour Android, il est devenu assez facile de capturer des images ou des données vidéo en direct à partir des caméras de l'appareil, ou d'importer des images locales. Jusqu'à présent, ces données d'image dynamiques, ainsi que les images statiques d'une page, n'étaient pas accessibles par code, même si les images peuvent contenir de nombreuses fonctionnalités intéressantes telles que des visages, des codes-barres et du texte.

Par exemple, auparavant, si les développeurs souhaitaient extraire de telles fonctionnalités sur le client pour créer un lecteur de code QR, ils devaient s'appuyer sur des bibliothèques JavaScript externes. Cela peut être coûteux d'un point de vue des performances et augmenter le poids global de la page. D'autre part, les systèmes d'exploitation, y compris Android, iOS et macOS, mais aussi les puces matérielles présentes dans les modules photo, disposent généralement déjà de détecteurs de caractéristiques performants et hautement optimisés, tels que FaceDetector sur Android ou le détecteur de caractéristiques génériques d'iOS, CIDetector.

L'API Shape Detection expose ces implémentations via un ensemble d'interfaces JavaScript. Actuellement, les fonctionnalités prises en charge sont la détection de visage via l'interface FaceDetector, la détection de codes-barres via l'interface BarcodeDetector et la détection de texte (reconnaissance optique des caractères, OCR) via l'interface TextDetector.

Suggestions de cas d'utilisation

Comme indiqué ci-dessus, l'API de détection de forme est actuellement compatible avec la détection de visages, de codes-barres et de texte. La liste à puces suivante contient des exemples de cas d'utilisation pour les trois fonctionnalités.

Détection de visages

  • Les sites de réseaux sociaux ou de partage de photos en ligne permettent généralement à leurs utilisateurs d'annoter des personnes sur des images. En mettant en surbrillance les limites des visages détectés, cette tâche peut être facilitée.
  • Les sites de contenu peuvent recadrer dynamiquement les images en fonction des visages potentiellement détectés plutôt que de s'appuyer sur d'autres heuristiques, ou mettre en avant les visages détectés avec des effets de panoramique et de zoom Ken Burns dans des formats de type story.
  • Les sites de messagerie multimédia peuvent permettre à leurs utilisateurs de superposer des objets amusants, comme des lunettes de soleil ou des moustaches, sur les points de repère du visage détectés.

Détection de codes-barres

  • Les applications Web qui lisent les codes QR peuvent ouvrir des cas d'utilisation intéressants, comme les paiements en ligne ou la navigation sur le Web, ou utiliser des codes-barres pour établir des connexions sociales sur des applications de messagerie.
  • Les applications de shopping peuvent permettre à leurs utilisateurs de scanner les codes-barres EAN ou UPC des articles dans un magasin physique pour comparer les prix en ligne.
  • Les aéroports peuvent fournir des bornes Web sur lesquelles les passagers peuvent scanner les codes Aztec de leurs cartes d'embarquement pour afficher des informations personnalisées sur leurs vols.

Détection de texte

  • Les sites de réseaux sociaux en ligne peuvent améliorer l'accessibilité du contenu image généré par les utilisateurs en ajoutant les textes détectés en tant qu'attributs alt pour les balises <img> lorsqu'aucune autre description n'est fournie.
  • Les sites de contenu peuvent utiliser la détection de texte pour éviter de placer des titres au-dessus d'images principales contenant du texte.
  • Les applications Web peuvent utiliser la détection de texte pour traduire des textes tels que des menus de restaurant, par exemple.

État actuel

Étape État
1. Créer un message d'explication Fin
2. Créer une première ébauche de la spécification Fin
3. Recueillir des commentaires et itérer sur la conception In progress
4. Essai Origin Fin
5. Lancement Détection de codes-barres terminée
Détection de visages En cours
Détection de texte en cours

Utiliser l'API Shape Detection

Si vous souhaitez tester l'API de détection de forme en local, activez l'indicateur #enable-experimental-web-platform-features dans about://flags.

Les interfaces des trois détecteurs, FaceDetector, BarcodeDetector et TextDetector, sont similaires. Elles fournissent toutes une seule méthode asynchrone appelée detect() qui prend un ImageBitmapSource comme entrée (c'est-à-dire un CanvasImageSource, un Blob ou un ImageData).

Pour FaceDetector et BarcodeDetector, des paramètres facultatifs peuvent être transmis au constructeur du détecteur, ce qui permet de fournir des indices aux détecteurs sous-jacents.

Veuillez consulter attentivement la matrice d'assistance dans la présentation pour obtenir un aperçu des différentes plates-formes.

Utiliser BarcodeDetector

BarcodeDetector renvoie les valeurs brutes des codes-barres qu'il trouve dans ImageBitmapSource et les rectangles de délimitation, ainsi que d'autres informations telles que les formats des codes-barres détectés.

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);
}

Utiliser FaceDetector

FaceDetector renvoie toujours les cadres de délimitation des visages qu'il détecte dans ImageBitmapSource. Selon la plate-forme, d'autres informations sur les repères du visage, comme les yeux, le nez ou la bouche, peuvent être disponibles. Notez que cette API ne détecte que les visages. Elle n'identifie pas à qui appartient un visage.

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);
}

Utiliser TextDetector

TextDetector renvoie toujours les cadres de délimitation des textes détectés et, sur certaines plates-formes, les caractères reconnus.

const textDetector = new TextDetector();
try {
  const texts = await textDetector.detect(image);
  texts.forEach(text => textToSpeech(text));
} catch (e) {
  console.error('Text detection failed:', e);
}

Détection de fonctionnalités

La simple vérification de l'existence des constructeurs pour détecter la fonctionnalité de l'API de détection de forme ne suffit pas. La présence d'une interface ne vous indique pas si la plate-forme sous-jacente est compatible avec la fonctionnalité. Il s'agit d'un fonctionnement normal. C'est pourquoi nous vous recommandons d'adopter une approche de programmation défensive en effectuant la détection des fonctionnalités comme suit:

const supported = await (async () => 'FaceDetector' in window &&
    await new FaceDetector().detect(document.createElement('canvas'))
    .then(_ => true)
    .catch(e => e.name === 'NotSupportedError' ? false : true))();

L'interface BarcodeDetector a été mise à jour pour inclure une méthode getSupportedFormats(), et des interfaces similaires ont été proposées pour FaceDetector et 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"
  ]
*/

Cela vous permet de détecter la fonctionnalité spécifique dont vous avez besoin, par exemple le scan de code QR:

if (('BarcodeDetector' in window) &&
    ((await BarcodeDetector.getSupportedFormats()).includes('qr_code'))) {
  console.log('QR code scanning is supported.');
}

Cette approche est préférable à la dissimulation des interfaces, car même d'une plate-forme à l'autre, les fonctionnalités peuvent varier. Les développeurs doivent donc être encouragés à vérifier précisément la fonctionnalité (par exemple, un format de code-barres ou un repère facial particulier) dont ils ont besoin.

Systèmes d'exploitation compatibles

La détection de codes-barres est disponible sur macOS, ChromeOS et Android. Les services Google Play sont requis sur Android.

Bonnes pratiques

Tous les détecteurs fonctionnent de manière asynchrone, c'est-à-dire qu'ils ne bloquent pas le thread principal. Ne vous appuyez donc pas sur la détection en temps réel, mais laissez le détecteur faire son travail.

Si vous êtes fan des Web Workers, vous serez ravi d'apprendre que les détecteurs y sont également exposés. Les résultats de détection sont sérialisables et peuvent donc être transmis du nœud de calcul à l'application principale via postMessage(). La démonstration montre comment cela fonctionne.

Toutes les implémentations de plate-forme ne sont pas compatibles avec toutes les fonctionnalités. Veillez donc à vérifier attentivement la compatibilité et à utiliser l'API comme une amélioration progressive. Par exemple, certaines plates-formes peuvent prendre en charge la détection de visage en soi, mais pas la détection des points de repère du visage (yeux, nez, bouche, etc.). L'existence et l'emplacement du texte peuvent également être reconnus, mais pas son contenu.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent connaître votre expérience avec l'API de détection de forme.

Parlez-nous de la conception de l'API

L'API ne fonctionne-t-elle pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour implémenter votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ?

Problème d'implémentation ?

Avez-vous trouvé un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente de la spécification ?

  • Signalez un bug sur https://new.crbug.com. Veillez à inclure autant de détails que possible, des instructions simples pour reproduire le problème et définissez Components sur Blink>ImageCapture. Glitch est idéal pour partager des reproductions rapides et faciles.

Vous prévoyez d'utiliser l'API ?

Vous prévoyez d'utiliser l'API Shape Detection sur votre site ? Votre soutien public nous aide à hiérarchiser les fonctionnalités et montre aux autres fournisseurs de navigateurs à quel point il est essentiel de les prendre en charge.

Liens utiles