-
Notifications
You must be signed in to change notification settings - Fork 28
/
Facemesh-Camera.html
101 lines (78 loc) · 2.11 KB
/
Facemesh-Camera.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
<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/facemesh"></script>
<script>
/* running facemesh code */
async function get_facemesh()
{
// load HTML canvas
var canvas = document.getElementById("facemesh");
var draw = canvas.getContext("2d");
// get video stream
const stream = document.getElementById("movie");
// load facemesh model
const model = await facemesh.load(maxFaces=1);
// process input stream frame by frame
while(1)
{
// fill canvas with black background
draw.fillStyle = "black";
draw.fillRect(0, 0, canvas.width, canvas.height);
// detect faces
const faces = await model.estimateFaces(stream);
if(faces.length != 0)
{
// loop through faces array to capture multiple faces
var mesh = faces[0].scaledMesh;
console.log(mesh);
/* highlight facial landmark points on canvas board */
draw.fillStyle = "#00FF00";
for(i=0; i< mesh.length; i++)
{
var [x, y, z] = mesh[i];
draw.fillRect(Math.round(x), Math.round(y), 2, 2);
}
}
else
{
console.log(`no faces detected..`);
}
// loop to process the next frame
await tf.nextFrame();
}
}
</script>
</head>
<body>
<video width=640 height=480 autoplay id="movie"> </video>
<canvas width=640 height=480 id="facemesh"> </canvas>
<br>
<script>
// capture live video stream from web camera
video = document.getElementById("movie");
if(navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia({video: true})
.then(function (stream) {video.srcObject = stream; });
}
// run face-mesh model once the video is ready for processing
main();
function main()
{
// check if the video is loaded and ready for processing
if(video.readyState == 4)
{
console.log("video is ready for processing..");
get_facemesh();
}
else
{
console.log("nope, not loaded yet..");
setTimeout(main, 1000/30);
}
}
</script>
</body>
</html>