2020-2-capstone-design2 / 2014104149

Go to a project
Toggle navigation Toggle navigation pinning
Graduate
8e0a8cda 1 parent 342dfa5e

Update index.html UI

Inline Side-by-side
Showing 2 changed files with 15 additions and 5 deletions
1 +[1128/194240.844:ERROR:directory_reader_win.cc(43)] FindFirstFile: 지정된 경로를 찾을 수 없습니다. (0x3)
......
...@@ -59,12 +59,19 @@ function init() ...@@ -59,12 +59,19 @@ function init()
59 .then(function (stream) { 59 .then(function (stream) {
60 video.srcObject = stream; 60 video.srcObject = stream;
61 video.addEventListener('canplay', () => { 61 video.addEventListener('canplay', () => {
62 + var screenWidth = $(document).width();
63 + var screenHeight = $(document).height();
64 + var headerHeight = $('#header').height();
65 + var messageboxHeight = $('#messagebox').height();
62 video.width = video.videoWidth; 66 video.width = video.videoWidth;
63 video.height = video.videoHeight; 67 video.height = video.videoHeight;
64 - container.style.width = video.videoWidth + 'px'; 68 + if (video.width > screenWidth || video.height + headerHeight + messageboxHeight > screenHeight){
65 - container.style.height = video.videoHeight + 'px'; 69 + var ratio = Math.min(screenWidth / video.width * 1.0, screenHeight / ((video.height + headerHeight + messageboxHeight) * 1.0));
66 - canvasOutput.width = video.videoWidth; 70 + container.style.width = Math.round(video.videoWidth * ratio) + 'px';
67 - canvasOutput.height = video.videoHeight; 71 + container.style.height = Math.round(video.videoHeight * ratio) + 'px';
72 + canvasOutput.width = Math.round(video.videoWidth * ratio);
73 + canvasOutput.height = Math.round(video.videoHeight * ratio);
74 + }
68 load_cascade(); 75 load_cascade();
69 }); 76 });
70 }).catch(function (err0r) { 77 }).catch(function (err0r) {
...@@ -200,6 +207,8 @@ function main() ...@@ -200,6 +207,8 @@ function main()
200 } 207 }
201 } 208 }
202 // to do resize preview 209 // to do resize preview
210 + var dsize = new cv.Size(canvasOutput.width, canvasOutput.height);
211 + cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
203 cv.imshow('canvasOutput', dst); 212 cv.imshow('canvasOutput', dst);
204 // schedule the next one. 213 // schedule the next one.
205 let delay = 1000/FPS - (Date.now() - begin); 214 let delay = 1000/FPS - (Date.now() - begin);
...@@ -213,7 +222,7 @@ function main() ...@@ -213,7 +222,7 @@ function main()
213 </script> 222 </script>
214 </head> 223 </head>
215 <body onload="cv['onRuntimeInitialized']=()=>{ init(); };"> 224 <body onload="cv['onRuntimeInitialized']=()=>{ init(); };">
216 - <div> 225 + <div id="header">
217 <!-- Header --> 226 <!-- Header -->
218 <header class="w3-container w3-center w3-padding-32"> 227 <header class="w3-container w3-center w3-padding-32">
219 <h1><b>얼굴 인식 출석 시스템</b></h1> 228 <h1><b>얼굴 인식 출석 시스템</b></h1>
......