Skip to content

Commit ae9a036

Browse files
jpgold830jpgold830
committed
first push
0 parents  commit ae9a036

File tree

3 files changed

+182
-0
lines changed

3 files changed

+182
-0
lines changed

‎index.html

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<title>AI object detection</title>
6+
<meta charset="utf-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
9+
<link rel="stylesheet" href="style.css">
10+
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
11+
</head>
12+
13+
<body>
14+
<h2 id="loadingText">Loading...</h2>
15+
<video playsinline autoplay muted controls="true" id="video"></video>
16+
<br><br>
17+
<canvas id="c1"></canvas>
18+
<br><br>
19+
<table>
20+
<tr>
21+
<td>AI:</td>
22+
<td>
23+
<div class="switch">
24+
<label>
25+
Off
26+
<input type="checkbox" id="ai" disabled>
27+
<span class="lever"></span>
28+
On
29+
</label>
30+
</div>
31+
</td>
32+
</tr>
33+
<tr>
34+
<td>FPS:</td>
35+
<td>
36+
<p class="range-field">
37+
<input type="range" id="fps" min="1" max="60" value="50">
38+
</p>
39+
</td>
40+
</tr>
41+
</table>
42+
43+
<script>
44+
var modelIsLoaded = false;
45+
46+
// Create a ObjectDetector method
47+
const objectDetector = ml5.objectDetector('cocossd', {}, modelLoaded);
48+
49+
// When the model is loaded
50+
function modelLoaded() {
51+
console.log("Model Loaded!");
52+
modelIsLoaded = true;
53+
}
54+
</script>
55+
<script src="video.js"></script>
56+
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
57+
</body>
58+
59+
</html>

‎style.css

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
body {
2+
text-align: center;
3+
}
4+
5+
video {
6+
width: 0px;
7+
height: 0px;
8+
}
9+
10+
table {
11+
width: auto;
12+
margin: auto;
13+
}
14+
15+
tr, td {
16+
border: 0px;
17+
text-align: center;
18+
}

‎video.js

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
document.getElementById("ai").addEventListener("change", toggleAi)
2+
document.getElementById("fps").addEventListener("input", changeFps)
3+
4+
const video = document.getElementById("video");
5+
const c1 = document.getElementById('c1');
6+
const ctx1 = c1.getContext('2d');
7+
var cameraAvailable = false;
8+
var aiEnabled = false;
9+
var fps = 16;
10+
11+
/* Setting up the constraint */
12+
var facingMode = "environment"; // Can be 'user' or 'environment' to access back or front camera (NEAT!)
13+
var constraints = {
14+
audio: false,
15+
video: {
16+
facingMode: facingMode
17+
}
18+
};
19+
20+
/* Stream it to video element */
21+
camera();
22+
function camera() {
23+
if (!cameraAvailable) {
24+
console.log("camera")
25+
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
26+
cameraAvailable = true;
27+
video.srcObject = stream;
28+
}).catch(function (err) {
29+
cameraAvailable = false;
30+
if (modelIsLoaded) {
31+
if (err.name === "NotAllowedError") {
32+
document.getElementById("loadingText").innerText = "Waiting for camera permission";
33+
}
34+
}
35+
setTimeout(camera, 1000);
36+
});
37+
}
38+
}
39+
40+
window.onload = function () {
41+
timerCallback();
42+
}
43+
44+
function timerCallback() {
45+
if (isReady()) {
46+
setResolution();
47+
ctx1.drawImage(video, 0, 0, c1.width, c1.height);
48+
if (aiEnabled) {
49+
ai();
50+
}
51+
}
52+
setTimeout(timerCallback, fps);
53+
}
54+
55+
function isReady() {
56+
if (modelIsLoaded && cameraAvailable) {
57+
document.getElementById("loadingText").style.display = "none";
58+
document.getElementById("ai").disabled = false;
59+
return true;
60+
} else {
61+
return false;
62+
}
63+
}
64+
65+
function setResolution() {
66+
if (window.screen.width < video.videoWidth) {
67+
c1.width = window.screen.width * 0.9;
68+
let factor = c1.width / video.videoWidth;
69+
c1.height = video.videoHeight * factor;
70+
} else if (window.screen.height < video.videoHeight) {
71+
c1.height = window.screen.height * 0.50;
72+
let factor = c1.height / video.videoHeight;
73+
c1.width = video.videoWidth * factor;
74+
}
75+
else {
76+
c1.width = video.videoWidth;
77+
c1.height = video.videoHeight;
78+
}
79+
};
80+
81+
function toggleAi() {
82+
aiEnabled = document.getElementById("ai").checked;
83+
}
84+
85+
function changeFps() {
86+
fps = 1000 / document.getElementById("fps").value;
87+
}
88+
89+
function ai() {
90+
// Detect objects in the image element
91+
objectDetector.detect(c1, (err, results) => {
92+
console.log(results); // Will output bounding boxes of detected objects
93+
for (let index = 0; index < results.length; index++) {
94+
const element = results[index];
95+
ctx1.font = "15px Arial";
96+
ctx1.fillStyle = "red";
97+
ctx1.fillText(element.label + " - " + (element.confidence * 100).toFixed(2) + "%", element.x + 10, element.y + 15);
98+
ctx1.beginPath();
99+
ctx1.strokeStyle = "red";
100+
ctx1.rect(element.x, element.y, element.width, element.height);
101+
ctx1.stroke();
102+
console.log(element.label);
103+
}
104+
});
105+
}

0 commit comments

Comments
 (0)