Ricerca visiva con il Web Perception Toolkit

Interattività reale facile da usare.

Joe Medley
Joe Medley
Non sarebbe fantastico se gli utenti potessero cercare sul tuo sito utilizzando la videocamera? Immagina. Il tuo sito è Rasoio Sbarbato. I tuoi clienti ti dicono di avere difficoltà a trovare le cartucce giuste per il loro rasoio quando effettuano un nuovo ordine. Non conoscono le parole chiave giuste per la ricerca dei tuoi prodotti. E, diciamocelo, probabilmente non lo faranno mai.

E se non ne avesse mai bisogno? E se potessero inquadrare il codice UPC sulla confezione con la fotocamera del telefono e il tuo sito potesse mostrare la cartuccia giusta e un grande pulsante rosso "Riordina"?

Pensa ad altri modi in cui puoi utilizzare una videocamera su un sito. Immagina un sito che supporta il controllo del prezzo in negozio. Immagina di ricevere informazioni su una mostra del museo o su una targa storica. Immagina di identificare punti di riferimento reali nei giochi come il geocaching o le cacce al tesoro.

Web Perception Toolkit rende possibili questi scenari basati su videocamere. In alcuni casi puoi persino creare un'esperienza senza scrivere codice.

Come funziona?

Web Perception Toolkit open source ti aiuta ad aggiungere la ricerca visiva al tuo sito web. Trasmette uno stream della fotocamera del dispositivo attraverso un insieme di rilevatori che mappano gli oggetti reali, qui chiamati "target", ai contenuti del tuo sito. Questa mappatura è definita utilizzando i dati strutturati (JSON-LD) sul tuo sito. Con questi dati, puoi presentare le informazioni giuste in un'UI personalizzabile.

Ti mostrerò abbastanza per farti capire come funziona. Per una spiegazione completa, consulta la guida Inizia, la documentazione di riferimento del kit di strumenti, la demo di Privacy Sandbox e le demo di esempio.

Dati strutturati

Il kit di strumenti non può trovare un bersaglio qualsiasi nel campo visivo della videocamera. Devi fornire i dati JSON collegati per i target che vuoi che vengano riconosciuti. Questi dati contengono anche informazioni sui target che verranno mostrati all'utente.

I dati sono tutto ciò che ti serve per creare un'esperienza utente come quella nell'immagine di seguito. Se non fai altro, Web Perception Toolkit può identificare i target, poi mostrare e nascondere le schede in base alle informazioni fornite nei dati. Prova questa funzionalità con la nostra demo mappa degli elementi.

L'interfaccia predefinita è disponibile utilizzando solo i dati collegati.
Interfaccia predefinita.

Aggiungi dati al tuo sito con un file di dati JSON collegato, incluso utilizzando un tag <script> e il tipo MIME "application/ld+json".

<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">

Il file stesso ha il seguente aspetto:

[
 
{
   
"@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'esperienza utente

Cosa succede se vuoi più dell'esperienza utente predefinita? Il kit di strumenti fornisce eventi di ciclo di vita, oggetti Card e Button per creare l'esperienza utente in base a questi eventi e un modo semplice per applicare uno stile alle schede. Ti mostrerò un po' di questo con il codice basato liberamente sulla nostra guida Introduzione.

L'evento del ciclo di vita più importante è PerceivedResults, che viene attivato ogni volta che viene trovato un target. Un target può essere un oggetto reale o un indicatore come un codice a barre o un codice QR.

La procedura per rispondere a questo evento è la stessa di qualsiasi altro evento, con un'eccezione già accennata. Se non implementi l'evento, viene creata automaticamente un'interfaccia utente utilizzando i dati strutturati. Per eseguire l'override di questo comportamento, avvia il gestore eventi chiamandoevent.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);

Diamo un'occhiata più da vicino all'evento. L'evento stesso contiene array di indicatori e target trovati e persi. Quando vengono trovati target nel mondo, l'evento viene attivato e gli oggetti trovati vengono trasmessi in event.found. Analogamente, quando i target passano dalla visualizzazione della videocamera, l'evento viene attivato di nuovo, passando gli oggetti persi in event.lost. In questo modo puoi tenere conto dei movimenti della mano e degli indicatori: le videocamere non sono tenute abbastanza ferme, gli indicatori vengono rilasciati e così via.

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.
}

Poi, mostri una scheda appropriata in base a quanto trovato dal toolkit.

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.
 
}
}

Per aggiungere schede e pulsanti, è sufficiente eseguirne l'inizializzazione e aggiungerle a un oggetto principale. Ad esempio:

const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card
.src = 'Your message here.'
container
.appendChild(card)'

Infine, ecco come funziona. Notare le comodità che ho aggiunto all'esperienza utente. Indipendentemente dal fatto che l'indicatore venga trovato o meno, fornisco accesso con un solo clic a ciò che ritengo più utile nelle circostanze.

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);
 
}
}

Formattazione delle schede

Web Perception Toolkit fornisce la formattazione integrata per schede e pulsanti con il foglio di stile predefinito. ma puoi aggiungerne facilmente di tuoi. Gli oggetti Card e ActionButton forniti contengono proprietà style (tra molte altre) che ti consentono di applicare il tuo stile all'aspetto. Per includere il foglio di stile predefinito, aggiungi un elemento <link> alla pagina.

<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">

Conclusione

Come detto all'inizio, questo non è un esame esaustivo del toolkit per la percezione del web. Ci auguriamo che ti dia un'idea di quanto sia facile aggiungere la ricerca visiva a un sito web. Scopri di più con la guida Introduzione e le demo di esempio. Consulta la documentazione del kit per scoprire cosa può fare.