此页面由 Cloud Translation API 翻译。

使用 Web Perception Toolkit 进行视觉搜索

简单易用的现实世界互动功能。

Joe Medley

如果用户可以使用他们的摄像头搜索您的网站，这是不是很棒？想象一下，您的网站是 Razor McShaveyface。您的客户告诉您，重新订购时，他们很难找到适合自己的剃须刀的墨盒。他们不知道适合您的产品搜索的关键字说实话，他们可能永远不会知道

如果他们根本不需要，该怎么办？如果他们能将手机的摄像头对准包装上的 UPC 代码，而您的网站可以向他们展示合适的墨盒和一个红色的大号“重新订购”按钮，结果会怎样？

思考在网站上使用摄像头的其他方式。假设有一个网站支持店内价格检查想象一下，获取博物馆展览或历史地标的相关信息。想象一下在地理藏宝或寻宝游戏等游戏中识别现实世界的地标。

Web Perception Toolkit 可以实现这些基于摄像头的场景。在某些情况下，您甚至可以无需编写代码就能打造良好的体验

工作原理

开源 Web Perception Toolkit 可帮助您向网站添加视觉搜索。它会通过一组检测器来传递设备摄像头画面，这些检测器将真实的对象（此处称作“目标”）映射到您网站上的内容。此映射是使用您网站上的结构化数据 (JSON-LD) 定义的。利用这些数据，您可以在可自定义的界面中呈现正确的信息。

下面我将向您演示更多内容，以便您大致了解其运作方式。如需了解完整的说明，请查看入门指南、工具包参考文档、I/O 沙盒演示和示例演示。

结构化数据

工具包在摄像头的视野范围内无法找到任何目标。您必须为其提供您希望其识别的目标的关联 JSON 数据。这些数据还包含将向用户显示的目标的相关信息。

您只需提供这些数据即可打造如下图所示的用户体验。如果您未执行任何其他操作，Web Perception Toolkit 可以识别目标，然后根据数据中提供的信息显示和隐藏卡片。请使用我们的 artifact-map 演示亲自试用。

使用 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 Toolkit 使用默认样式表为卡片和按钮提供内置格式设置。但您可以轻松添加自己的资源。提供的 Card 和 ActionButton 对象包含 style 属性（以及其他许多属性），可让您在外观和风格上添加组织元素。如需添加默认样式表，请向页面添加 <link> 元素。

<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">

总结

正如我在上半部分所说，这里并未详尽列出 Web Perception Toolkit。希望您能感受到为网站添加视觉搜索功能是多么容易。如需了解详情，请参阅入门指南和示例演示。请仔细阅读工具包文档，了解其功能。