forked from WebDevSimplified/Face-Detection-JavaScript
-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
168 lines (157 loc) · 8.17 KB
/
script.js
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
const video = document.getElementById("video");
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri("./models"),
faceapi.nets.faceLandmark68Net.loadFromUri("./models"),
faceapi.nets.faceRecognitionNet.loadFromUri("./models"),
faceapi.nets.faceExpressionNet.loadFromUri("./models"),
]).then(startVideo);
function startVideo() {
navigator.getUserMedia(
{ video: {} },
(stream) => (video.srcObject = stream),
(err) => console.error(err)
);
}
video.addEventListener("play", () => {
const canvas = faceapi.createCanvasFromMedia(video);
document.getElementById("leftside").append(canvas);
const displaySize = { width: video.width, height: video.height };
faceapi.matchDimensions(canvas, displaySize);
setInterval(async () => {
const detections = await faceapi
.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions())
.withFaceLandmarks()
.withFaceExpressions();
if (detections.length != 0) {
obj = detections[0].expressions;
var sortable = [];
for (var vehicle in obj) {
sortable.push([vehicle, obj[vehicle]]);
}
sortable.sort(function (a, b) {
return a[1] - b[1];
});
let emotion = sortable[6][0];
document.getElementById("mood").innerHTML = emotion;
switch (emotion) {
default:
//offwhite
document.getElementById("neutral").style.display = "block";
document.getElementById("happy").style.display = "none";
document.getElementById("sad").style.display = "none";
document.getElementById("angry").style.display = "none";
document.getElementById("surprised").style.display = "none";
document.getElementById("disgusted").style.display = "none";
document.getElementById("fearful").style.display = "none";
document.getElementById("face").style.fill = "#a09879";
document.getElementById("BACKGROUND").style.fill = "#a09879";
document.getElementById("neutral").style.fill = "#635d46";
document.getElementById("emoji").style.fill = "#635d46";
document.getElementById("emoji").innerHTML =
"( ‾ ʖ̫ ‾ )";
break;
case "happy":
//yellow
document.getElementById("neutral").style.display = "none";
document.getElementById("happy").style.display = "block";
document.getElementById("sad").style.display = "none";
document.getElementById("angry").style.display = "none";
document.getElementById("surprised").style.display = "none";
document.getElementById("disgusted").style.display = "none";
document.getElementById("fearful").style.display = "none";
document.getElementById("face").style.fill = "#fbd266";
document.getElementById("BACKGROUND").style.fill = "#fbd266";
document.getElementById("happy").style.fill = "#ce9705";
document.getElementById("emoji").style.fill = "#ce9705";
document.getElementById("emoji").innerHTML =
"( ՞ਊ ՞ )";
//document.getElementById("emoji").innerHTML = "(☝︎ ՞ਊ ՞)☝︎";
break;
case "sad":
//blue
document.getElementById("neutral").style.display = "none";
document.getElementById("happy").style.display = "none";
document.getElementById("sad").style.display = "block";
document.getElementById("angry").style.display = "none";
document.getElementById("surprised").style.display = "none";
document.getElementById("disgusted").style.display = "none";
document.getElementById("fearful").style.display = "none";
document.getElementById("face").style.fill = "#669bc5";
document.getElementById("BACKGROUND").style.fill = "#669bc5";
document.getElementById("sad").style.fill = "#315e82";
document.getElementById("emoji").style.fill = "#315e82";
document.getElementById("emoji").innerHTML =
"( ꈨຶꎁꈨຶ )";
break;
case "angry":
//red
document.getElementById("neutral").style.display = "none";
document.getElementById("happy").style.display = "none";
document.getElementById("sad").style.display = "none";
document.getElementById("angry").style.display = "block";
document.getElementById("surprised").style.display = "none";
document.getElementById("disgusted").style.display = "none";
document.getElementById("fearful").style.display = "none";
document.getElementById("face").style.fill = "#963d3d";
document.getElementById("BACKGROUND").style.fill = "#963d3d";
document.getElementById("angry").style.fill = "#5a2525";
document.getElementById("emoji").style.fill = "#5a2525";
document.getElementById("emoji").innerHTML =
"( '益'︠ )";
break;
case "surprised":
//purple
document.getElementById("neutral").style.display = "none";
document.getElementById("happy").style.display = "none";
document.getElementById("sad").style.display = "none";
document.getElementById("angry").style.display = "none";
document.getElementById("surprised").style.display = "block";
document.getElementById("disgusted").style.display = "none";
document.getElementById("fearful").style.display = "none";
document.getElementById("face").style.fill = "#b07bac";
document.getElementById("BACKGROUND").style.fill = "#b07bac";
document.getElementById("surprised").style.fill = "#70436d";
document.getElementById("emoji").style.fill = "#70436d";
document.getElementById("emoji").innerHTML =
"( °□° )";
break;
case "disgusted":
//green
document.getElementById("neutral").style.display = "none";
document.getElementById("happy").style.display = "none";
document.getElementById("sad").style.display = "none";
document.getElementById("angry").style.display = "none";
document.getElementById("surprised").style.display = "none";
document.getElementById("disgusted").style.display = "block";
document.getElementById("fearful").style.display = "none";
document.getElementById("face").style.fill = "#536B5B";
document.getElementById("BACKGROUND").style.fill = "#536B5B";
document.getElementById("disgusted").style.fill = "#324037";
document.getElementById("emoji").style.fill = "#324037";
document.getElementById("emoji").innerHTML = "(╬⓪益⓪)";
break;
case "fearful":
//orange
document.getElementById("neutral").style.display = "none";
document.getElementById("happy").style.display = "none";
document.getElementById("sad").style.display = "none";
document.getElementById("angry").style.display = "none";
document.getElementById("surprised").style.display = "none";
document.getElementById("disgusted").style.display = "none";
document.getElementById("fearful").style.display = "block";
document.getElementById("face").style.fill = "#f4a454";
document.getElementById("BACKGROUND").style.fill = "#f4a454";
document.getElementById("fearful").style.fill = "#b9620c";
document.getElementById("emoji").style.fill = "#b9620c";
document.getElementById("emoji").innerHTML =
"( #ﾟДﾟ )";
break;
}
}
const resizedDetections = faceapi.resizeResults(detections, displaySize);
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
faceapi.draw.drawDetections(canvas, resizedDetections);
faceapi.draw.drawFaceLandmarks(canvas, resizedDetections);
faceapi.draw.drawFaceExpressions(canvas, resizedDetections);
}, 100);
});