In this liveProject, you’ll set up and tune a TensorFlow.js PoseNet model in a React web app. PoseNet allows real-time human pose estimation in your browser, all through the magic of TensorFlow.js. You’ll enable a WebGL backend, set up a system where PoseNet can utilize a webcam stream for its data input, and establish a canvas that can draw on top of an estimated pose.
This project is designed for learning purposes and is not a complete, production-ready application or solution.
- Basics of HTML
- Basics of Node.js, NPM, and Yarn
- Basics of React
- Basics of TensorFlow.js
- Visual Studio Code
- Basics of machine learning
you will learn
In this liveProject, you’ll learn to use the TensorFlow.js library as part of a React app. You’ll master the basics of machine learning and web development, and how to combine the two.
- Setting up TensorFlow.js PoseNet model in React Web app
- Enabling WebGL backend
- Setting up webcam livestream processing in React Web app
- Feeding webcam livestream data into PoseNet model for pose estimation
- Drawing detected pose keypoints and skeleton on the canvas
- Implementing basic React UI to start and stop pose estimation