-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcircles.html
96 lines (81 loc) · 2.62 KB
/
circles.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
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
<!DOCTYPE html>
<html>
<head>
<script src="utils.js"></script>
</head>
<body>
<video id="cam_input" height="360" width="420"></video>
<button onclick="pic();">Verify</button>
<canvas id="canvas_output"></canvas>
</body>
<script>
function openCvReady(){
cv['onRuntimeInitialized']=()=>{
let video = document.getElementById("cam_input"); // video is the id of video tag
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred! " + err);
});
};
}
// Edge Finding
function edges(src){
let dst = new cv.Mat();
cv.cvtColor(src, src, cv.COLOR_RGB2GRAY, 0);
// You can try more different parameters
cv.Canny(src, dst, 50, 100, 3, false);
cv.imshow('canvas_output', dst);
return dst;
//src.delete(); dst.delete();
}
//Counting & Display Circles
function countCircles(src){
//let src = cv.imread('canvasInput');
let dst = cv.Mat.zeros(src.rows, src.cols, cv.CV_8U);
let circles = new cv.Mat();
let color = new cv.Scalar(255, 0, 0);
cv.cvtColor(src, src, cv.COLOR_RGBA2GRAY, 0);
// You can try more different parameters
/* cv.HoughCircles(src, circles, cv.HOUGH_GRADIENT,
1, 45, 75, 40, 0, 0);
// draw circles
for (let i = 0; i < circles.cols; ++i) {
let x = circles.data32F[i * 3];
let y = circles.data32F[i * 3 + 1];
let radius = circles.data32F[i * 3 + 2];
let center = new cv.Point(x, y);
cv.circle(dst, center, radius, color);
}
cv.imshow('canvas_output', dst);
src.delete(); dst.delete(); circles.delete();*/
}
function pic(){
let video = document.getElementById("cam_input");
let cap = new cv.VideoCapture(cam_input);
let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
cap.read(src);
let dst = edges(src);
console.log(dst);
console.log(src);
countCircles(src);
/*
// Edge Detection
let video = document.getElementById("cam_input");
let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
let dst = new cv.Mat(video.height, video.width, cv.CV_8UC1);
let cap = new cv.VideoCapture(cam_input);
let utils = new Utils('errorMessage');
let color = new cv.Scalar(255, 0, 0);
let dst1 = cv.Mat.zeros(src.rows, src.cols, cv.CV_8U);
let circles = new cv.Mat();
const FPS = 1;
//setTimeout(processVideo, 0);
//src.delete(); dst.delete(); circles.delete(); */
}
</script>
<script async src="opencv.js" onload="openCvReady();"></script>
</html>