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 des 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 des appareils, 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 du code, même si les images peuvent en fait contenir de nombreuses caractéristiques intéressantes, telles que des visages, des codes-barres et du texte.

Par exemple, auparavant, si les développeurs voulaient 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 du point de vue des performances et augmenter la taille globale de la page. D'autre part, des systèmes d'exploitation tels qu'Android, iOS et macOS, ainsi que les puces matérielles présentes dans les modules de caméra, disposent généralement déjà de détecteurs de fonctionnalités performants et hautement optimisés, tels qu'Android FaceDetector ou CIDetector, le détecteur de fonctionnalités générique iOS.

L'API Shape Detection expose ces implémentations via un ensemble d'interfaces JavaScript. Actuellement, les fonctionnalités compatibles sont la détection des visages 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) via l'interface TextDetector.

Cas d'utilisation suggérés

Comme indiqué ci-dessus, l'API Shape Detection 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 dans des images. En mettant en évidence les limites des visages détectés, cette tâche peut être facilitée.
  • Les sites de contenu peuvent recadrer les images de manière dynamique en fonction des visages potentiellement détectés au lieu de s'appuyer sur d'autres méthodes heuristiques, ou mettre en évidence les visages détectés à l'aide d'effets de panoramique et de zoom de type Ken Burns, dans des formats semblables à ceux d'un article.
  • Les sites de messagerie multimédia peuvent permettre à leurs utilisateurs de superposer des objets amusants tels que des lunettes de soleil ou des moustaches sur les points de repère identifiés.

Détection de codes-barres

  • Les applications Web qui lisent les codes QR peuvent débloquer des cas d'utilisation intéressants, tels que les paiements en ligne ou la navigation sur le Web, ou utiliser des codes-barres pour établir des contacts sur les applications de messagerie.
  • Les applications de shopping peuvent permettre aux utilisateurs de scanner les codes-barres EAN ou UPC des articles d'un magasin physique pour comparer les prix en ligne.
  • Les aéroports peuvent fournir des kiosques Web permettant aux passagers de scanner les codes Aztec de leurs cartes d'embarquement afin d'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é des images générées 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 sur les images héros contenant du texte.
  • Les applications Web peuvent utiliser la détection de texte pour traduire des textes tels que des menus de restaurant.

État actuel

Step État
1. Créer une vidéo explicative Fin
2. Créer un brouillon initial de la spécification Fin
3. Recueillir des commentaires et itérer la conception In progress
4. Phase d'évaluation Fin
5. Lancement Détection de code-barres Terminée
Détection des visages en cours
Détection de texte en cours

Utiliser l'API Shape Detection

Si vous souhaitez tester l'API Shape Detection localement, activez l'option #enable-experimental-web-platform-features dans about://flags.

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

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

Veuillez consulter attentivement la matrice de compatibilité dans l'explication pour obtenir une présentation des différentes plates-formes.

Utiliser BarcodeDetector

BarcodeDetector renvoie les valeurs brutes du code-barres qu'il trouve dans le ImageBitmapSource et les cadres 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, plus d'informations sur les repères de visage tels que les yeux, le nez ou la bouche peuvent être disponibles. Il est important de noter que cette API ne détecte que les visages. Elle n'identifie pas à qui un visage appartient.

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 les fonctionnalités de l'API Shape Detection ne suffit pas. La présence d'une interface ne vous indique pas si la plate-forme sous-jacente prend en charge la fonctionnalité. Cela fonctionne comme prévu. C'est pourquoi nous recommandons une approche de programmation défensive en effectuant une détection de caractéristiques 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 afin d'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é dont vous avez besoin, par exemple le lecteur de code QR:

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

C'est mieux que de masquer les interfaces, car même d'une plate-forme à l'autre, les capacités peuvent varier. Les développeurs doivent donc être encouragés à vérifier précisément la capacité (comme un format de code-barres ou un point de repère faciale 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 fiez donc pas à la détection en temps réel, mais laissez plutôt un certain temps au détecteur pour faire son travail.

Si vous êtes fan de Web Workers, vous serez heureux 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 illustre ce processus.

Toutes les implémentations de plate-forme ne sont pas compatibles avec toutes les fonctionnalités. Par conséquent, vérifiez attentivement la situation de l'assistance et utilisez l'API pour l'améliorer progressivement. Par exemple, certaines plates-formes peuvent être compatibles avec la détection des visages en soi, mais pas la détection des points de repère de visage (yeux, nez, bouche, etc.). L'existence et l'emplacement du texte peuvent être reconnus, mais pas le contenu textuel.

Commentaires

L'équipe Chrome et la communauté des normes Web souhaitent en savoir plus sur votre expérience avec l'API Shape Detection.

Décrivez-nous la conception de l'API.

Y a-t-il quelque chose dans l'API qui ne fonctionne pas comme prévu ? Ou manque-t-il des méthodes ou des propriétés dont vous avez besoin pour mettre en œuvre votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ?

Un problème d'implémentation ?

Avez-vous détecté un bug dans l'implémentation de Chrome ? Ou l'implémentation est-elle différente des spécifications ?

  • Signalez un bug à l'adresse https://new.crbug.com. Veillez à inclure autant de détails que possible, à des instructions simples pour reproduire le problème et à définir l'option Composants 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 assistance publique 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