簡單易用的真實互動體驗。
如果他們不再需要這項功能，該怎麼辦？如果他們能將手機相機對準包裹上的通用產品代碼，您的網站就能顯示合適的墨水匣和紅色大的「重新訂購」按鈕，該怎麼辦？
請想想還能在網站上使用攝影機的其他方式，假設某個網站支援店內價格查驗功能想像一下 博物館的展品或歷史標記想像一下，在遊戲中辨識真實世界的地標，例如地理快取或尋寶遊戲。
Web Perception 工具包能實現這些以相機為基礎的使用情境。在某些情況下，您甚至不需要編寫程式碼就能打造體驗。
運作方式
開放原始碼 Web Perception 工具包可讓您在網站中加入視覺化搜尋功能。這項工具會透過一組偵測工具傳遞裝置相機串流，這些偵測工具會將實際物件 (此稱為「目標」) 對應至您網站的內容。系統會使用網站上的結構化資料 (JSON-LD) 定義這項對應。有了這些資料，您就可以在可自訂的 UI 中顯示正確資訊。
以下將說明這項功能的運作方式。如需完整說明，請參閱入門指南、工具包參考資料、I/O 沙箱示範和示範範例。
結構化資料
工具組無法只在相機鏡頭的視角中找到任何目標。必須提供已連結的 JSON 資料，以便識別目標。這項資料也包含這些目標的相關資訊，使用者會看到這些內容。
這些資料只需要足以打造使用者體驗，如下圖所示。如果您未採取任何行動，Web Perception 工具包可以識別目標，然後根據資料中提供的資訊顯示及隱藏資訊卡。請使用我們的 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，每次找到目標時就會觸發。目標可以是實際物件或標記，例如條碼或 QR code。
回應此事件的程序和處理任何其他事件一樣，但也有例外。如果您未實作該事件，系統會自動使用結構化資料建立使用者介面。如要覆寫此行為，請呼叫 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 Toolkit 的資訊。希望這部影片能讓您瞭解為網站新增視覺化搜尋功能有多麼簡單。詳情請參閱入門指南和示範範例。請參閱工具包說明文件，瞭解這項工具的功能。