Простая в использовании интерактивность в реальном мире.
Что, если им это никогда не понадобится? Что, если бы они могли навести камеру своего телефона на код UPC на упаковке, а ваш сайт мог бы предоставить им правильный картридж и большую красную кнопку «повторного заказа»?
Подумайте о других способах использования камеры на сайте. Представьте себе сайт, который поддерживает проверку цен в магазине. Представьте себе, что вы получаете информацию о музейном экспонате или историческом памятнике. Представьте себе, что вы идентифицируете реальные ориентиры в таких играх, как геокэшинг или охота за мусором.
Web Perception Toolkit делает возможными такие сценарии с использованием камеры. В некоторых случаях вы даже можете создать опыт без написания кода.
Как это работает?
Набор инструментов Web Perception Toolkit с открытым исходным кодом поможет вам добавить на ваш сайт визуальный поиск. Он пропускает поток камеры устройства через набор детекторов, которые сопоставляют объекты реального мира, называемые здесь «целями», с содержимым вашего сайта. Это сопоставление определяется с использованием структурированных данных (JSON-LD) на вашем сайте. С помощью этих данных вы можете представить нужную информацию в настраиваемом пользовательском интерфейсе.
Я покажу вам достаточно этого, чтобы вы почувствовали, как это работает. Для получения полного объяснения ознакомьтесь с руководством по началу работы , справочником по набору инструментов , демонстрацией I/O Sandbox и примерами демонстраций .
Структурированные данные
Инструментарий не может найти любую цель в поле зрения камеры. Вы должны предоставить ему связанные данные JSON для целей, которые вы хотите распознать. Эти данные также содержат информацию о тех целях, которые будут показаны пользователю.
Данные — это все, что вам нужно для создания пользовательского опыта, подобного изображенному на изображении ниже. Если вы больше ничего не сделаете, набор инструментов Web Perception Toolkit сможет идентифицировать цели, а затем показывать и скрывать карточки на основе информации, представленной в данных. Попробуйте это сами, воспользовавшись нашей демо-картой артефактов .
Добавьте данные на свой сайт с помощью связанного файла данных JSON, включенного с помощью тега <script> и типа MIME "application/ld+json" .
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
Сам файл выглядит примерно так:
[
{
"@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"
}
}
]
Пользовательский опыт
Что делать, если вам нужно больше, чем стандартный пользовательский интерфейс? Набор инструментов предоставляет вам события жизненного цикла, объекты Card и Button для создания пользовательского опыта на основе этих событий, а также простой способ стилизации карточек. Я собираюсь немного продемонстрировать это на примере кода, основанного на нашем руководстве по началу работы .
Самым важным событием жизненного цикла является PerceivedResults , которое запускается каждый раз при обнаружении цели. Целью может быть реальный объект или маркер, например штрих-код или QR-код.
Процесс реагирования на это событие такой же, как и на любое другое событие, за исключением, о котором уже упоминалось. Если вы не реализуете событие, пользовательский интерфейс автоматически создается с использованием структурированных данных. Чтобы переопределить это поведение, запустите обработчик событий, вызвав 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);
Давайте посмотрим на событие более внимательно. Само событие содержит массивы маркеров и целей, которые оно обнаружило и потеряло. Когда в мире обнаруживаются цели, метод Even срабатывает и передает найденные объекты в event.found . Аналогично, когда цели выходят из поля зрения камеры, событие срабатывает снова, передавая потерянные объекты в event.lost . Это помогает учитывать движения рук и маркеров: камеры удерживаются недостаточно устойчиво, маркеры роняются и тому подобное.
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.
}
Затем вы показываете соответствующую карточку на основе того, что нашел инструментарий.
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.
}
}
Добавление карточек и кнопок — это просто создание их экземпляров и добавление их к родительскому объекту. Например:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Наконец, вот как все это выглядит. Обратите внимание на удобства, которые я добавил к пользовательскому интерфейсу. Независимо от того, найден маркер или нет, я предоставляю доступ в один клик к тому, что считаю наиболее полезным в данных обстоятельствах.
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);
}
}
Форматирование карточек
Web Perception Toolkit обеспечивает встроенное форматирование карточек и кнопок с помощью таблицы стилей по умолчанию. Но вы легко можете добавить свой собственный. Предоставленные объекты Card и ActionButton содержат свойства style (среди многих других), которые позволяют вам внести свой организационный отпечаток в внешний вид. Чтобы включить таблицу стилей по умолчанию, добавьте на свою страницу элемент <link> .
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Заключение
Как я сказал выше, это не исчерпывающий обзор Web Perception Toolkit . Надеюсь, это даст вам представление о том, насколько легко добавить на веб-сайт визуальный поиск. Узнайте больше из руководства «Приступая к работе» и примеров демонстраций . Покопайтесь в документации набора инструментов , чтобы узнать, на что он способен.