adam
Back to Portfolio

Prototyping: Browser-Based Object Detection with Real-Time Visual Feedback

Machine Learning & UI

I built a real-time visual guidance prototype using in-browser object detection to detect object framing and provide live visual feedback to users.

As the sole engineer on the project, I was tasked with creating the experience from the ground up. The goal was to enable users to capture photos with guided visual feedback, ensuring objects are correctly positioned within defined boundaries.

To support fast iteration and feedback, I used Storybook to prototype and share interactive states. After exploring multiple approaches, I landed on a browser-based object detection solution that streams webcam video to a <canvas> and applies ML-driven detection logic on each frame using requestAnimationFrame.

This was one of the most technically and creatively rewarding challenges I've worked on — blending real-time video processing, visual UX cues, and client-side machine learning in the browser.

Notable Technologies

TensorFlow.jsgetUserMediaStorybookReactTypeScript