Penelusuran visual dengan Toolkit Persepsi Web

Interaktivitas dunia nyata yang mudah digunakan.

Joe Medley

Bagaimana jika mereka tidak perlu melakukannya? Bagaimana jika mereka dapat mengarahkan kamera ponsel ke kode UPC pada paket dan situs Anda dapat menampilkan kartrid yang tepat serta tombol "pesanan ulang" berwarna merah besar?

Pikirkan cara lain yang dapat Anda gunakan untuk menggunakan kamera di situs. Bayangkan situs yang mendukung pemeriksaan harga di toko. Bayangkan mendapatkan informasi tentang pameran museum atau penanda bersejarah. Bayangkan mengidentifikasi penanda di dunia nyata dalam game seperti geocaching atau perburuan harta karun.

Web Perception Toolkit memungkinkan skenario berbasis kamera ini. Dalam beberapa kasus, Anda bahkan dapat membuat pengalaman tanpa menulis kode.

Bagaimana cara kerjanya?

Web Perception Toolkit open source membantu Anda menambahkan penelusuran visual ke situs Anda. Fitur ini meneruskan streaming kamera perangkat melalui serangkaian detektor yang memetakan objek dunia nyata, yang di sini disebut "target", ke konten di situs Anda. Pemetaan ini ditentukan menggunakan Data Terstruktur (JSON-LD) di situs Anda. Dengan data ini, Anda dapat menampilkan informasi yang tepat dalam UI yang dapat disesuaikan.

Saya akan menunjukkan cukup banyak hal ini untuk memberi Anda gambaran tentang cara kerjanya. Untuk penjelasan lengkap, lihat panduan Memulai, referensi toolkit, demo I/O Sandbox, dan demo contoh.

Data terstruktur

Toolkit tidak dapat menemukan target apa pun dalam tampilan kamera. Anda harus menyediakannya dengan data JSON tertaut untuk target yang ingin dikenali. Data ini juga berisi informasi tentang target yang akan ditampilkan kepada pengguna.

Data adalah semua yang Anda perlukan untuk membuat pengalaman pengguna seperti yang ada pada gambar di bawah. Jika Anda tidak melakukan tindakan lain, Web Perception Toolkit dapat mengidentifikasi target, lalu menampilkan dan menyembunyikan kartu berdasarkan informasi yang diberikan dalam data. Coba sendiri menggunakan demo peta artefak kami.

Tambahkan data ke situs Anda dengan file data tertaut JSON, yang disertakan menggunakan tag <script> dan jenis MIME "application/ld+json".

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

Filenya sendiri terlihat seperti ini:

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

Pengalaman pengguna

Bagaimana jika Anda menginginkan lebih dari pengalaman pengguna default? Toolkit ini memberi Anda peristiwa siklus proses, objek Kartu dan Tombol untuk membuat pengalaman pengguna di sekitar peristiwa tersebut, dan cara mudah untuk menata gaya kartu. Saya akan menunjukkan sedikit hal ini dengan kode yang didasarkan secara longgar pada panduan Memulai kami.

Peristiwa siklus proses yang paling penting adalah PerceivedResults, yang diaktifkan setiap kali target ditemukan. Target dapat berupa objek dunia nyata atau penanda seperti kode batang atau kode QR.

Proses untuk merespons peristiwa ini sama dengan peristiwa lainnya dengan pengecualian yang telah disinggung. Jika Anda tidak menerapkan peristiwa, antarmuka pengguna akan otomatis dibuat menggunakan data terstruktur. Untuk mengganti perilaku ini, mulai pengendali peristiwa Anda dengan memanggilevent.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);

Mari kita pelajari peristiwa ini lebih lanjut. Peristiwa itu sendiri berisi array penanda dan target yang telah ditemukan dan hilang. Saat target ditemukan di dunia, peristiwa akan diaktifkan dan meneruskan objek yang ditemukan di event.found. Demikian pula, saat target melewati tampilan kamera, peristiwa akan diaktifkan lagi, yang meneruskan objek yang hilang di event.lost. Hal ini membantu memperhitungkan gerakan tangan dan penanda: kamera tidak dipegang dengan cukup stabil, penanda diletakkan, dan sebagainya.

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

Selanjutnya, Anda akan menampilkan kartu yang sesuai berdasarkan apa yang ditemukan toolkit.

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

Untuk menambahkan kartu dan tombol, Anda hanya perlu membuat instance dan menambahkannya ke objek induk. Contoh:

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

Terakhir, berikut adalah tampilan keseluruhannya. Perhatikan kemudahan yang telah saya tambahkan ke pengalaman pengguna. Baik penanda ditemukan atau tidak, saya memberikan akses satu klik ke penanda yang menurut saya paling berguna dalam situasi tersebut.

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

Memformat kartu

Web Perception Toolkit menyediakan format bawaan untuk kartu dan tombol dengan stylesheet default. Namun, Anda dapat menambahkannya dengan mudah. Objek Card dan ActionButton yang disediakan berisi properti style (di antara banyak properti lainnya) yang memungkinkan Anda memberikan cap organisasi pada tampilan dan nuansanya. Untuk menyertakan stylesheet default, tambahkan elemen <link> ke halaman Anda.

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

Kesimpulan

Seperti yang saya katakan di bagian atas, ini bukan tampilan lengkap tentang Toolkit Persepsi Web. Semoga hal ini memberi Anda gambaran tentang betapa mudahnya menambahkan penelusuran visual ke situs. Pelajari lebih lanjut dengan panduan Memulai dan contoh demo. Buka dokumentasi toolkit untuk mempelajari kemampuannya.