The AR Try-On Module is a browser-based, real-time augmented reality solution that enables users to virtually try on jewellery and eyewear products without any mobile app installation. Built as a web-first experience, it uses browser camera access, HTML5 Canvas API for rendering, and machine learning-based facial landmark detection to create photorealistic product overlays.
All AR processing happens in the browser using JavaScript/TypeScript, eliminating server-side computational overhead and ensuring low-latency interactions.
Utilises MediaPipe FaceMesh to detect 468+ facial landmarks in real-time, enabling precise positioning of accessories on facial features like ears, nose bridge, cheekbones, and neck.
A 2D rendering context draws product images with dynamic transformations (scale, rotation, translation, opacity) synchronised to facial movements at 30-60 FPS.
JSON-based product definitions store dimensional metadata (default scale, anchor points, offset coordinates, rotation angles) allowing non-technical users to add new products without code changes.
Adaptive algorithms adjust product sizing based on detected face width, ensuring consistent visual appearance across different devices, camera resolutions, and user distances.
Studs, hoops, danglers
Precise nose bridge positioning
Neck area tracking & overlay
Sunglasses, prescription glasses
Users browse and select products from the product catalogue page with filtering, search, and sorting capabilities.
A video element captures the user's camera feed in real-time. A canvas layer overlays the video to render product visualisations.
MediaPipe runs in a WebWorker to detect key facial points including ears, nose bridge, cheekbones, and neck area. Landmarks are continuously passed to the main thread.
Product definitions determine precise placement. On each animation frame, scale, rotation, and position transforms are calculated. Transparent PNG images are dynamically drawn on the canvas.
Category/subcategory selection, snapshot capture with retake and download functionality, and full-screen mode toggle for enhanced viewing.
Real-time, photorealistic 2D product overlays on canvas for multiple product types
Responsive scaling across desktop, tablet, and mobile with constant facial detection using MediaPipe FaceMesh
Take, retake and download snapshots for side views try-on with full screen mode support
Consolidated alert/feedback for detection issues ensuring smooth user experience
Tailwind-powered, customizable UI components with Shadcn UI library and modular components for each product try-on
E-commerce platforms wanting "try before you buy" for jewelry and eyewear products.
Fashion & accessories websites offering virtual try-on rooms for customers.
Social shopping features where users share AR-augmented selfies with friends.
In-store kiosks or events for contactless product demos and enhanced customer experience.
Framework: Next.js (v15.3), React (v19.0)
Language: TypeScript
Styling: Tailwind CSS, Shadcn UI library
Facial Detection: MediaPipe (v0.4.1)
Schedule a personalised demo with our team and discover how AR Try-On can work for your business.