-
Notifications
You must be signed in to change notification settings - Fork 5
/
dlib-wasm-test-js.js
84 lines (60 loc) · 2.38 KB
/
dlib-wasm-test-js.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
const webcamVideo = document.getElementById("webcam-video");
const inputCanvas = document.getElementById("input-canvas");
inputCanvas.width = 640;
inputCanvas.height = 480;
const overlayCanvas = document.getElementById("overlay-canvas");
overlayCanvas.width = 640;
overlayCanvas.height = 480;
const inputCanvasCtx = inputCanvas.getContext("2d");
const overlayCanvasCtx = overlayCanvas.getContext("2d");
const donnyBaseball = document.getElementById("donny-baseball");
function mainLoop() {
inputCanvasCtx.drawImage(webcamVideo, 0, 0, 640, 480);
const inputImgData = inputCanvasCtx.getImageData(0, 0, 640, 480);
const inputBufImg = Module._malloc(inputImgData.data.length);
Module.HEAP8.set(inputImgData.data, inputBufImg);
const ptr = Module.ccall("detect", "number", "number", [inputBufImg]) / Uint16Array.BYTES_PER_ELEMENT;
// Marshal the landmark data referenced by the pointer into a js array
const len = Module.HEAPU16[ptr];
const landmarks = [];
for (let i = 1; i < len; i += 2) {
const l = [Module.HEAPU16[ptr + i], Module.HEAPU16[ptr + i + 1]];
landmarks.push(l);
}
overlayCanvasCtx.clearRect(0, 0, 640, 480);
// Visually enumerate each landmark we're currently tracking
overlayCanvasCtx.fillStyle = "rgb(130, 255, 50)";
overlayCanvasCtx.font = "6px Arial";
for (let i = 1; i < landmarks.length; i += 1) {
overlayCanvasCtx.fillText(i, landmarks[i][0], landmarks[i][1]);
}
Module._free(ptr);
Module._free(inputBufImg);
requestAnimationFrame(mainLoop);
}
window.onload = () => {
navigator.mediaDevices.getUserMedia({video: true}).then(stream => {
webcamVideo.srcObject = stream;
webcamVideo.style.display = "none";
}).catch(err => {
alert(err);
});
console.log("Detecting in 2 seconds...");
setTimeout(() => {
const req = new XMLHttpRequest();
req.open("GET", "/shape_predictor_68_face_landmarks.dat", true);
req.responseType = "arraybuffer";
req.onload = (e) => {
const payload = req.response;
if (payload) {
const model = new Uint8Array(payload);
const inputBufModel = Module._malloc(model.length);
Module.HEAPU8.set(model, inputBufModel);
Module.ccall("init_shape_predictor", null, ["number", "number"], [inputBufModel, model.length]); // This pointer gets freed on the C++ side
// inputCanvasCtx.drawImage(donnyBaseball, 0, 0, 640, 480);
requestAnimationFrame(mainLoop);
}
}
req.send(null);
}, 2000);
}