Canary

Your browser is now a digital canary. In 10 seconds, know if the air, sound, and light around you are actually safe.

Comment

Inspiration

Honestly, we struggled a lot just finding an idea. The theme was health, and every idea we came up with already existed or could be done with ChatGPT in like 2 seconds. We were kind of stuck. Then we started talking about random stuff and somehow i thought of how coal miners back in the 1900s used to bring canaries into the mines with them. The reason was that they had no way to detect toxic gases underground, so if the bird stopped singing or died, they knew the air was bad and they had to run. It was literally how they stayed alive. And the more we thought about it, the more we realized we kind of have the same problem now, just with different invisible stuff. Like, nobody actually knows the air quality in their room, or how loud their environment is, or if their lighting is messing up their eyes. So we figured why not just make a digital version of that bird.

What it does

Canary is basically a website that scans your environment for 10 seconds and tells you how healthy or unhealthy it is. You click one button, give it permission to use your mic, camera, and location, and it does three things at the same time:

  • It measures how loud your room is using your microphone (in actual decibels)
  • It pulls the real air quality for wherever you are (PM2.5, ozone, AQI, all that stuff)
  • It uses your webcam to figure out if your lighting is too dim, just right, or too bright

Then it gives you one final score out of 100, plus a breakdown for each sense (hearing, lungs, eyes) with advice on what to do if anything's off. No sign-up, no app to download, and your camera and mic data never leave your computer.

How we built it

We used React with Vite for the frontend and basically everything runs in the browser, no backend at all. For the actual sensor stuff:

  • For the microphone, we used the Web Audio API. We grab the raw audio waveform, calculate the RMS (basically the loudness), and then convert that into decibels. We also added a NIOSH dose calculation which is what OSHA uses to figure out if your noise exposure at work is safe.
  • For the camera, we used MediaDevices to get the webcam feed, then we sample frames and use the Rec. 709 luminance formula to get the average brightness, and then we map that to a lux estimate using a curve we tuned by testing in different rooms.
  • For the air quality, we used the geolocation API to get your coordinates and then hit the Open-Meteo air quality API (it's free and doesn't need a key). Then we convert the PM2.5 value into the US EPA AQI scale.

Every reading gets turned into a score from 0 to 100 based on real published health guidelines from WHO, EPA, IES, and NIOSH. Then we average the three sensor scores together (with a small penalty if any single one is really bad) to get the final Canary Score.

The animations, the parallax background, the score ring, the waveform, that's all just SVG and CSS, no charting libraries.

Challenges we ran into

The biggest pain was figuring out how to actually calibrate the sensors. Browsers don't give you real decibel values from the mic, you get a normalized number between -1 and 1, and you have to figure out how to convert that into something that actually matches reality. We spent a while testing in quiet rooms, normal conversation, loud music, etc. to dial in the right offset. The webcam lux thing was even worse because webcams have auto-exposure which messes with the brightness reading. We had to build a custom mapping curve based on testing different lighting setups.

The other huge problem was the UX of the scan itself. Our first version had numbers that were constantly fluctuating on screen and it looked chaotic and was impossible to actually read. We had to rebuild it as a proper 10-second scan that collects samples, averages them, and then freezes the final results so you can actually see what they are.

Also we went through like 20 different names. Aura, Vivair, Halcyon, SenseGuard, Atmos, Mirador... honestly half the ideas felt either too cringey or already taken. We finally landed on Canary because the coal mine story was just too good to pass up.

Accomplishments that we're proud of

  • We built something that actually can't be replaced by ChatGPT. Every number on the screen is real data from real sensors, not generated text.
  • We didn't make up the health math, every threshold and score is based on real guidelines from WHO, EPA, IES, and NIOSH.
  • The UI looks like an actual product, not a hackathon project. We did the parallax background, glass morphism cards, the animated webcam preview during the scan, the gradient text, the smooth transitions, all from scratch.
  • Nothing leaves your device except the air quality API call (which just sends coordinates). No backend, no account, no tracking.
  • The story actually means something. We didn't just slap a name on it, the whole product is built around the canary metaphor and it makes the experience way more memorable.

What we learned

  • Browsers can do way more than we thought. We had no idea you could get real-time audio waveforms, sample webcam frames, and pull location data all from a regular website with no backend.
  • The hardest part of a hackathon is honestly just finding an idea worth building. We spent almost as much time killing bad ideas as we did writing code.
  • Tying everything to real science makes a huge difference. Once we started referencing real guidelines instead of making up our own numbers, the whole thing felt 10x more legit.
  • Restrictions actually help you. We weren't allowed (or didn't have time) to use a backend, and that forced us to learn a bunch of browser APIs we'd never touched.

What's next for Canary

  • History tracking: let people save their scans locally so they can see how their environment changes over time (like comparing their bedroom in winter vs summer, or their classroom in the morning vs after lunch).
  • More sensors: we want to add UV detection, screen time tracking, posture analysis with pose detection, and even camera-based heart rate measurement.
  • Alerts: let people opt in to browser notifications if the air quality drops near them or if they've been in loud environments too long.
  • Shareable reports: a clean link to a snapshot of your scan that you could show your doctor, your school, or your landlord if your environment isn't safe.
  • A mobile version: phones actually have way better sensors than laptops (real light sensors, better mics, GPS) so Canary on a phone could be way more powerful, basically a digital canary on your shoulder wherever you go.

Built With

Share this project:

Updates