-
Notifications
You must be signed in to change notification settings - Fork 0
/
settings.js
115 lines (97 loc) · 4.23 KB
/
settings.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
let context = document.getElementById("canvas").getContext('2d', { 'willReadFrequently': true });
let VIDEO_SIZE = { 'width': 1024, 'height': 768 };
let adjustColor = getCSSColor([250, 0, 0, .25]);
let detectedColor = getCSSColor([0, 250, 0, 0.8]);
var rectLeft = { x: 0, y: 0, width: 0, height: 0 };
var rectRight = { x: 0, y: 0, width: 0, height: 0 };
var averageColorLeft = false;
var averageColorRight = false;
var captureDefault = false;
let settings = {
detectionWidth: 110,
detectionHeight: 110,
detectionDistance: 70,
colorThreshold: 40,
defaultColorLeft: false,
defaultColorRight: false,
blockSize: 5
};
let fps = {
frameCount: 0,
timeMillis: 0
};
function setRange(id, value, min, max) {
let range = document.getElementById(id);
range.min = Math.max(1, Math.round(min));
range.max = Math.round(max);
range.value = Math.round(value);
}
setRange('detectionWidth', settings.detectionWidth, 0, canvas.width / 2);
setRange('detectionHeight', settings.detectionHeight, 0, canvas.height);
Array.from(document.querySelectorAll('input[type="range"]')).forEach(input => {
input.previousElementSibling.firstElementChild.value = input.value;
input.addEventListener('input', function (event) {
input.previousElementSibling.firstElementChild.value = input.value;
settings[input.id] = parseInt(input.value);
}, true)
});
function captureFrame() {
rectLeft.x = (canvas.width - settings.detectionDistance) / 2 - settings.detectionWidth;
rectLeft.y = (canvas.height - settings.detectionHeight) / 2;
rectLeft.width = settings.detectionWidth;
rectLeft.height = settings.detectionHeight;
rectRight.x = (canvas.width + settings.detectionDistance) / 2;
rectRight.y = (canvas.height - settings.detectionHeight) / 2;
rectRight.width = settings.detectionWidth;
rectRight.height = settings.detectionHeight;
context.drawImage(video, 0, 0, canvas.width, canvas.height);
averageColorLeft = getAverageRGBwithBlock(context.getImageData(rectLeft.x, rectLeft.y, rectLeft.width, rectLeft.height), settings.blockSize);;
averageColorRight = getAverageRGBwithBlock(context.getImageData(rectRight.x, rectRight.y, rectRight.width, rectRight.height), settings.blockSize);
renderSettings();
if (screens[SCREENS.TIMEKEEPER].style.display != 'none') {
if (calculateColorDifference(settings.defaultColorLeft, averageColorLeft) > settings.colorThreshold) {
detectCar(0);
}
if (calculateColorDifference(settings.defaultColorRight, averageColorRight) > settings.colorThreshold) {
detectCar(1);
}
}
video.requestVideoFrameCallback(captureFrame);
}
function renderSettings() {
let maxDistance = Math.max(0, canvas.width - settings.detectionWidth * 2);
setRange('detectionDistance', Math.min(settings.detectionDistance, maxDistance), 0, maxDistance);
// set default detection colors
if (captureDefault) {
captureDefault = false;
settings.defaultColorLeft = averageColorLeft;
settings.defaultColorRight = averageColorRight;
}
// check if color difference exceeds threshold
var drawColorLeft = adjustColor;
var drawColorRight = adjustColor;
if (settings.defaultColorLeft && settings.defaultColorRight) {
if (calculateColorDifference(settings.defaultColorLeft, averageColorLeft) > settings.colorThreshold) {
drawColorLeft = detectedColor;
}
if (calculateColorDifference(settings.defaultColorRight, averageColorRight) > settings.colorThreshold) {
drawColorRight = detectedColor;
}
}
// draw detection rectangles
context.fillStyle = drawColorLeft;
context.fillRect(rectLeft.x, rectLeft.y, rectLeft.width, rectLeft.height);
context.fillStyle = drawColorRight;
context.fillRect(rectRight.x, rectRight.y, rectRight.width, rectRight.height);
// draw fps
let nowMs = new Date().getTime();
if (fps.timeMillis == 0) {
fps.timeMillis = nowMs;
fps.frameCount = 0;
} else {
fps.frameCount++;
let framesPerSecond = Math.round(fps.frameCount / (nowMs - fps.timeMillis) * 1000);
context.fillStyle = adjustColor;
context.fillText(`${framesPerSecond} fps`, 2, 10);
}
}