易于使用的真实互动。
如果用户可以使用摄像头搜索您的网站,那不是很棒吗?想象一下。您的网站是 Razor McShaveyface。客户告诉您,他们在重新订购时找不到适合自己剃须刀的刀片。他们不知道用于搜索您商品的正确关键字。说实话,他们可能永远不会。
如果他们永远不需要这样做,又会怎样?如果他们可以将手机的摄像头对准包装上的 UPC 代码,而您的网站可以向他们显示正确的墨盒和一个醒目的红色“重新订购”按钮,那该多好?
思考您可以在网站上使用相机的其他方式。假设有一个网站支持在实体店内查看价格。假设您想要获取某个博物馆展品或历史地标的相关信息。想象一下,在游戏中识别地理信息游戏或寻宝游戏等活动中的真实地标。
Web Perception Toolkit 让这些基于摄像头的场景成为可能。在某些情况下,您甚至无需编写代码即可创建体验。
工作原理
开源 Web Perception Toolkit 可帮助您为网站添加视觉搜索功能。它会将设备摄像头画面传递给一组检测器,这些检测器会将现实世界中的物体(在此称为“目标”)映射到您网站上的内容。此映射是使用您网站上的结构化数据 (JSON-LD) 定义的。借助这些数据,您可以在可自定义的界面中显示正确的信息。
我会向您展示足够多的示例,让您大致了解其运作方式。如需完整了解,请参阅使用入门指南、工具包参考文档、I/O 沙盒演示和示例演示。
结构化数据
该工具包无法在相机视野中找到任何目标。您必须为其提供要识别的目标的链接 JSON 数据。这些数据还包含与将向用户显示的目标相关的信息。
您只需使用这些数据,即可打造如下图所示的用户体验。如果您不执行任何其他操作,Web Perception Toolkit 可以识别目标,然后根据数据中提供的信息显示和隐藏卡片。您可以使用我们的工件映射演示自行试用。
使用 JSON 关联的数据文件向您的网站添加数据,该文件使用 <script>
标记和 "application/ld+json"
MIME 类型包含。
<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"
}
}
]
用户体验
如果您希望获得的用户体验超出默认体验,该怎么办?该工具包提供了生命周期事件、卡片和按钮对象,可用于围绕这些事件打造用户体验,还提供了一种简单的方式来设置卡片样式。我将通过一些代码来演示这一点,这些代码大致基于我们的开始使用指南。
最重要的生命周期事件是 PerceivedResults
,系统会在每次找到目标时触发该事件。目标可以是真实对象,也可以是条形码或二维码等标记。
响应此事件的过程与响应任何其他事件的过程相同,但有一个例外情况,如前所述。如果您未实现该事件,系统会使用结构化数据自动创建界面。如需替换此行为,请通过调用 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);
我们来详细了解一下该事件。事件本身包含它找到和丢失的标记和目标的数组。在世界中找到目标后,该事件会触发并在 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 工具包使用默认样式表为卡片和按钮提供内置格式设置。不过,您可以轻松添加自己的付款方式。提供的 Card
和 ActionButton
对象包含 style
属性(以及许多其他属性),可让您在外观和风格上体现组织特色。如需添加默认样式表,请向您的网页添加 <link>
元素。
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
总结
正如我在开头所说,这并未详尽介绍 Web Perception 工具包。希望这能让您了解向网站添加视觉搜索功能是多么简单。如需了解详情,请参阅入门指南和示例演示。深入了解工具包文档,了解其功能。