Graduate

TODO: img transfer from frontend to backend

1 -flask run --cert=cert.pem --key=key.pem
...@@ -76,17 +76,24 @@ function processVideo() { ...@@ -76,17 +76,24 @@ function processVideo() {
76 let msize = new cv.Size(120, 120); 76 let msize = new cv.Size(120, 120);
77 classifier.detectMultiScale(gray, faces, 1.1, 3, 0, msize); 77 classifier.detectMultiScale(gray, faces, 1.1, 3, 0, msize);
78 // draw faces. 78 // draw faces.
79 - var images = new Array();
80 for (let i = 0; i < faces.size(); ++i) { 79 for (let i = 0; i < faces.size(); ++i) {
81 let face = faces.get(i); 80 let face = faces.get(i);
82 let point1 = new cv.Point(face.x, face.y); 81 let point1 = new cv.Point(face.x, face.y);
83 let point2 = new cv.Point(face.x + face.width, face.y + face.height); 82 let point2 = new cv.Point(face.x + face.width, face.y + face.height);
84 - let rect = cv.Rect(face.x, face.y, face.x + face.width, face.y + face.height)
85 cv.rectangle(dst, point1, point2, [255, 0, 0, 255]); 83 cv.rectangle(dst, point1, point2, [255, 0, 0, 255]);
86 - let roi = src.roi(rect); 84 + let cropped = new cv.Mat();
87 - let img = cv.imencode('jpg', roi).toString('base64'); 85 + let rect = new cv.Rect(face.x, face.y, face.width, face.height);
88 - alert(img); 86 + cropped = src.roi(rect);
89 - images.append(img); 87 + let tempCanvas = document.createElement("canvas");
88 + cv.imshow(tempCanvas,cropped);
89 + let b64encoded = tempCanvas.toDataURL('image/jpeg', 1.0);
90 + var msg = {
91 + action: "verify",
92 + img: b64encoded,
93 + date: Date.now()
94 + };
95 + let socket = new WebSocket("ws://13.124.104.70:3000");
96 + socket.send(JSON.stringify(msg));
90 } 97 }
91 cv.imshow('canvasOutput', dst); 98 cv.imshow('canvasOutput', dst);
92 // schedule the next one. 99 // schedule the next one.
...@@ -102,8 +109,8 @@ setTimeout(processVideo, 0); ...@@ -102,8 +109,8 @@ setTimeout(processVideo, 0);
102 </head> 109 </head>
103 <body onload="cv['onRuntimeInitialized']=()=>{ load_cascade() }"> 110 <body onload="cv['onRuntimeInitialized']=()=>{ load_cascade() }">
104 <div id="container"> 111 <div id="container">
112 +<video autoplay="true" id="videoInput" width=640 height=480 style="display: none;"></video>
105 <canvas id="canvasOutput" width=640 height=480></canvas> 113 <canvas id="canvasOutput" width=640 height=480></canvas>
106 </div> 114 </div>
107 -<video autoplay="true" id="videoInput" width=640 height=480 style="display: none;"> 115 +</body>
108 -</video>
109 </html> 116 </html>
......