-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathARindex12.html
101 lines (82 loc) · 2.99 KB
/
ARindex12.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
<title>Hand Pose Detection</title>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]/dist/handpose.js"></script>
</head>
<body>
<h1>Hand Pose Detection</h1>
<video id="handVideo" width="640" height="480" autoplay></video>
<script>
// Loading the handpose model
const loadHandposeModel = async () => {
const model = await handpose.load();
return model;
};
// Getting hand keypoints from the video stream
const getHandKeypoints = async () => {
const videoElement = document.getElementById('handVideo');
const model = await loadHandposeModel();
const predictions = await model.estimateHands(videoElement);
return predictions;
};
// Computing the distance between two points
const calculateDistance = (point1, point2) => {
const xDiff = point1[0] - point2[0];
const yDiff = point1[1] - point2[1];
return Math.sqrt(xDiff ** 2 + yDiff ** 2);
};
// Computing the angle between vectors using the dot product formula
const calculateAngle = (vector1, vector2) => {
const dotProduct = vector1[0] * vector2[0] + vector1[1] * vector2[1];
const magnitude1 = Math.sqrt(vector1[0] ** 2 + vector1[1] ** 2);
const magnitude2 = Math.sqrt(vector2[0] ** 2 + vector2[1] ** 2);
return Math.acos(dotProduct / (magnitude1 * magnitude2));
};
// Getting the angles between hand fingers
const getFingerAngles = (keypoints) => {
const fingerIndices = [
[0, 1, 2], // Index finger
[0, 5, 6], // Middle finger
[0, 9, 10], // Ring finger
[0, 13, 14], // Pinky finger
];
const angles = [];
for (const fingerIndex of fingerIndices) {
const [start, middle, end] = fingerIndex;
const startPoint = keypoints[start];
const middlePoint = keypoints[middle];
const endPoint = keypoints[end];
const vector1 = [middlePoint[0] - startPoint[0], middlePoint[1] - startPoint[1]];
const vector2 = [middlePoint[0] - endPoint[0], middlePoint[1] - endPoint[1]];
const angle = calculateAngle(vector1, vector2);
angles.push(angle);
}
return angles;
};
// Main function
const main = async () => {
const videoElement = document.getElementById('handVideo');
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
videoElement.srcObject = stream;
videoElement.addEventListener('loadeddata', async () => {
const keypoints = await getHandKeypoints();
const angles = getFingerAngles(keypoints);
console.log('Finger angles:', angles);
});
// Handle any errors that occur during video stream or handpose estimation
videoElement.addEventListener('error', (error) => {
console.error('Error accessing video stream:', error);
});
} catch
(error) {
console.error('Error accessing camera:', error);
}
};
// Call the main function when the DOM is loaded
document.addEventListener('DOMContentLoaded', main);
</script>
</body>
</html>