Thanks for the feedback. Glad you found an orientation which works. I'll definitely look at ways like you mentioned to help people get into that position first time round.
I'll work on those points. I'll have to work on making the pushup/'raise the roof' detection smarter. Generally I get good results when I face the webcam whilst on the floor such that when I push up some portion of my forehead goes out of view. I do this before clicking start.
My intention isn't to only count pushups with perfect form, as I want it to be useable by all audiences, even if you can only do box push ups.
Haha, the alarm is quite annoying. I have custom alarm sounds as a todo now.
My reasons for using React:
Speed of development: I work with react nearly everyday at work, so a lot of its usage has become muscle memory. React abstracts away the need to think about the DOM, I don't need to write any query selectors, or think about what part of the DOM should be re-rendered when. The end result is that I can code up a simple view, and focus my efforts on the complex/fun stuff - the bit which counts the pushups. If I took the project no further, at least I invested my time on the most rewarding and fun parts of development.
Code reusability for Mobile apps: The alarm uses setInterval to track when to go off. This works well for me on desktop, but when minimising a browser on a mobile phone the javascript code stops executing. I need an app. With this in mind, having a React codebase means I can create a mobile app with react native and reuse code I already have. Also, going forward I'd have parity of web app and mobile features.
I sympathise with those who call for dynamic websites with a sprinkling of Javascript. I think most traditional websites like blogs and simple e-commerce sites are better served by that model. But, in cases where your sites core functionality needs JavaScript anyway, has a lot of state changes, and resemble what would have been a desktop app years ago, React makes sense. Saying that, even with traditional sites I'd be tempted to use react with server side rendering. Just because I love how I can reason about everything in JavaScript, compose my App from the ground up with components (divide and conquer), and group code by responsibility as opposed to arbitrary splitting between business logic and views.
No, I did try that but it was too slow. I will write up an article once I have improved it if people are interested in.
In a nutshell, I take a stream of frames from the camera, then do a diff on the frames to see what has moved, I then see if the diff of pixels over time is what I'd expect a pushup to look like using basic logic. The movement of pixels over time should look similar to a sine wave. I threw in some simple logic to account for noise in the data.
I've been working on a web app which counts your pushups via your webcam.
You place your laptop/phone on the floor, do pushups whilst looking at the camera, and the app counts how many you do.
I integrated this functionality into an alarm clock which you can only turn off by doing a preset number of pushups.
I've posted it here for two reasons.
First to see if it works. It work well for me. BUT, there must be a data/sample bias based on how I do pushups.
Second, to see if people get value from this.
Would appreciate feedback around how well it counts pushups (if you can't do pushups, you can try sit-ups, just make sure your head leaves the camera at the top). And let me know if you are interested in future testing.