Show RF: Hydrovisor - Webcam-based hydration tracking that actually works
Link to project: hydrovisor.live
Link to project on Universe: hydrovisor-2-dhm1x
Project description:
I kept forgetting to drink water during long coding sessions. Timer-based reminders are annoying and I’d just ignore them. So I built Hydrovisor - it uses your webcam to detect when you’re actually drinking and only reminds you when you haven’t hydrated in a while.
The app runs entirely in your browser using Roboflow Inference.js and MediaPipe for face tracking. When it sees a cup/bottle near your mouth, it knows you’re drinking. Simple but effective.
How you used Roboflow:
I trained a custom model on 2,043 images to detect cups, bottles, and glasses. Started with stock photos (terrible results), then got coworkers to send videos of them actually drinking water at their desks. That real-world data made all the difference.
The key was using Inference.js to run object detection at 5 FPS directly in the browser. No server costs, no privacy concerns since nothing leaves your computer. Combined Roboflow’s detections with MediaPipe face landmarks to figure out when the cup overlaps with the mouth area.
Had to add temporal smoothing (500ms debounce) because drinking is a multi-second action and detection can be spotty mid-sip.
Try it out at hydrovisor.live or grab the source at github.com/rvirani1/hydrovisor. The model’s public on Universe if you want to build something similar.