提供簡單易用的互動體驗。
如果他們完全不需要的話呢？如果使用者可以將手機相機對準包裝上的 UPC 代碼，然後網站顯示正確的墨水匣和大大的紅色「重新訂購」按鈕，會如何呢？
思考還能在網站上使用攝影機的其他方式，假設有個網站支援店內價格查詢功能。假設您想取得博物館展覽或歷史標記的相關資訊。想像一下，在遊戲中找出真實世界的地標，例如地理封存或尋寶遊戲。
Web Perception Toolkit 可實現這些以攝影機為基礎的情況。在某些情況下，您甚至可以不必編寫程式碼，就能建立體驗。
運作方式
開放原始碼的 Web Perception Toolkit 可協助您在網站中加入視覺搜尋功能。這項服務會將裝置相機串流傳送至一組偵測器，這些偵測器會將實際物體 (在此稱為「目標」) 對應至網站上的內容。這項對應關係是使用網站上的結構化資料 (JSON-LD) 定義。有了這項資料，您就能在可自訂的 UI 中呈現正確的資訊。
我來示範一下這項功能的運作方式如需完整說明，請參閱「開始使用」指南、工具包參考資料、I/O Sandbox 示範和示範。
結構化資料
工具包中找不到任何目標。您必須為要辨識的目標提供連結 JSON 資料。這項資料也包含會向使用者顯示的目標相關資訊。
您只需這些資料，就能打造下圖所示的使用者體驗。如果您不採取其他行動，Web Perception Toolkit 可以識別目標，然後根據資料中提供的資訊顯示及隱藏資訊卡。您可以使用我們的構件映射示範親自試試看。
使用 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"
}
}
]
使用者體驗
如果您想要提供比預設使用者體驗更豐富的體驗，工具包提供生命週期事件、Cards 和 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 Toolkit 會使用預設樣式表格，為資訊卡和按鈕提供內建格式。但你可以輕鬆新增自訂關鍵字。提供的 Card 和 ActionButton 物件包含 style 屬性 (及許多其他屬性)，您可以在外觀和風格上加入機構戳記。如要加入預設樣式表，請在頁面中加入 <link> 元素。
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
結論
如上所述，這裡並未對 Web Perception 工具包完整說明。希望這能讓您瞭解在網站中新增視覺搜尋功能有多簡單。如要進一步瞭解，請參閱入門指南和示範影片。請參閱工具包說明文件，瞭解工具包的功能。