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.

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

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

Par exemple, auparavant, si les développeurs voulaient extraire ces caractéristiques le client pour créer un lecteur de code QR, il avait à s'appuyer sur des bibliothèques JavaScript externes. Cela peut coûter cher sur les performances et augmenter la taille globale de la page. De l'autre les systèmes d'exploitation comme Android, iOS et macOS, mais aussi présents dans les modules de caméra, ont généralement déjà des performances et des détecteurs de fonctionnalités optimisés, FaceDetector ou le détecteur de fonctionnalités génériques d’iOS, CIDetector

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

Cas d'utilisation suggérés

Comme indiqué ci-dessus, l'API Shape Detection prend actuellement en charge la détection de visages, de codes-barres et de texte. La liste à puces suivante contient des exemples de cas d'utilisation de ces trois fonctionnalités.

Détection de visages

  • Les réseaux sociaux en ligne ou les sites de partage de photos permettent généralement à leurs utilisateurs pour 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 façon dynamique en fonction des des visages plutôt que d'utiliser d'autres méthodes heuristiques, ou surligner certains visages détectés avec des contenus sur le thème de Ken Burns des effets de panoramique et de zoom dans des formats narratifs.
  • Les sites de messagerie multimédia peuvent permettre à leurs utilisateurs de superposer des objets amusants tels que lunettes de soleil ou moustaches sur les points de repère faciales détectés.

Détection de codes-barres

  • Les applications Web qui lisent des codes QR peuvent déverrouiller des cas d'utilisation intéressants, comme ou la navigation sur le Web, ou utiliser des codes-barres pour établir des relations des connexions sur les applications de messagerie.
  • Les applications de shopping peuvent autoriser leurs utilisateurs à scanner EAN ou Codes-barres UPC de articles dans un magasin physique pour comparer les prix en ligne.
  • Les aéroports peuvent fournir des kiosques Web sur lesquels les usagers peuvent scanner leur embarquement cartes Les codes aztèques à afficher des informations personnalisées concernant leurs vols.

Détection de texte

  • Les sites de réseaux sociaux en ligne peuvent améliorer l'accessibilité image générée par l'utilisateur 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 des des images principales contenant du texte.
  • Les applications Web peuvent utiliser la détection de texte pour traduire des textes tels que : par exemple, les menus de restaurant.

État actuel

Étape État
1. Créer une vidéo explicative Fin
2. Créer l'ébauche initiale de la spécification Fin
3. Recueillir des commentaires et itérer sur la conception In progress
4. Phase d'évaluation Fin
5. Lancement Détection de code-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 Shape Detection localement, activer #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é detect(), qui prend une ImageBitmapSource comme entrée (c'est-à-dire CanvasImageSource, un Blob ou ImageData).

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

Veuillez vérifier attentivement la matrice d'assistance dans le explicateur pour obtenir un aperçu des différentes plates-formes.

Utiliser BarcodeDetector

Le 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 la ImageBitmapSource. Selon la plate-forme, vous pouvez obtenir concernant les points de repère (y compris les yeux, le nez ou la bouche) peuvent être détectés. Il est important de noter 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 personnages 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 caractéristiques

Vérification simple de l'existence des constructeurs pour détecter les caractéristiques L'API Shape Detection ne suffit pas. La présence d'une interface ne vous indique pas si la plate-forme sous-jacente est compatible avec cette fonctionnalité. Cela fonctionne comme prévu. C'est pourquoi nous recommandons une approche de programmation défensive, qui consiste à détecter les caractéristiques comme ceci:

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(). Des interfaces similaires ont été proposées pour FaceDetector et pendant 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 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 les fonctionnalités peuvent varier d'une plate-forme à l'autre. Les développeurs doivent donc être encouragés à vérifier précisément les capacités (par exemple, un code-barres ou un repère facial spécifique) dont ils ont besoin.

Systèmes d'exploitation compatibles

La détection des codes-barres est disponible sur macOS, ChromeOS et Android. Services Google Play sont obligatoires sur Android.

Bonnes pratiques

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

Si vous êtes fan de Web Workers vous serez heureux d'apprendre que vos détecteurs y sont également exposés. Les résultats de détection sont sérialisables et peuvent donc être transmis par le nœud de calcul à l'application principale via postMessage(). La démonstration illustre ce processus en action.

Les implémentations de plate-forme ne sont pas toutes compatibles avec toutes les fonctionnalités. Assurez-vous donc la situation d'assistance et d'utiliser l'API de façon progressive l'amélioration. Par exemple, certaines plates-formes peuvent prendre en charge la détection de visages en soi, mais pas la détection de points de repère (yeux, nez, bouche, etc.) ; ou et l'emplacement du texte peuvent être reconnus, mais pas son contenu.

Commentaires

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

Présentez-nous la conception de l'API

Y a-t-il un aspect de l'API qui ne fonctionne pas comme prévu ? Ou s'il manque des méthodes ou des propriétés pour implémenter votre idée ? Vous avez une question ou un commentaire sur le modèle de sécurité ?

Vous rencontrez un problème lors de l'implémentation ?

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

  • Signalez un bug sur https://new.crbug.com. Veillez à inclure au fur et à mesure le plus de détails possible, des instructions simples pour le reproduire et Composants dans Blink>ImageCapture. Glitch est idéal pour partager des répétitions rapidement et facilement.

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 il est essentiel de les soutenir.

Liens utiles