Visuelle Suche mit dem Web Perception Toolkit

Einfach zu bedienende, realistische Interaktivität.

Joe Medley
Joe Medley
Wäre es nicht toll, wenn Nutzer Ihre Website mit ihrer Kamera durchsuchen könnten? Stellen Sie sich Folgendes vor: Ihre Website heißt „Razor McShaveyface“. Ihre Kunden berichten Ihnen, dass sie bei der Nachbestellung der richtigen Patronen für ihren Rasierer Probleme haben. Sie kennen die richtigen Keywords für Ihre Produktsuche nicht. Und seien wir ehrlich: Das wird wahrscheinlich nie passieren.

Was ist, wenn sie das nie tun müssen? Was wäre, wenn er die Kamera seines Smartphones auf den UPC-Code auf der Verpackung richten könnte und Ihre Website ihm dann die richtige Patrone und eine große rote Schaltfläche „Neu bestellen“ anzeigen würde?

Überlegen Sie sich, wie Sie eine Kamera auf einer Website verwenden könnten. Stellen Sie sich eine Website vor, die die Preisprüfung im Geschäft unterstützt. Stellen Sie sich vor, Sie erhalten Informationen zu einer Museumsausstellung oder einer historischen Markierung. Stellen Sie sich vor, Sie müssen in Spielen wie Geocaching oder Schnitzeljagd reale Wahrzeichen finden.

Das Web Perception Toolkit macht diese kamerabasierten Szenarien möglich. In einigen Fällen können Sie sogar eine Funktion erstellen, ohne Code schreiben zu müssen.

Wie funktioniert das?

Mit dem Open-Source-Web Perception Toolkit können Sie Ihrer Website eine visuelle Suche hinzufügen. Dabei wird ein Kamerastream des Geräts durch eine Reihe von Sensoren geleitet, die reale Objekte, hier als „Ziele“ bezeichnet, auf Inhalte auf Ihrer Website abbilden. Diese Zuordnung wird mithilfe von strukturierten Daten (JSON-LD) auf Ihrer Website definiert. Mit diesen Daten können Sie die richtigen Informationen in einer anpassbaren Benutzeroberfläche präsentieren.

Ich zeige Ihnen genug davon, damit Sie einen Eindruck davon bekommen, wie es funktioniert. Eine vollständige Erklärung finden Sie im Einstiegsleitfaden, in der Toolkit-Referenz, in der I/O-Sandbox-Demo und in den Beispieldemos.

Strukturierte Daten

Das Toolkit kann nicht jedes beliebige Ziel im Sichtfeld der Kamera finden. Sie müssen verknüpfte JSON-Daten für die Ziele angeben, die erkannt werden sollen. Diese Daten enthalten auch Informationen zu den Zielen, die dem Nutzer angezeigt werden.

Die Daten sind alles, was Sie brauchen, um eine Nutzererfahrung wie die in der Abbildung unten zu schaffen. Wenn Sie nichts weiter tun, kann das Web Perception Toolkit Ziele erkennen und dann Karten basierend auf den Informationen in den Daten anzeigen und ausblenden. Probieren Sie es selbst mit unserer Demo für die Artefaktkarte aus.

Die Standardoberfläche ist nur verfügbar, wenn Sie nur die verknüpften Daten verwenden.
Die Standardoberfläche.

Fügen Sie Ihrer Website Daten mit einer verknüpften JSON-Datei hinzu, die mit einem <script>-Tag und dem MIME-Typ "application/ld+json" eingebunden wird.

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

Die Datei selbst sieht in etwa so aus:

[
 
{
   
"@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"
   
}
 
}
]

Die Nutzererfahrung

Was ist, wenn Sie mehr als die Standard-Benutzeroberfläche benötigen? Das Toolkit bietet Lebenszyklusereignisse, Karten- und Schaltflächenobjekte, mit denen Sie die Nutzerfreundlichkeit für diese Ereignisse gestalten können, sowie eine einfache Möglichkeit, die Karten zu gestalten. Ich zeige Ihnen das anhand von Code, der lose auf unserem Einstiegsleitfaden basiert.

Das wichtigste Lebenszyklusereignis ist PerceivedResults. Es wird jedes Mal ausgelöst, wenn ein Ziel gefunden wird. Ein Ziel kann ein reales Objekt oder eine Markierung wie ein Barcode oder QR-Code sein.

Die Reaktion auf dieses Ereignis erfolgt wie bei jedem anderen Ereignis, mit einer bereits erwähnten Ausnahme. Wenn Sie das Ereignis nicht implementieren, wird automatisch eine Benutzeroberfläche mithilfe von strukturierten Daten erstellt. Wenn Sie dieses Verhalten überschreiben möchten, starten Sie Ihren Ereignis-Handler mit dem Aufruf von 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);

Sehen wir uns das Ereignis genauer an. Das Ereignis selbst enthält Arrays von Markierungen und Zielen, die gefunden und verloren wurden. Wenn Ziele in der realen Welt gefunden werden, wird das Ereignis ausgelöst und die gefundenen Objekte werden an event.found übergeben. Wenn Ziele die Kameraansicht verlassen, wird das Ereignis ebenfalls noch einmal ausgelöst und verlorene Objekte werden in event.lost übergeben. So lassen sich Bewegungen von Händen und Markierungen berücksichtigen: Kameras, die nicht ruhig genug gehalten werden, oder fallengelassene Markierungen.

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

Als Nächstes zeigen Sie eine entsprechende Karte an, die auf den Ergebnissen des Tools basiert.

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

Zum Hinzufügen von Karten und Schaltflächen müssen Sie sie einfach instanziieren und einem übergeordneten Objekt anhängen. Beispiel:

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

So sieht das Ganze dann aus. Beachten Sie die Verbesserungen, die ich für die Nutzerfreundlichkeit vorgenommen habe. Unabhängig davon, ob die Markierung gefunden wird oder nicht, biete ich mit nur einem Klick Zugriff auf das, was meiner Meinung nach in der jeweiligen Situation am nützlichsten ist.

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

Karten formatieren

Das Web Perception Toolkit bietet eine integrierte Formatierung für Karten und Schaltflächen mit dem Standard-Stylesheet. Sie können aber ganz einfach eigene hinzufügen. Die bereitgestellten Card- und ActionButton-Objekte enthalten unter anderem style-Properties, mit denen Sie das Erscheinungsbild individuell gestalten können. Wenn Sie das Standard-Stylesheet einbinden möchten, fügen Sie Ihrer Seite ein <link>-Element hinzu.

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

Fazit

Wie bereits erwähnt, ist dies kein vollständiger Überblick über das Web Perception Toolkit. Hoffentlich haben Sie jetzt eine Vorstellung davon, wie einfach es ist, einer Website eine visuelle Suche hinzuzufügen. Weitere Informationen finden Sie im Startleitfaden und in den Beispieldemos. In der Tool-Dokumentation erfahren Sie, was es kann.