Finger Mouse

Finger Mouse is a gesture recognition-based mouse that controls mouse movement and clicks through finger behaviors. It also provides underlying recognized finger joint events, allowing for custom interaction behaviors.

Online Demo | 中文

Quick Start

Using with npm

npm i finger-mouse

import { initFingerMouse } from 'finger-mouse';
initFingerMouse();

Using with CDN

<script src="https://cdn.jsdelivr.net/npm/finger-mouse"></script>
<script>
  FingerMouse.initFingerMouse();
</script>

Initialization Parameters

export declare function initFingerMouse(options?: {
    showOriginPointer?: boolean; // Whether to show the real mouse pointer, default is false
    showPanel?: boolean; // Whether to show the performance panel, default is false
    cdnMirror?: string; // CDN mirror address
    showCamera?: boolean; // Whether to show the camera画面, default is false
    showHandSkeleton?: boolean; // Whether to show the hand skeleton drawing, default is true
    fingerColor?: string; // Finger color, default is Red
    lineColor?: string; // Color of the connecting lines between nodes, default is White
    touchedFingerColor?: string; // Color of the finger when touched, default is Green
    whichHand?: "left" | "right" | "auto"; // Which hand to use for operation, "auto" means using the first recognized hand
    touchThreshold?: number; // Threshold for judging the distance when fingers touch, default is 25px
    showPointer?: boolean; // Whether to show the simulated mouse pointer, default is true
    disableDefaultAction?: boolean; // Whether to disable the default simulated mouse operation behavior, default is false
    onRenderReady?: () => void; // Callback function when rendering is ready
    onHandMove?: (x: number, y: number) => void; // Callback function when the thumb moves
    onFingerTouch?: (finger: IFinger, touched: boolean) => void; // Callback function when the thumb touches with four fingers
    onOriginData?: (data: any) => void; // Callback function for raw palm data
    onMouseDown?: (e: IMouseEvent) => void; // Simulated mouse click event under default mouse behavior
    onMouseUp?: (e: IMouseEvent) => void; // Simulated mouse release event under default mouse behavior
    onMouseMove?: (e: IMouseMoveEvent) => void; // Simulated mouse movement event under default mouse behavior
}): Promise<Camera>;

CDN Mirrors

The model-related resources used in FingerMouse are from third-party CDNs. The default is the jsDelivr China mirror. You can use other built-in mirrors or custom mirrors through CDM_MIRROR.

import { CDM_MIRROR } from 'finger-mouse';

API

FingerClient

const client = await initFingerMouse();

await client.ready; // Wait for rendering to be ready, equivalent to onRenderReady

client.isRenderReady; // Whether rendering is ready, boolean
client.pointer; // Get the simulated mouse pointer DOM element

client.isFingerTouched('index'); // Check if a certain finger is touching the thumb // 'index' | 'middle' | 'ring' | 'pinky';
client.destroy(); // Destroy the instance, cannot be used again after destruction

Mouse

const client = await initFingerMouse();
await client.ready; // Wait for rendering to be ready, equivalent to onRenderReady
const mouse = client.mouse;
client.clientX; // X coordinate of the simulated mouse pointer
client.clientY; // Y coordinate of the simulated mouse pointer