import { Hands } from '@mediapipe/hands';
|
|
import { Camera } from '@mediapipe/camera_utils';
|
|
|
|
const videoElement = document.createElement('video');
|
|
videoElement.style.display = 'none';
|
|
document.body.appendChild(videoElement);
|
|
|
|
const hands = new Hands({
|
|
locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`,
|
|
});
|
|
|
|
hands.setOptions({
|
|
maxNumHands: 1,
|
|
modelComplexity: 1,
|
|
minDetectionConfidence: 0.7,
|
|
minTrackingConfidence: 0.7,
|
|
});
|
|
|
|
hands.onResults((results) => {
|
|
if (results.multiHandLandmarks && results.multiHandLandmarks.length > 0) {
|
|
const landmarks = results.multiHandLandmarks[0];
|
|
|
|
// 检测食指是否伸出:tip高于pip(y坐标更小)
|
|
const tip = landmarks[8]; // 食指指尖
|
|
const pip = landmarks[6]; // 第二个关节
|
|
|
|
if (tip.y < pip.y) {
|
|
console.log('✅ 食指伸出');
|
|
} else {
|
|
console.log('❌ 食指未伸出');
|
|
}
|
|
}
|
|
});
|
|
|
|
const camera = new Camera(videoElement, {
|
|
onFrame: async () => {
|
|
await hands.send({ image: videoElement });
|
|
},
|
|
width: 640,
|
|
height: 480,
|
|
});
|
|
|
|
camera.start();
|