handtrack.js detects hands in browser video by applying a trained machine-learning model through TensorFlow.js. Its complexity stays behind a small Web Component that reads from a video element and can render tracking results to a canvas. section 15.4
A practical integration combines three pieces:
- Load the distributed handtrack.js script separately because the distributed library is not a module. section 15.4
- Expose detected hand locations through a Custom Event so other components can consume point coordinates without knowing the model internals. section 15.4
Hand tracker in a browser component
A custom element can request camera input, display a refreshed canvas, and listen for onHandLocation. The same component can be layered with another interface, such as a Web Harp that reacts to tracked hands.
