iamivanwuAI & AR Web Platform
This was a B2B AR web platform built for brand clients. Clients could embed virtual makeup try-on features into their own websites, allowing consumers to preview makeup products in real time through a phone or desktop camera.
I mainly worked on the frontend architecture, Web SDK feature development, browser and mobile device compatibility, and product event tracking.
Embeddable Web SDK
The project shipped a single sdk.js entry file through Webpack, allowing clients to embed the virtual try-on experience into their own websites with a <script> tag. The SDK exposed APIs for initialization, opening the try-on interface, switching products, and listening to state changes.
The interface layer was built with React and handled user interactions such as taking photos, showing face detection hints, loading states, and error messages. The core layer connected JavaScript with WebAssembly and the rendering engine, acquired the camera MediaStream, and rendered AR effects in real time inside the browser.
Event Tracking
To support product analytics and client-side operations, the platform integrated both GA4 and Countly. I worked with the business team to map the user journey and define events such as opening the try-on interface, switching products, granting camera permission, taking photos, and encountering errors. This allowed the team to analyze user behavior and feature usage.
Technical Challenges
1. MediaStream and Cross-Browser Compatibility
Different operating systems and browsers implement MediaStream, camera permissions, and device selection in different ways. Issues could appear during permission requests, front and rear camera switching, image capture, or rendering.
When handling these issues, I first categorized them by device, operating system, browser version, and failure stage. Then I built reproducible test scenarios to identify whether the issue came from browser behavior, MediaStream state, or the downstream rendering flow.
For problems that could not be solved with a unified approach, I added targeted compatibility handling and fallback paths for specific platforms while avoiding regressions in environments that already worked correctly.
2. iOS System Updates
Because many product users were on iOS devices, every new iOS and Safari release required priority compatibility verification.
The project involved React UI, WebGL, the rendering engine, MediaStream, and camera hardware. As a result, system updates could affect more than visual styling; they could also cause camera startup failures, image dimension changes, or rendering issues.
When issues appeared on newly released system versions, public information was often limited. I created minimal reproducible cases, identified the affected technical layer, and investigated through Apple Developer Forums, browser documentation, and related specifications.
If waiting for a platform-side fix was not practical, I designed compatibility fixes with a clearly limited impact area, avoided changes that could affect other systems or browsers, and continued tracking fixes in later platform versions.
My Contribution
In this project, I mainly owned Web SDK and React interface development, along with browser, mobile device, and camera MediaStream compatibility work.
Through a unified SDK API, the virtual try-on feature could be embedded into different client websites with the same integration approach, reducing the need to rebuild core functionality for each project. I also helped define GA4 and Countly event specifications so product and business teams could track user actions and error states consistently.
For cross-browser issues, I categorized problems by device, system version, browser, and failure stage, built reproducible test methods, and added targeted compatibility handling with clearly defined impact boundaries.