易于使用的真实互动体验。
如果根本不需要这样做，该怎么办？如果客户能够将手机的相机对准包装上的 UPC 代码，然后您的网站可以向其展示正确的墨盒和一个红色的大号“重新订购”按钮，结果会怎样？
想一想您还可以在网站上使用摄像头的其他方式。假设有一个网站支持检查店内价格。想象一下 获得有关博物馆展览或历史标记的信息想象一下，您可以在地理藏宝或寻宝等游戏中识别现实世界的地标。
Web Perception Toolkit 可让这些基于摄像头的场景成为可能。在某些情况下，您甚至可以不编写代码来打造体验。
运作方式
开源 Web Perception Toolkit 可帮助您向自己的网站添加视觉搜索。它会通过一组检测器传递设备相机数据流，这些检测器将真实对象（即所谓的“目标”）映射到您网站上的内容。此映射是使用您网站上的结构化数据 (JSON-LD) 定义的。利用这些数据，您可以在可自定义的界面中显示正确的信息。
我将向你演示足够的功能，以便你大致了解其运作方式。如需查看完整的说明，请查看入门指南、工具包参考文档、I/O 沙盒演示和示例演示。
结构化数据
工具包无法在镜头视图中仅找到任何目标。对于您希望它识别的目标，您必须为其提供关联的 JSON 数据。此数据还包含将向用户显示的这些目标的相关信息。
创建如下图所示的用户体验，只要这些数据就足够了。如果您未执行任何其他操作，Web Perception Toolkit 可以识别目标，然后根据数据中提供的信息显示和隐藏卡片。使用我们的 artifact-map 演示亲自试用。
使用 <script> 标记和 "application/ld+json" MIME 类型，通过 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，每次找到目标时都会触发该事件。目标可以是现实世界中的对象，也可以是标记（如条形码或二维码）。
响应此事件的过程与响应任何其他事件的过程相同，但已提及异常。如果您不实现该事件，系统会使用结构化数据自动创建界面。如需替换此行为，请调用 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 Toolkit 使用默认样式表为卡片和按钮提供内置格式。但您可以轻松添加自己的设置。提供的 Card 和 ActionButton 对象包含 style 属性（以及许多其他属性），您可以通过这些属性在外观和风格上彰显自己的组织能力。如需添加默认样式表，请向页面添加 <link> 元素。
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
总结
正如我在上文中所说的，这里并未详尽列出 Web Perception Toolkit 部分。希望能让您感受到，在网站上添加视觉搜索功能是多么容易。如需了解详情，请参阅入门指南和示例演示。 请参阅工具包文档，了解其功能。