Einfach zu bedienende, interaktive Elemente aus der realen Welt.
Was ist, wenn dies nie erforderlich ist? Was wäre, wenn er die Kamera seines Smartphones auf den UPI-Code auf der Verpackung richten könnte und auf Ihrer Website die richtige Patrone und eine große rote Schaltfläche für die Neubestellung angezeigt werden könnten?
Überlegen Sie, wie Sie eine Kamera auf einer Website noch verwenden können. Stellen Sie sich eine Website vor, die die Preisprüfung im Geschäft unterstützt. Stellen Sie sich vor, Sie hätten Informationen zu einem Museum oder einer historischen Markierung. Stellen Sie sich vor, Sie können reale Sehenswürdigkeiten in Spielen wie Geocaching oder Schnitzeljagden identifizieren.
Das Web Perception Toolkit ermöglicht diese kamerabasierten Szenarien. Manchmal können Sie sogar eine User Experience schaffen, ohne Code zu schreiben.
Wie funktioniert das?
Mit dem Open-Source-Web Perception Toolkit können Sie Ihrer Website eine visuelle Suche hinzufügen. Dabei wird ein Gerätekamerastream durch eine Reihe von Detektoren geleitet, die reale Objekte, sogenannte „Ziele“, den Inhalten auf Ihrer Website zuordnen. Diese Zuordnung wird mithilfe von strukturierten Daten (JSON-LD) auf deiner Website definiert. Mit diesen Daten können Sie die richtigen Informationen in einer anpassbaren UI präsentieren.
Ich zeige Ihnen jetzt genug, um Ihnen einen Eindruck von der Funktionsweise zu vermitteln. Eine vollständige Erläuterung finden Sie im Startleitfaden, in der Toolkit-Referenz, in der I/O Sandbox-Demo und in den Beispieldemos.
Strukturierte Daten
Das Toolkit kann nicht jedes Ziel im Sichtfeld der Kamera finden. Sie müssen ihr verknüpfte JSON-Daten für die Ziele bereitstellen, die erkannt werden sollen. Diese Daten enthalten auch Informationen zu diesen Zielen, die dem Nutzer angezeigt werden.
Die Daten sind alles, was Sie brauchen, um eine User Experience wie die in der folgenden Abbildung zu erstellen. Wenn Sie nichts weiter tun, kann das Web Perception Toolkit Ziele identifizieren und Karten anhand der in den Daten bereitgestellten Informationen ein- und ausblenden. Probieren Sie es selbst mit unserer Artefaktkarten-Demo aus.
Fügen Sie Ihrer Website mit einer verknüpften JSON-Datendatei Daten hinzu, die mit einem <script>-Tag und dem MIME-Typ "application/ld+json" enthalten ist.
<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 User Experience
Was ist, wenn Sie mehr als die standardmäßige Nutzererfahrung wünschen? Das Toolkit bietet Lebenszyklusereignisse sowie Karten- und Schaltflächenobjekte, mit denen Sie die Nutzererfahrung für diese Ereignisse anpassen können, und eine einfache Möglichkeit, die Karten zu gestalten. Ein bisschen davon werde ich anhand von Code lose in unserem Startleitfaden zeigen.
Das wichtigste Lebenszyklusereignis ist PerceivedResults, das jedes Mal ausgelöst wird, wenn ein Ziel gefunden wird. Ein Ziel kann ein reales Objekt oder eine Markierung wie ein Barcode oder QR-Code sein.
Auf dieses Ereignis reagieren Sie genauso wie bei jedem anderen Ereignis, bis auf eine Ausnahme. Wenn Sie das Ereignis nicht implementieren, wird automatisch eine Benutzeroberfläche mit strukturierten Daten erstellt. Wenn Sie dieses Verhalten überschreiben möchten, starten Sie den Event-Handler durch Aufrufen 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 die Veranstaltung genauer an. Das Ereignis selbst enthält Arrays mit Markierungen und Zielen, die es gefunden und verloren hat. Wenn Ziele auf der Welt gefunden werden, löst die Funktion sogar gefundene Objekte in event.found aus und durchläuft sie. Wenn Ziele aus der Kameraansicht passieren, wird das Ereignis noch einmal ausgelöst, wobei verlorene Objekte in event.lost übergeben werden. So lassen sich Hand- und Markierungsbewegungen berücksichtigen, z. B. wenn Kameras nicht stabil genug gehalten werden oder 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 passende Karte an, die auf den Ergebnissen des Toolkits 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.
}
}
Wenn Sie Karten und Schaltflächen hinzufügen möchten, müssen Sie sie instanziieren und an ein übergeordnetes Objekt anhängen. Beispiel:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Und das Ganze sieht dann so aus: Achten Sie auf die praktischen Funktionen, die ich der User Experience hinzugefügt habe. Unabhängig davon, ob die Markierung gefunden wird oder nicht, biete ich mit nur einem Klick Zugriff auf das, was meiner Meinung nach unter den Umständen 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 integrierte Formatierungen für Karten und Schaltflächen mit dem Standard-Stylesheet. Du kannst aber auch ganz einfach eigene hinzufügen. Die bereitgestellten Card- und ActionButton-Objekte enthalten (unter anderem) style-Eigenschaften, mit denen Sie Ihrem Unternehmen einen neuen Look verleihen können. Dazu fügen Sie Ihrer Seite ein <link>-Element hinzu.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Fazit
Wie bereits oben erwähnt, handelt es sich hierbei nicht um einen vollständigen Überblick über das Web Perception Toolkit. Ich hoffe, Sie bekommen ein Gefühl dafür, wie einfach es ist, eine visuelle Suche zu einer Website hinzuzufügen. Weitere Informationen finden Sie im Startleitfaden und in den Beispieldemos. In der Toolkit-Dokumentation finden Sie weitere Informationen zu den Funktionen.