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é ?
- Signalez un problème de spécification dans le dépôt GitHub de l'API Shape Detection. ou ajouter vos réflexions à un problème existant.
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.
- Expliquez comment vous prévoyez de l'utiliser dans le fil de discussion du discours de WiCG.
- Envoyez un tweet à @ChromiumDev en utilisant le hashtag.
#ShapeDetection
et n'hésitez pas à nous dire où et comment vous l'utilisez.
Liens utiles
- Explication publique
- Démonstration de l'API | Source de démonstration de l'API
- Bug de suivi
- Entrée ChromeStatus.com
- Composant Blink:
Blink>ImageCapture