Component Name:HandController

Description:

A React component that leverages a camera to detect hands using a hand detection model (MediaPipe Hands), enabling users to control actions or interactions within the application using hand gestures.

Demo

Handly Alchemy - game to discover new elements by combining others.

Features:

• Real-time Hand Detection: Utilizes a high-performance hand detection model to track and analyze hand positions and gestures in real-time.
• Gesture Recognition: Interprets detected hand gestures, translating them into specific actions or commands.
• Interactive Feedback: Provides visual feedback to the user regarding detected gestures and recognized actions.
• Flexible Integration: Designed to be easily integrated into various React applications and components.

Example Usage:

importHandControllerfrom"react-hand-controller";functionMyComponent(){return(<div><HandControllerpassThroughPinchAsClick={true}showMiniCamera={true}showFeedback={true}handGizmoConfig={{showCenter: true,showPose: false,}}onModelLoaded={()=>{this.setState({loaded: true});}}onHandUpdate={this.onHandsUpdate.bind(this)}onPinch={this.onPinch.bind(this)}onPoseChange={this.inPoseChange.bind(this)}onDragStart={this.onDragStart.bind(this)}onDrag={this.onDrag.bind(this)}onDrop={this.onDrop.bind(this)}/></div>);}