Interactivité facile à utiliser dans le monde réel
Et s'il n'en a jamais besoin ? Et s'il pouvait pointer l'appareil photo de son téléphone vers le code UPC figurant sur le colis et que votre site lui présentait la cartouche appropriée et un gros bouton rouge intitulé "Réorganiser" ?
Imaginez d'autres façons d'utiliser une caméra sur un site. Imaginez un site qui prend en charge la vérification des prix en magasin. Imaginez obtenir des informations sur une exposition de musée ou un monument historique. Imaginez identifier des points de repère du monde réel dans des jeux comme le géocaching ou la chasse au trésor.
Le kit de perception Web permet de réaliser ces scénarios basés sur la caméra. Dans certains cas, vous pouvez même créer une expérience sans avoir à écrire de code.
Fonctionnement
Le Web Perception Toolkit Open Source vous aide à ajouter la recherche visuelle à votre site Web. Il transmet un flux de caméra d'appareil via un ensemble de détecteurs qui mappent des objets réels, ici appelés "cibles", sur le contenu de votre site. Ce mappage est défini à l'aide de données structurées (JSON-LD) sur votre site. Grâce à ces données, vous pouvez présenter les bonnes informations dans une UI personnalisable.
Je vais vous en montrer suffisamment pour vous donner un aperçu de son fonctionnement. Pour une explication complète, consultez le guide de démarrage, la documentation de référence du kit d'outils, la démo de l'I/O Sandbox et les exemples de démonstrations.
Données structurées
Le kit ne peut pas trouver n'importe quelle cible dans le champ de la caméra. Vous devez lui fournir des données JSON associées pour les cibles que vous souhaitez qu'il reconnaisse. Ces données contiennent également des informations sur les cibles qui seront présentées à l'utilisateur.
Les données sont tout ce dont vous avez besoin pour créer une expérience utilisateur comme celle de l'image ci-dessous. Si vous ne faites rien d'autre, le Web Perception Toolkit peut identifier des cibles, puis afficher et masquer des fiches en fonction des informations fournies dans les données. Essayez par vous-même en utilisant notre démonstration artifact-map.
Ajoutez des données à votre site à l'aide d'un fichier de données associé au format JSON, inclus à l'aide d'une balise <script> et du type MIME "application/ld+json".
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
Le fichier lui-même se présente comme suit :
[
{
"@context": "https://schema.googleapis.com/",
"@type": "ARArtifact",
"arTarget": {
"@type": "Barcode",
"text": "012345678912"
},
"arContent": {
"@type": "WebPage",
"url": "http://localhost:8080/demo/artifact-map/products/product1.html",
"name": "Product 1",
"description": "This is a product with a barcode",
"image": "http://localhost:8080/demo/artifact-map/products/product1.png"
}
}
]
L'expérience utilisateur
Que faire si vous souhaitez aller plus loin que l'expérience utilisateur par défaut ? La boîte à outils vous fournit des événements de cycle de vie, des objets de carte et de bouton pour créer l'expérience utilisateur autour de ces événements, et un moyen simple de styliser les cartes. Je vais en montrer un peu plus avec du code en m'appuyant sur notre guide de démarrage.
L'événement de cycle de vie le plus important est PerceivedResults, qui se déclenche chaque fois qu'une cible est détectée. Une cible peut être un objet réel ou un repère, comme un code-barres ou un code QR.
La procédure de réponse à cet événement est la même que pour tout autre événement avec une exception déjà évoquée. Si vous n'implémentez pas l'événement, une interface utilisateur est automatiquement créée à l'aide de données structurées. Pour remplacer ce comportement, démarrez votre gestionnaire d'événements en appelant event.preventDefault().
const container = document.querySelector('.container');
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing.
event.preventDefault();
// Process the event.
}
window.addEventListener(PerceptionToolkit.Events.PerceivedResults, onPerceivedResults);
Examinons l'événement de plus près. L'événement lui-même contient des tableaux de repères et de cibles qu'il a trouvés et perdus. Lorsque des cibles sont détectées dans le monde, l'événement se déclenche et transmet les objets trouvés dans event.found. De même, lorsque des cibles quittent la vue de la caméra, l'événement se déclenche à nouveau, en transmettant des objets perdus dans event.lost. Cela permet de tenir compte des mouvements de la main et des repères : caméras pas assez stables, repères lâchés, etc.
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
// Deal with lost and found objects.
}
Ensuite, vous affichez une fiche appropriée en fonction de ce que le kit d'outils a trouvé.
async function onPerceivedResults(event) {
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
if (found.length === 0 && lost.length === 0) {
// Object not found.
// Show a card with an offer to show the catalog.
} else if (found.length > 0) {
// Object found.
// Show a card with a reorder button.
}
}
Pour ajouter des fiches et des boutons, il suffit de les instancier et de les ajouter à un objet parent. Exemple :
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Enfin, voici à quoi ressemble l'ensemble. Notez les commodités que j'ai ajoutées à l'expérience utilisateur. Que le repère soit trouvé ou non, je fournis un accès en un clic à ce que je pense être le plus utile dans les circonstances.
async function onPerceivedResults(event) {
// preventDefault() to stop default result Card from showing
event.preventDefault();
if (container.childNodes.length > 0) { return; }
const { found, lost } = event.detail;
const { ActionButton, Card } = PerceptionToolkit.Elements;
if (found.length === 0 && lost.length === 0) {
//Make a view catalog button.
const button = new ActionButton();
button.label = 'View catalog';
button.addEventListener('click', () => {
card.close();
//Run code to launch a catalog.
});
//Make a card for the button.
const card = new Card();
card.src = 'We wish we could help, but that\'s not our razor. Would you like to see our catalog?';
card.appendChild(button);
//Tell the toolkit it does not keep the card around
// if it finds something it recognizes.
card.dataset.notRecognized = true;
container.appendChild(card);
} else if (found.length > 0) {
//Make a reorder button.
const button = new ActionButton();
button.label = 'Reorder';
botton.addEventListener('click', () => {
card.close();
//Run code to reorder.
})
const card = new Card();
card.src = found[0].content;
card.appendChild(button);
container.appendChild(card);
}
}
Mettre en forme des fiches
Le Web Perception Toolkit fournit une mise en forme intégrée pour les cartes et les boutons avec la feuille de style par défaut. Mais vous pouvez facilement en ajouter. Les objets Card et ActionButton fournis contiennent des propriétés style (parmi de nombreuses autres) qui vous permettent d'apporter une touche organisationnelle. Pour inclure la feuille de style par défaut, ajoutez un élément <link> à votre page.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Conclusion
Comme indiqué en haut de cet article, il ne s'agit pas d'un examen exhaustif du kit d'outils de perception Web. Nous espérons que vous avez compris à quel point il est facile d'ajouter la recherche visuelle à un site Web. Pour en savoir plus, consultez le guide de démarrage et les exemples de démonstrations. Consultez la documentation du kit d'outils pour découvrir ses fonctionnalités.