Une interactivité du monde réel facile à utiliser.
Que se passe-t-il s'ils n'ont jamais besoin de le faire ? Et s'il orientait l'appareil photo de son téléphone vers le code UPC figurant sur l'emballage, et que votre site lui présente la bonne cartouche et un gros bouton rouge "Réorganiser" ?
Pensez à 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 repère historique. Imaginez l'identification de points de repère réels dans des jeux comme la géocaching ou les chasses au trésor.
Le Web Perception Toolkit permet d'effectuer ces scénarios basés sur l'appareil photo. Dans certains cas, vous pouvez même créer une expérience sans écrire de code.
Comment ça marche ?
Le kit Open Source Web Perception Toolkit vous permet d'ajouter la recherche visuelle à votre site Web. Elle transmet le flux de la caméra de l'appareil à un ensemble de détecteurs qui mappent des objets du monde réel, ici appelés "cibles", au 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 en savoir plus, consultez le guide de démarrage, la documentation de référence sur le kit, la démonstration sur le bac à sable d'E/S et les exemples de démonstration.
Données structurées
Le kit ne trouve pas la cible dans le champ de la caméra. Vous devez lui fournir des données JSON associées pour les cibles qu'il doit reconnaître. Ces données contiennent également des informations sur les cibles qui seront présentées à l'utilisateur.
Ces données sont tout ce dont vous avez besoin pour créer une expérience utilisateur comme celle illustrée ci-dessous. Si vous ne faites rien d'autre, Web Perception Toolkit peut identifier les cibles, puis afficher et masquer des fiches en fonction des informations fournies dans les données. Essayez par vous-même avec notre démonstration artifact-map.
Ajoutez des données à votre site à l'aide d'un fichier de données JSON associé, 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 ressemble à ceci:
[
{
"@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 voulez aller au-delà de l'expérience utilisateur par défaut ? Ce kit vous offre des événements de cycle de vie, des objets Card et Button pour créer l'expérience utilisateur autour de ces événements, ainsi qu'un moyen simple de styliser les cartes. Je vais vous présenter une partie de ce processus avec du code basé sur le guide de démarrage.
L'événement de cycle de vie le plus important est PerceivedResults, qui est déclenché chaque fois qu'une cible est trouvée. Une cible peut être un objet du monde réel ou un repère, tel qu'un code-barres ou un code QR.
Le processus pour répondre à cet événement est le même que pour tout autre événement, à une exception déjà mentionné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 ignorer 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 cet événement de plus près. L'événement lui-même contient des tableaux de repères et de cibles qu'il a à la fois trouvés et perdus. Lorsque des cibles sont trouvées dans le monde, l'événement déclenche et transmet des objets trouvés dans event.found. De même, lorsque les cibles passent de la vue de la caméra, l'événement se déclenche à nouveau, transmettant ainsi les objets perdus dans event.lost. Cela permet de prendre en compte les mouvements des mains et des repères : les caméras ne sont pas suffisamment stables, les repères ont été déposé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 montrez une fiche appropriée en fonction de ce que le kit 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.
}
}
L'ajout de cartes et de boutons consiste simplement à les instancier et à 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 le tout. Remarquez 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 qui, selon moi, est 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 les cartes
Web Perception Toolkit propose une mise en forme intégrée pour les cartes et les boutons à l'aide de la feuille de style par défaut. Mais vous pouvez facilement ajouter les vôtres. Les objets Card et ActionButton fournis contiennent des propriétés style (parmi de nombreuses autres) qui vous permettent d'apporter votre touche organisationnelle à l'aspect général. 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 je l'ai dit en haut de la page, ceci n'est pas une présentation exhaustive du Web Perception Toolkit. J'espère que cela vous donne une idée de la facilité avec laquelle il est possible 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 pour découvrir ses fonctionnalités.