Pesquisa visual com o Web Perception Toolkit

Interatividade fácil de usar no mundo real.

Joe Medley
Joe Medley
Não seria ótimo se os usuários pudessem pesquisar no seu site usando a câmera? Imagine isto. Seu site é "Razor McShaveyface". Seus clientes dizem que têm dificuldade para encontrar os cartuchos certos para a navalha quando fazem um novo pedido. Eles não sabem as palavras-chave certas para a pesquisa de produtos. E, para ser sincero, provavelmente nunca vai.

E se nunca precisarem? E se eles pudessem apontar a câmera do smartphone para o código UPC no pacote e seu site pudesse mostrar o cartucho certo e um botão vermelho "refazer pedido" grande?

Pense em outras maneiras de usar uma câmera em um site. Imagine um site que oferece suporte à verificação de preços na loja. Imagine receber informações sobre uma exposição de museu ou um marco histórico. Imagine identificar pontos de referência do mundo real em jogos, como geocaching ou caças ao tesouro.

O Kit de ferramentas de percepção da Web permite esses cenários baseados em câmera. Em alguns casos, é possível até criar uma experiência sem escrever código.

Como funciona?

O Web Perception Toolkit de código aberto ajuda você a adicionar a pesquisa visual ao seu site. Ele transmite um fluxo da câmera do dispositivo por um conjunto de detectores que mapeiam objetos do mundo real, chamados aqui de "alvos", para o conteúdo do seu site. Esse mapeamento é definido usando dados estruturados (JSON-LD) no seu site. Com esses dados, é possível apresentar as informações certas em uma interface personalizável.

Vou mostrar o suficiente para você ter uma ideia de como funciona. Para uma explicação completa, consulte o guia Primeiros passos, a referência do kit de ferramentas, a demonstração do sandbox do I/O e as demonstrações de exemplo.

Dados estruturados

O kit de ferramentas não pode encontrar qualquer alvo na visualização da câmera. Você precisa fornecer dados JSON vinculados para os alvos que você quer que ele reconheça. Esses dados também contêm informações sobre as segmentações que serão mostradas ao usuário.

Os dados são tudo o que você precisa para criar uma experiência do usuário como a mostrada na imagem abaixo. Se você não fizer nada, o Web Perception Toolkit poderá identificar os alvos e mostrar e ocultar cards com base nas informações fornecidas nos dados. Teste isso usando nossa demonstração de mapa de artefatos.

A interface padrão está disponível usando apenas os dados vinculados.
A interface padrão.

Adicione dados ao seu site com um arquivo de dados vinculado a JSON, incluído usando uma tag <script> e o tipo MIME "application/ld+json".

<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">

O arquivo tem esta aparência:

[
  {
    "@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"
    }
  }
]

A experiência do usuário

E se você quiser mais do que a experiência padrão do usuário? O kit de ferramentas oferece eventos de ciclo de vida, objetos de card e botão para criar a experiência do usuário em torno desses eventos e uma maneira fácil de estilizar os cards. Vou mostrar um pouco disso com um código baseado de forma livre no nosso guia Primeiros passos.

O evento de ciclo de vida mais importante é PerceivedResults, que é acionado sempre que um alvo é encontrado. Um alvo pode ser um objeto do mundo real ou um marcador, como um código de barras ou QR code.

O processo de resposta a esse evento é o mesmo de qualquer outro evento com uma exceção já mencionada. Se você não implementar o evento, uma interface do usuário será criada automaticamente usando dados estruturados. Para substituir esse comportamento, inicie o gerenciador de eventos chamando 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);

Vamos analisar o evento mais de perto. O evento em si contém matrizes de marcadores e alvos que ele encontrou e perdeu. Quando os alvos são encontrados no mundo, o evento é acionado e os objetos encontrados são transmitidos em event.found. Da mesma forma, quando os alvos passam da visualização da câmera, o evento é acionado novamente, transmitindo objetos perdidos em event.lost. Isso ajuda a considerar os movimentos da mão e do marcador: câmeras não seguradas com firmeza suficiente, marcadores caídos, esse tipo de coisa.

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.
}

Em seguida, você mostra um card adequado com base no que o kit de ferramentas encontrou.

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.
  }
}

Adicionar cards e botões é simplesmente uma questão de instanciar e anexar a um objeto pai. Exemplo:

const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'

Por fim, confira como ficou. Observe as conveniências que adicionei à experiência do usuário. Independentemente de o marcador ser encontrado ou não, ofereço acesso com um clique ao que acho mais útil nas circunstâncias.

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);
  }
}

Formatar cards

O Web Perception Toolkit oferece formatação integrada para cards e botões com a folha de estilos padrão. Mas você pode adicionar as suas. Os objetos Card e ActionButton fornecidos contêm propriedades style (entre muitas outras) que permitem que você dê seu selo organizacional ao visual e à sensação. Para incluir a folha de estilo padrão, adicione um elemento <link> à página.

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

Conclusão

Como disse no início, este não é um olhar exaustivo sobre o Web Perception Toolkit. Esperamos que isso dê a você uma ideia de como é fácil adicionar a pesquisa visual a um site. Saiba mais com o guia Primeiros passos e as demonstrações de exemplo. Leia a documentação do kit de ferramentas para saber o que ele pode fazer.