The 20th century turned out to be an era of exponential growth in the field of machine learning.

Then, the rise ofOpenAIs botin DOTA2 and other fun (potentially harmful) stuff likeDeepfake.

But, keeping everything aside, the point is that ML is highly math-intensive.

Machine learning for everyone: How to implement pose estimation in a browser using your webcam

The library provides access to machine learning algorithms and models in the net online gate.

Official developers

In the online window.

But, what do I need?

Article image

A brief intro to human pose estimation

Lets take a small example.

Neural networks these days come in a lot more flavors than Baskin and Robbins have in ice cream.

(If you are wondering,its 31.)

Article image

In our case, we use a convolutional neural data pipe, a.k.a CNN, to deal with images.

ml5.js is a wrapper around TensorFlow.js, which also provides thePoseNetmodel.

We are using two libraries here:

Ive added extensive documentation inside the code, explaining every single line.

Article image

Here, we will discuss the main crux which is the majority of the code anyway.

Here, canvas haswidth: 640pxandheight: 480px.

We set the webcam video to the same height and width of our canvas.

Article image

Whenever the webcam gives a new image, it is given to the PoseNet model.

The moment pose is detected and output is ready.

It callsfunction(results), whereresultsis the final output ofkeypointsand scores given by the model.

Article image

As we know, thedraw()function runs in a loop forever.

This is theposekey-value out of theposeandskeletonvalues, provided for each person in an image.

We have a function to draw detected points on the image.

Article image

Remember, we saved all the results from the PoseNet output in theposesarray.

Here, we loop through everyposeor person in an image and get itskeypoints.

index.html

This is the main page where we display our output.

Article image

We add all our libraries using script tags.

We show a cute welcome intro to the user.

As model loading takes time, we show the Loading model…message.

Article image

At last, we put our own JS code inside the body.

Run theindex.htmlfile to see the output.

check that you allow webcam access when prompted.

Article image

Kartik Nighania is a a machine learning enthusiast who loves computer vision more than NLP.

He previously worked in the field of robotics especially drones which haunts me to this date.

In love with Kaggle.

Also tagged with