<!DOCTYPE html>
<!-- use this to access website https://advancedfunctions.co/covidpeoplecounter.html?maxCount=1553
//uncomment the following to view what the computer sees document.getElementById("imageProcessor1").style.display = "none";
-->
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<script src="https://kit.fontawesome.com/de23248495.js" crossorigin="anonymous"></script>
<style>
.grid-item{
margin: auto;
width: 70%;
background-color: rgba(0,0,0,1);
font-size: 2vw;
height:100%;
}
.item1{
background-color: rgba(0,0,0,1);
text-align: center;
font-family: sans-serif;
color: rgba(255,255,255,1);
}
.item2{
background-color: rgba(10,180,50,1);
text-align: center;
font-family: sans-serif;
color: rgba(255,255,255,1);
font-size: 10vw;
}
.item3{
background-color: rgba(255,255,255,1);
text-align: center;
font-family: sans-serif;
}
.item4{
background-color: rgba(10,180,50,1);
text-align: center;
font-family: sans-serif;
color: rgba(255,255,255,1);
}
</style>
</head>
<body onload="run()" >
<video id="liveStream" width="0" height="0"></video>
<video id="liveStream2" width="0" height="0"></video>
<div class="grid-item item1">
CAPACITY
</div>
<div class="grid-item item2" id="peopleCounter">
<span id="numerator"></span>/<span id="denominator">3</span>
</div>
<div class="grid-item item3">
<img src="walking.gif" id="animation" ></img>
</div>
<div class="grid-item item3" id="prompt">
</div>
<div class="grid-item item4" id="safetyPrecautions">
<!-- <i class="fas fa-pump-soap"></i> <i class="fas fa-handshake-alt-slash"></i> <i class="fas fa-head-side-mask"></i> <i class="fas fa-people-arrows"></i> -->
ENTER
</div>
<canvas id="imageProcessor1" width="320" height="240" ></canvas>
<!--<span id="status"></span>-->
<script>
var parameters = new URLSearchParams(window.location.search);
var maxCountParameter= parameters.get('maxCount');
var video = document.getElementById("liveStream");
var imageProcessorVisual1 = document.getElementById("imageProcessor1").getContext('2d');
var imageProcessorFrame1;
var numberOfPixels;
var initialPixelsAverage = [];
var pixelAverage = [];
var doOnce = true;
var changeCode = "000";
var changeCodeTimer = 0;
var movingRight = 0;
var movingLeft = 0;
var peopleCount = 0;
var maxPeopleCount = maxCountParameter;
document.getElementById("imageProcessor1").style.display = "none";
function run() {
navigator.mediaDevices.getUserMedia({video: {facingMode: 'user'}}).then(function (stream) {
video.srcObject = stream;
video.play();
});
repeat();
}
function repeat() {
process();
setTimeout(function () {
repeat();
}, 0);
}
function process() {
imageProcessorVisual1.drawImage(video, 0, 0, 320, 240);
imageProcessorFrame1 = imageProcessorVisual1.getImageData(0, 0, 320, 240);
numberOfPixels = imageProcessorFrame1.data.length / 4;
var xDistance;
var oneChange = 0;
var twoChange = 0;
var threeChange = 0;
var change = false;
if (doOnce) {
doOnce = false;
for (var i = 0; i < numberOfPixels; i++) {
initialPixelsAverage[i] = pixelAverage[i] = 0;
}
}
changeCodeTimer++;
for (var i = 0; i < numberOfPixels; i++) {
change = false;
xDistance = i % 320;
var red = imageProcessorFrame1.data[i * 4 + 0];
var green = imageProcessorFrame1.data[i * 4 + 1];
var blue = imageProcessorFrame1.data[i * 4 + 2];
pixelAverage[i] = (red + green + blue) / 3;
if (Math.abs(pixelAverage[i] - initialPixelsAverage[i]) > 5) {
imageProcessorFrame1.data[i * 4 + 0] = 0;
imageProcessorFrame1.data[i * 4 + 1] = 0
imageProcessorFrame1.data[i * 4 + 2] = 0;
initialPixelsAverage[i] = pixelAverage[i];
change = true;
}
imageProcessorFrame1.data[i * 4 + 3] = 0;
//first fifth
if (xDistance < (1 * 320) / 5) {
imageProcessorFrame1.data[i * 4 + 0] = 250;
imageProcessorFrame1.data[i * 4 + 3] = 255;
if (change) {
oneChange++;
}
}
//third fifth
if (xDistance > ((2 * 320) / 5) && xDistance < ((3 * 320) / 5)) {
imageProcessorFrame1.data[i * 4 + 1] = 250;
imageProcessorFrame1.data[i * 4 + 3] = 255;
if (change) {
twoChange++;
}
}
//fift fifth
if (xDistance > ((4 * 320) / 5) && xDistance < (5 * 320) / 5) {
imageProcessorFrame1.data[i * 4 + 2] = 250;
imageProcessorFrame1.data[i * 4 + 3] = 255;
if (change) {
threeChange++;
}
}
var threshold = 3000;
if (oneChange > threshold && twoChange < threshold && threeChange < threshold) {
if (changeCode == "000") {
movingRight++;
}
if (changeCode == "010") {
movingLeft++;
}
changeCode = "100";
changeCodeTimer = 0;
}
if (oneChange < threshold && twoChange > threshold && threeChange < threshold) {
if (changeCode == "100") {
movingRight++;
}
if (changeCode == "001") {
movingLeft++;
}
changeCode = "010";
changeCodeTimer = 0;
}
if (oneChange < threshold && twoChange < threshold && threeChange > threshold) {
if (changeCode == "010") {
movingRight++;
}
if (changeCode == "000") {
movingLeft++;
}
changeCode = "001";
changeCodeTimer = 0;
}
}
if (changeCodeTimer > 30) {
reset();
}
console.log(changeCode);
if (movingRight == 3) {
// document.getElementById("status").innerHTML = "Moving Right";
peopleCount++;
reset();
}
if (movingLeft == 3) {
// document.getElementById("status").innerHTML = "Moving Left";
if (peopleCount > 0) {
peopleCount--;
}
reset();
}
if (peopleCount < maxPeopleCount) {
document.getElementById("peopleCounter").style.background = "rgba(10,180,50,1)";
document.getElementById("safetyPrecautions").style.background = "rgba(10,180,50,1)";
document.getElementById("safetyPrecautions").innerHTML = "E N T E R";
// document.getElementById("prompt").innerHTML = "";
if(document.getElementById("animation").src.indexOf("stop.png")!=-1){
document.getElementById("animation").src="walking.gif";
}
} else {
document.getElementById("peopleCounter").style.background = "rgba(270,16,26,1)";
document.getElementById("safetyPrecautions").style.background = "rgba(270,16,26,1)";
document.getElementById("safetyPrecautions").innerHTML = "S T O P !";
// document.getElementById("prompt").innerHTML = " ";
document.getElementById("animation").src="stop.png";
}
document.getElementById("numerator").innerHTML = peopleCount;
document.getElementById("denominator").innerHTML = maxPeopleCount;
imageProcessorVisual1.putImageData(imageProcessorFrame1, 0, 0);
}
function reset() {
changeCode = "000";
movingRight = movingLeft = 0;
changeCodeTimer = 30;
console.log("reset " + changeCode);
// document.getElementById("status").innerHTML = "Ready";
}
</script>
</body>
</html>