-
Notifications
You must be signed in to change notification settings - Fork 28
/
Hand-Tracking.html
116 lines (88 loc) · 2.57 KB
/
Hand-Tracking.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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/handpose"></script>
</head>
<body>
<video width=640 height=480 autoplay muted id="camera">
</video>
<canvas width=640 height=480 id="augmented_canvas"> </canvas>
<video autoplay muted loop id="movie" style="visibility: hidden">
<source src="frozen.mp4" type="video/mp4"> </source>
</video>
<script>
// hand tracking to move objects in Virtual / Augmented world
async function track_hand()
{
// load camera stream
const frame = document.getElementById("camera");
// load movie stream
const movie = document.getElementById("movie");
movie.play();
// prepare canvas
const canvas = document.getElementById("augmented_canvas");
const draw = canvas.getContext("2d");
// load hand-pose model
const model = await handpose.load();
// size of media player
const w = 250;
const h = 150;
// default position : top right corner
var index_x = canvas.width - w - 10;
var index_y = 10;
while(1)
{
// copy camera stream to canvas
draw.drawImage(frame, 0, 0, 640, 480);
// track hand position
const result = await model.estimateHands(frame);
// check if hand is detected
if(result.length > 0)
{
// get hand co-ordinates
const hand = result[0];
// update index finger tip position
const index = hand.annotations.indexFinger;
index_x = Math.round(index[3][0]);
index_y = Math.round(index[3][1]);
}
// display media player at assigned location
draw.drawImage(movie, index_x, index_y, w, h);
// loop to process the next frame
await tf.nextFrame();
}
}
</script>
<script>
function live_webcam()
{
// capture live video stream from web camera
if(navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia({video: true})
.then(function (stream) {video.srcObject = stream; });
}
}
function main()
{
// check if the video is loaded and ready for processing
video = document.getElementById("camera");
if(video.readyState == 4)
{
console.log("video is ready for processing..");
track_hand();
}
else
{
console.log("nope, not ready yet..");
setTimeout(main, 1000/30);
}
}
// capture live camera stream
live_webcam();
// detect gestures once the video is ready
main();
</script>
</body>
</html>