-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (60 loc) · 2.54 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<title>ml5js Workshop: Creative Code Collective</title>
</head>
<body>
<p>you only look once (yolo!)</p>
<canvas width="1000" height="1000"></canvas>
<video autoplay></video>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
<script>
//links JS to HTML objects
const video = document.querySelector('video');
video.style.visibility = "hidden";
//creates the link to the webcam and streams it
navigator.mediaDevices.getUserMedia({video: true}).then((stream) => {video.srcObject = stream});
//draws the video object and makes a canvas to draw boxes on
const canvas = document.createElement('canvas');
//canvas.width = video.videoWidth;
//canvas.height = video.videoHeight;
var selectCanvas = document.querySelector('canvas');
var c = selectCanvas.getContext('2d')
c.strokeStyle = "cyan";
c.lineWidth = "3";
c.font = "14px Courier New"
//implements ML5 library
var yolo = ml5.YOLO(video, detect); //(video, options, detect)
var objects = [];
//var options = { filterBoxesThreshold: 0.01, IOUThreshold: 0.4, classProbThreshold: 0.4 }
function detect() {
yolo.detect(function(err, results){
//c.clearRect(0,0,1000,1000); //isn't working?
c.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
objects = results;
/*
for (var i=0; i < objects.length; i++) {
console.log(objects[i].className, objects[i].classProb)
}
*/
drawBoxes(objects);
detect();
});
};
//draws boxes around objects, for each object write it's name and probability, draw a box around it
function drawBoxes(ob) {
for (var i=0; i < ob.length; i++) {
//links video object to webcam stream
console.log(objects[i].className, objects[i].classProb)
//console.log((ob[i].x)*video.videoWidth, (ob[i].y)*video.videoHeight, (ob[i].w)*video.videoWidth, (ob[i].h)*video.videoHeight)
c.strokeText(ob[i].className, (ob[i].x)*video.videoWidth, (ob[i].y)*video.videoHeight)
c.rect((ob[i].x)*video.videoWidth, (ob[i].y)*video.videoHeight, (ob[i].w)*video.videoWidth, (ob[i].h)*video.videoHeight)
c.stroke()
}
}
//test draw
//c.rect(10, 10, 50, 50);
//c.stroke();
</script>
</body>
</html>