React Hand Tracking SDK

A simple sdk for tracking the actions of the hands

Installation

To use the GoApptiv Document Scanner, follow these steps:

1. Install the package using npm or yarn:

   npm i react-hand-tracking-sdk

2. Import the component in your project:

   import { HandDetector} from 'react-hand-tracking-sdk';

3. Use the component in your React application:

    <HandDetector canvasHeight={720} canvasWidth={1200}/>

Props

• canvasWidth: The width of the canvas in pixels.
• canvasHeight: The height of the canvas in pixels.
• loadingElement: The element to be displayed while the canvas loads.
• onHandsMove: A callback function that is called whenever the position of the hands changes. The callback function is passed an array of fingers (Scroll down to see the names of the points that you can access), where each finger is an object with the following properties:
  • x: The x-coordinate of the fingertip in pixels.
  • y: The y-coordinate of the fingertip in pixels.
• fingersUp: A callback function that is called whenever the number of fingers up changes. The callback function is passed an array of 1s and 0s, where 1 represents a finger that is up and 0 represents a finger that is down.

Hand Parts

The HandPartKeys enum defines the keys that can be used to access the positions of the hand landmarks:

• Wrist: The wrist landmark.
• ThumbBottom: The bottom knuckle of the thumb.
• ThumbMiddleBottom: The middle knuckle of the thumb.
• ThumbMiddle: The middle joint of the thumb.
• ThumbTip: The tip of the thumb.
• IndexBottom: The bottom knuckle of the index finger.
• IndexMiddleBottom: The middle knuckle of the index finger.
• IndexMiddle: The middle joint of the index finger.
• IndexTip: The tip of the index finger.
• MiddleBottom: The bottom knuckle of the middle finger.
• MiddleMiddleBottom: The middle knuckle of the middle finger.
• MiddleMiddle: The middle joint of the middle finger.
• MiddleTip: The tip of the middle finger.
• RingBottom: The bottom knuckle of the ring finger.
• RingMiddleBottom: The middle knuckle of the ring finger.
• RingMiddle: The middle joint of the ring finger.
• RingTip: The tip of the ring finger.
• PinkyBottom: The bottom knuckle of the pinky finger.
• PinkyMiddleBottom: The middle knuckle of the pinky finger.
• PinkyMiddle: The middle joint of the pinky finger.
• PinkyTip: The tip of the pinky finger.

You can get the position of a hand landmark by using the following syntax:

javascript const fingerPosition = fingPositions[handPart];

where handPart is a key from the HandPartKeys enum. For example, to get the position of the tip of the index finger, you would use the following code:

javascript const indexFingerTipPosition = fingPositions["IndexTip"];

Futute Updates

Will increase the WebAssembly code percentage from "30%" to "70%" for better computations.