-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
91 lines (77 loc) · 2.78 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
const video = document.getElementById('video');
const emojiContainer = document.getElementById('emojiContainer'); // Emoji container
const historyContainer = document.getElementById('historyContainer'); // History container
const history = new CookieHistory();
const emojiMap = {
neutral: "😐",
happy: "😄",
sad: "😢",
angry: "😠",
surprised: "😲",
disgusted: "🤢",
fearful: "😨",
};
Promise.all([
faceapi.nets.tinyFaceDetector.loadFromUri('/team-16-front-react/models'),
faceapi.nets.faceLandmark68Net.loadFromUri('/team-16-front-react/models'),
faceapi.nets.faceRecognitionNet.loadFromUri('/team-16-front-react/models'),
faceapi.nets.faceExpressionNet.loadFromUri('/team-16-front-react/models'),
faceapi.nets.ssdMobilenetv1.loadFromUri('/team-16-front-react/models')
]).then(startVideo);
function startVideo() {
navigator.getUserMedia(
{ video: {} },
(stream) => (video.srcObject = stream),
(err) => console.error(err)
);
try {
navigator.mediaDevices
.getUserMedia({ video: {} })
.then((stream) => {
video.srcObject = stream;
})
.catch((err) => console.error("Error accessing the camera: ", err));
} catch {
console.error("getUserMedia is not available");
}
}
async function getCurrentEmotion(video) {
let expressions = (
await faceapi.detectSingleFace(video).withFaceExpressions()
).expressions;
let resultExpression = "neutral";
// Get the most possible emotion
for (let key in expressions) {
let value = expressions[key];
if (value > expressions[resultExpression]) {
resultExpression = key;
}
}
return resultExpression;
}
video.addEventListener("play", () => {
const canvas = faceapi.createCanvasFromMedia(video);
const videoContainer = document.getElementById("video-container");
videoContainer.append(canvas);
const displaySize = { width: video.width, height: video.height };
faceapi.matchDimensions(canvas, displaySize);
for (emotion of history.getHistoryList()) { // emotion = {name: 'sad', date: 1690661025999}
historyContainer.insertAdjacentHTML('afterbegin', `<p class='historyItem'>${emotion.emotion}<span class='historySpan'>${emotion.date}</span></p>`);
}
setInterval(async () => {
let emotion = await getCurrentEmotion(video);
let lastEmotion = historyContainer.querySelector('p:first-of-type')?.textContent ?? 'neutral';
// Neutral emotion check
if (emotion === 'neutral') {
emojiContainer.innerHTML = '';
return;
}
if (lastEmotion === emotion) {
emojiContainer.innerHTML = emojiMap[emotion];
return;
}
historyList = history.addItem(emotion);
emojiContainer.innerHTML = emojiMap[emotion];
historyContainer.insertAdjacentHTML('afterbegin', `<p class='historyItem'>${emotion}</p>`);
}, 100);
});