Dễ dàng sử dụng tương tác trong thế giới thực.
Nếu họ không bao giờ cần thì sao? Điều gì sẽ xảy ra nếu họ có thể hướng camera của điện thoại vào mã UPC trên gói hàng và trang web của bạn có thể đưa máy ảnh của điện thoại vào đúng hộp mực và nút "sắp xếp lại" màu đỏ lớn?
Hãy nghĩ đến những cách khác để bạn sử dụng camera trên một trang web. Hãy tưởng tượng một trang web hỗ trợ tính năng kiểm tra giá tại cửa hàng. Hãy tưởng tượng bạn có được thông tin về một vật trưng bày trong bảo tàng hoặc một dấu mốc lịch sử. Hãy tưởng tượng việc xác định các địa danh ngoài đời thực trong các trò chơi như tìm địa lý hoặc săn tìm.
Bộ công cụ nhận biết web giúp các tình huống dựa vào máy ảnh này trở nên khả thi. Trong một số trường hợp, bạn thậm chí có thể tạo trải nghiệm mà không cần viết mã.
Cách thức hoạt động
Bộ công cụ nhận thức web nguồn mở giúp bạn thêm tính năng tìm kiếm hình ảnh vào trang web của mình. Phương thức này truyền một luồng máy ảnh của thiết bị qua một tập hợp các trình phát hiện giúp ánh xạ các đối tượng trong thế giới thực, ở đây được gọi là "mục tiêu", với nội dung trên trang web của bạn. Liên kết này được xác định bằng cách sử dụng Dữ liệu có cấu trúc (JSON-LD) trên trang web của bạn. Với dữ liệu này, bạn có thể trình bày thông tin phù hợp trong một giao diện người dùng có thể tuỳ chỉnh.
Tôi sẽ trình bày đủ nội dung này để bạn hiểu cách hoạt động của công cụ này. Để xem nội dung giải thích đầy đủ, hãy xem hướng dẫn Bắt đầu, tài liệu tham khảo về bộ công cụ, bản minh hoạ Hộp cát I/O và bản minh hoạ mẫu.
Dữ liệu có cấu trúc
Bộ công cụ này không thể tìm thấy bất kỳ mục tiêu nào trong góc nhìn của camera. Bạn phải cung cấp hàm này với dữ liệu JSON được liên kết cho các mục tiêu mà bạn muốn mã nhận dạng. Dữ liệu này cũng chứa thông tin về các mục tiêu sẽ hiển thị cho người dùng.
Dữ liệu là tất cả những gì bạn cần để tạo trải nghiệm người dùng như trải nghiệm trong hình ảnh dưới đây. Nếu bạn không làm gì khác, Bộ công cụ nhận biết web có thể xác định mục tiêu, sau đó hiển thị và ẩn các thẻ dựa trên thông tin được cung cấp trong dữ liệu. Hãy tự mình trải nghiệm việc này bằng cách sử dụng bản minh hoạ cấu phần phần mềm (artifact-map).
Thêm dữ liệu vào trang web của bạn bằng một tệp dữ liệu được liên kết với JSON, trong đó sử dụng thẻ <script> và loại MIME "application/ld+json".
<script type="application/ld+json" src="//path/to/your/sitemap.jsonld">
Bản thân tệp sẽ có dạng như sau:
[
{
"@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"
}
}
]
Trải nghiệm người dùng
Nếu bạn muốn có nhiều hơn trải nghiệm người dùng mặc định thì sao? Bộ công cụ này cung cấp cho bạn các sự kiện trong vòng đời, đối tượng Thẻ và Nút để tạo trải nghiệm người dùng xung quanh các sự kiện đó, đồng thời dễ dàng tạo kiểu cho các thẻ. Tôi sẽ giới thiệu một chút nội dung này với mã dựa trên hướng dẫn Bắt đầu của chúng tôi.
Sự kiện quan trọng nhất trong vòng đời là PerceivedResults. Sự kiện này sẽ được kích hoạt mỗi khi tìm thấy một mục tiêu. Mục tiêu có thể là vật thể trong thế giới thực hoặc điểm đánh dấu như mã vạch hoặc mã QR.
Quy trình phản hồi sự kiện này tương tự như quy trình đối với mọi sự kiện khác có một ngoại lệ đã được ám chỉ. Nếu bạn không triển khai sự kiện này, hệ thống sẽ tự động tạo một giao diện người dùng bằng dữ liệu có cấu trúc. Để ghi đè hành vi này, hãy khởi động trình xử lý sự kiện bằng cách gọi 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);
Hãy cùng xem xét sự kiện này kỹ hơn. Bản thân sự kiện này chứa các mảng điểm đánh dấu và mục tiêu mà sự kiện vừa tìm thấy vừa bị mất. Khi tìm thấy các mục tiêu trên thế giới, các đối tượng được tìm thấy trong event.found đều sẽ kích hoạt và truyền. Tương tự, khi các mục tiêu truyền từ chế độ xem máy ảnh, sự kiện sẽ kích hoạt lại, truyền các đối tượng bị mất trong event.lost. Điều này giúp tính đến chuyển động của tay và điểm đánh dấu: máy ảnh không được giữ đủ chắc chắn, lại thả điểm đánh dấu vào những trường hợp như vậy.
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.
}
Tiếp theo, bạn sẽ hiển thị thẻ phù hợp dựa trên những gì bộ công cụ tìm thấy.
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.
}
}
Việc thêm thẻ và nút chỉ đơn giản là tạo thực thể cho chúng và thêm chúng vào đối tượng mẹ. Ví dụ:
const { Card } = PerceptionToolkit.Elements;
const card = new Card();
card.src = 'Your message here.'
container.appendChild(card)'
Cuối cùng, hãy xem toàn bộ hình ảnh sau đây. Hãy lưu ý những tính năng tiện lợi mà tôi đã thêm vào trải nghiệm người dùng. Cho dù có tìm thấy điểm đánh dấu hay không, tôi chỉ cần nhấp một lần để truy cập những thông tin mà tôi cho là hữu ích nhất trong trường hợp này.
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);
}
}
Định dạng thẻ
Bộ công cụ nhận biết web cung cấp định dạng tích hợp sẵn cho thẻ và nút với biểu định kiểu mặc định. Tuy nhiên, bạn có thể dễ dàng thêm mật khẩu của riêng mình. Các đối tượng Card và ActionButton được cung cấp chứa các thuộc tính style (cùng nhiều thuộc tính khác) cho phép bạn tạo dấu ấn tổ chức của mình trong giao diện. Để đưa biểu định kiểu mặc định vào, hãy thêm phần tử <link> vào trang của bạn.
<link rel="stylesheet" href="//path/to/toolkit/styles/perception-toolkit.css">
Kết luận
Như tôi đã nói ở trên, đây chưa phải là toàn bộ thông tin về Bộ công cụ nhận biết web. Hy vọng những kiến thức này sẽ giúp bạn hiểu được việc thêm tính năng tìm kiếm bằng hình ảnh vào trang web dễ dàng như thế nào. Hãy tìm hiểu thêm qua hướng dẫn Bắt đầu và bản minh hoạ mẫu. Hãy xem tài liệu về bộ công cụ này để tìm hiểu những việc mà bộ công cụ này có thể làm.