Scanner web cho demo QR

Quét mã, vào thẳng trang truy xuất

Màn hình scan được giữ cùng visual direction với landing page để demo core loop liền mạch: mở camera, nhận QR và điều hướng sang public product page.

Astro SSR first paint React island cho camera Bám landing page visual

Ưu tiên camera sau trên điện thoại để nhận diện nhanh hơn.

Chấp nhận cả URL Checkgo và mã code thô để phục vụ demo linh hoạt.

Khi decode thành công sẽ chuyển ngay sang `/qr/:code`.

Scanner readyCamera web

Quét QR để mở trang truy xuất

Dùng camera điện thoại hoặc laptop. Khi nhận diện được mã, màn hình sẽ chuyển ngay sang trang sản phẩm tương ứng.

Camera sau

Decode realtime

Điều hướng tự động

Hướng dẫn

Đưa mã QR vào khung quét, giữ máy ổn định và đủ sáng.
QR hợp lệ có thể là URL Checkgo hoặc chính mã code thô.
Nếu bị chặn camera, cấp quyền rồi thử lại trên cùng màn hình này.

Core loop

Scan là điểm vào public page

Sau khi quét, người dùng đi thẳng sang trang truy xuất để xem thông tin sản phẩm, lô và doanh nghiệp.

Scan flow

Không còn một route trắng trơn

Toàn bộ layout, nền và nội dung định hướng được render sẵn từ Astro. Island React chỉ giữ phần camera và decode QR, nên nếu JS tải chậm trang vẫn có giao diện hoàn chỉnh.

Bước 1

Mở camera

Bước 2

Đưa QR vào khung

Bước 3

Decode bằng jsQR

Bước 4

Chuyển sang trang truy xuất