Getting Started With Handtrack.js
As a new web developer in 2019 who mostly works with Javascript, I’m often envious of people that know Python. Specifically because Python has all of the hip and cool Machine Learning libraries. Or at least that’s what I thought until I stumbled upon Handtrack.js, an awesome library that uses the TensorFlow.js object detection API to track hands using a computer’s webcam. You can’t do much under the hood to change the prediction models, but it’s a great way to quickly integrate some hand detection on your project, if that’s what you’re into. And while I think Victor Dibia did an incredible job creating this library and writing about its implementation, I thought I’d write up a quick tutorial for people like me who are totally new to this world. I learn best when I get to look at working code, so if that’s you as well, I would recommend checking out this Codepen. For the purposes of this blog post, I’m assuming you want to use the webcam to track hands and their movement. Handtrack.js can also be used to track hands in videos or even pictures, but I’m not going to get into that here.
The first step is obviously importing Handtrack.js. I decided to try it in vanilla Javascript, which just takes one script tag to get things started.
The next thing we need to do is set up an HTML environment for our hand tracking video. Really all we need is a video tag and a…
