易于使用的真实互动。
如果他们永远不需要这样做，又会怎样？如果他们可以将手机的摄像头对准包装上的 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 工具包。希望这能让您了解向网站添加视觉搜索功能是多么简单。如需了解详情，请参阅入门指南和示例演示。深入了解工具包文档，了解其功能。