Skip to content

Commit bcd1788

Browse files
yiyujinyiyujin
committed
add examples : single image, video(resizing canvas to video and showing transparent canvas on top of video)
1 parent 49b2e8e commit bcd1788

File tree

7 files changed

+190
-1
lines changed

7 files changed

+190
-1
lines changed

‎examples/objectDetection-sigle-image/dog_cat.jpg‎

323 KB
Loading

‎examples/objectDetection-sigle-image/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!--
2+
👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
Learn more about the ml5.js project: https://ml5js.org/
4+
ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
6+
This example demonstrates object detection on a single image through ml5.objectDetector.
7+
-->
8+
9+
<!DOCTYPE html>
10+
<html lang="en">
11+
<head>
12+
<meta charset="UTF-8" />
13+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
15+
<title>ml5.js objectDetector Example - Single Image</title>
16+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
17+
<script src="../../dist/ml5.js"></script>
18+
</head>
19+
<body>
20+
<main>
21+
</main>
22+
<script src="sketch.js"></script>
23+
</body>
24+
</html>

‎examples/objectDetection-sigle-image/sketch.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/*
2+
* 👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
* Learn more about the ml5.js project: https://ml5js.org/
4+
* ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
*
6+
* This example demonstrates detecting objects in a live video through ml5.imageClassifier.
7+
*/
8+
9+
let img;
10+
let detector;
11+
let detections = [];
12+
13+
function preload(){
14+
detector = ml5.objectDetector("cocossd");
15+
img = loadImage('dog_cat.jpg');
16+
}
17+
18+
function setup() {
19+
createCanvas(640, 480);
20+
image(img, 0, 0);
21+
detector.detectStart(img, gotDetections);
22+
}
23+
24+
// Callback function is called each time the object detector finishes processing a frame.
25+
function gotDetections(results) {
26+
// Update detections array with the new results
27+
detections = results;
28+
29+
for (let i = 0; i < detections.length; i += 1) {
30+
let detection = detections[i];
31+
32+
// Draw bounding box
33+
stroke(0, 255, 0);
34+
strokeWeight(4);
35+
noFill();
36+
rect(detection.x, detection.y, detection.width, detection.height);
37+
38+
// Draw label
39+
noStroke();
40+
fill(255);
41+
textSize(24);
42+
text(detection.label, detection.x + 10, detection.y + 24);
43+
}
44+
}

‎examples/objectDetection-video/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!--
2+
👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
Learn more about the ml5.js project: https://ml5js.org/
4+
ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
6+
This example demonstrates object detection on a video through ml5.objectDetector.
7+
-->
8+
9+
<!DOCTYPE html>
10+
<html lang="en">
11+
<head>
12+
<meta charset="UTF-8" />
13+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
14+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
15+
<title>ml5.js objectDetector Example - Video</title>
16+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
17+
<script src="../../dist/ml5.js"></script>
18+
</head>
19+
<body>
20+
<main>
21+
</main>
22+
<script src="sketch.js"></script>
23+
</body>
24+
</html>

‎examples/objectDetection-video/sketch.js‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
/*
2+
* 👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
* Learn more about the ml5.js project: https://ml5js.org
4+
* ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
*
6+
* This example demonstrates detecting objects in a video file through ml5.objectDetector.
7+
*/
8+
9+
let video;
10+
let detector;
11+
let detections = [];
12+
let canvasElement;
13+
14+
function preload(){
15+
detector = ml5.objectDetector("cocossd");
16+
}
17+
18+
function setup() {
19+
// Create canvas with initial size - will be resized later
20+
canvasElement = createCanvas(640, 480);
21+
canvasElement.position(0, 0);
22+
23+
// Create video element (paused by default)
24+
video = createVideo('test.mov');
25+
video.position(0, 0);
26+
video.volume(0);
27+
video.showControls();
28+
29+
// Make canvas transparent and on top
30+
canvasElement.style('z-index', '1');
31+
canvasElement.style('pointer-events', 'none'); // Allow clicks to pass through to video
32+
video.style('z-index', '-1');
33+
34+
// Set up video event listeners
35+
video.elt.addEventListener('loadedmetadata', () => {
36+
console.log('Video metadata loaded');
37+
38+
// Resize canvas to match video size
39+
resizeCanvas(video.elt.videoWidth, video.elt.videoHeight);
40+
});
41+
42+
video.elt.addEventListener('play', () => {
43+
console.log('Video started playing');
44+
45+
// Start detection
46+
detector.detectStart(video, gotDetections);
47+
});
48+
49+
video.elt.addEventListener('pause', () => {
50+
console.log('Video paused');
51+
52+
// Stop detection when video is paused
53+
detector.detectStop();
54+
});
55+
56+
video.elt.addEventListener('ended', () => {
57+
console.log('Video ended');
58+
59+
// Stop detection when video ends
60+
detector.detectStop();
61+
});
62+
}
63+
64+
function draw(){
65+
// Clear the canvas (this acts as the transparent overlay)
66+
clear();
67+
68+
for (let i = 0; i < detections.length; i += 1) {
69+
let detection = detections[i];
70+
71+
// Draw bounding box
72+
stroke(0, 255, 0);
73+
strokeWeight(4);
74+
noFill();
75+
rect(detection.x, detection.y, detection.width, detection.height);
76+
77+
// Draw label
78+
noStroke();
79+
fill(255);
80+
textSize(24);
81+
text(detection.label, detection.x + 10, detection.y + 24);
82+
}
83+
}
84+
85+
// Callback function is called each time the object detector finishes processing a frame.
86+
function gotDetections(results) {
87+
// Update detections array with the new results
88+
detections = results;
89+
}

‎examples/objectDetection-video/test.mov‎

16.9 MB
Binary file not shown.

‎examples/objectDetection-webcam/index.html‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
1+
<!--
2+
👋 Hello! This is an ml5.js example made and shared with ❤️.
3+
Learn more about the ml5.js project: https://ml5js.org/
4+
ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md
5+
6+
This example demonstrates object detection on live video through ml5.objectDetector.
7+
-->
8+
19
<!DOCTYPE html>
210
<html lang="en">
311
<head>
412
<meta charset="UTF-8" />
513
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
614
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>ml5.js objectDetector Webcam Example</title>
15+
<title>ml5.js objectDetector Example - Webcam</title>
816
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
917
<script src="../../dist/ml5.js"></script>
1018
</head>

0 commit comments

Comments
 (0)