Add face, hand, & pose tracking to your projects in a snap✨👌

// Enable Mediapipe's "Hands" model
const handsfree = new Handsfree({hands: true})
// Enable plugins tagged with "browser"
handsfree.enablePlugins('browser')
// Start tracking
handsfree.start()

Special thanks to: COSA, OSSTA, The STUDIO for Creative Inquiry, Glitch.com, Google PAIR, and you!

https://www.youtube.com/watch?v=JywgoqmTr68


https://img.shields.io/github/stars/midiblocks/handsfree?style=social

https://img.shields.io/github/tag/handsfreejs/handsfree.svg

https://img.shields.io/github/last-commit/handsfreejs/handsfree.svg

https://img.shields.io/github/repo-size/handsfreejs/handsfree.svg

Powered by: TensorFlow.js, MediaPipe, Jeeliz

GitHub - MIDIBlocks/handsfree: Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap ✨👌

Gesture Mapper: Hands - Handsfree.js


Quickstart from CDN

<head>
  <!-- Include Handsfree.js -->
  <link rel="stylesheet" href="<https://unpkg.com/handsfree@8.4.4/build/lib/assets/handsfree.css>" />
  <script src="<https://unpkg.com/handsfree@8.4.4/build/lib/handsfree.js>"></script>
</head>
 
<body>
  <!-- Instantiate and start it after <body> -->
  <script>
    const handsfree = new Handsfree({hands: true})
    handsfree.enablePlugins('browser')
    handsfree.start()
  </script>
</body>

Quickstart with NPM

# From your projects root
npm i handsfree
// Inside your app
import Handsfree from 'handsfree'
import 'handsfree/build/lib/assets/handsfree.css'
 
const handsfree = new Handsfree({hands: true})
handsfree.enablePlugins('browser')
handsfree.start()