React Hand Controller Component:

alchemy.mp4

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:

import HandController from "react-hand-controller";

function MyComponent() {
  return (
    <div>
      <HandController
        passThroughPinchAsClick={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>
  );
}