2020-2-capstone-design2 / 2014104149

Go to a project
Toggle navigation Toggle navigation pinning
Graduate
bf0df067 1 parent 5da7139b

Resize stream input

Inline Side-by-side
Showing 2 changed files with 27 additions and 16 deletions
...@@ -21,6 +21,26 @@ ...@@ -21,6 +21,26 @@
21 <script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script> 21 <script type='text/javascript' src="{{url_for('static', filename='js/utils.js')}}"></script>
22 <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 22 <script type='text/javascript' src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
23 <script type='text/javascript'> 23 <script type='text/javascript'>
24 +
25 +function init()
26 +{
27 + let video = document.getElementById("videoInput");
28 + if (navigator.mediaDevices.getUserMedia){
29 + navigator.mediaDevices.getUserMedia({ video: true })
30 + .then(function (stream) {
31 + video.srcObject = stream;
32 + video.addEventListener('canplay', () => {
33 + video.width = video.videoWidth;
34 + video.height = video.videoHeight;
35 + load_cascade();
36 + });
37 + }).catch(function (err0r) {
38 + console.log("Something went wrong!");
39 + streaming = false;
40 + });
41 + }
42 +}
43 +
24 function load_cascade() 44 function load_cascade()
25 { 45 {
26 let faceCascadeFile = 'haarcascade_frontalface_default.xml' 46 let faceCascadeFile = 'haarcascade_frontalface_default.xml'
...@@ -31,22 +51,12 @@ function load_cascade() ...@@ -31,22 +51,12 @@ function load_cascade()
31 }); 51 });
32 } 52 }
33 53
54 +
34 function main() 55 function main()
35 { 56 {
36 let video = document.getElementById("videoInput"); 57 let video = document.getElementById("videoInput");
37 let canvasOutput = document.getElementById("canvasOutput"); 58 let canvasOutput = document.getElementById("canvasOutput");
38 let canvasContext = canvasOutput.getContext('2d'); 59 let canvasContext = canvasOutput.getContext('2d');
39 -
40 -if (navigator.mediaDevices.getUserMedia){
41 - navigator.mediaDevices.getUserMedia({ video: true })
42 - .then(function (stream) {
43 - video.srcObject = stream;
44 - }).catch(function (err0r) {
45 - console.log("Something went wrong!");
46 - streaming = false;
47 - });
48 -}
49 -
50 let src = new cv.Mat(video.height, video.width, cv.CV_8UC4); 60 let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
51 let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4); 61 let dst = new cv.Mat(video.height, video.width, cv.CV_8UC4);
52 let gray = new cv.Mat(); 62 let gray = new cv.Mat();
...@@ -151,6 +161,7 @@ function processVideo() { ...@@ -151,6 +161,7 @@ function processVideo() {
151 }); 161 });
152 } 162 }
153 } 163 }
164 + // to do resize preview
154 cv.imshow('canvasOutput', dst); 165 cv.imshow('canvasOutput', dst);
155 // schedule the next one. 166 // schedule the next one.
156 let delay = 1000/FPS - (Date.now() - begin); 167 let delay = 1000/FPS - (Date.now() - begin);
...@@ -163,10 +174,10 @@ setTimeout(processVideo, 0); ...@@ -163,10 +174,10 @@ setTimeout(processVideo, 0);
163 } 174 }
164 </script> 175 </script>
165 </head> 176 </head>
166 -<body onload="cv['onRuntimeInitialized']=()=>{ load_cascade(); };"> 177 +<body onload="cv['onRuntimeInitialized']=()=>{ init(); };">
167 <div id="container"> 178 <div id="container">
168 -<video autoplay="true" id="videoInput" width=640 height=480 style="display: none;"></video> 179 +<video autoplay="true" id="videoInput" style="display: none; object-fit: cover;"></video>
169 -<canvas id="canvasOutput" width=640 height=480></canvas> 180 +<canvas id="canvasOutput"></canvas>
170 </div> 181 </div>
171 </body> 182 </body>
172 </html> 183 </html>
......
...@@ -72,9 +72,9 @@ function detect_face() ...@@ -72,9 +72,9 @@ function detect_face()
72 let sender = document.getElementById("sender"); 72 let sender = document.getElementById("sender");
73 sender.disabled = false; 73 sender.disabled = false;
74 } 74 }
75 - if (dst.cols > $(window).width()) 75 + if (dst.cols > $(window).width() || dst.rows > $(window).height())
76 { 76 {
77 - let ratio = $(window).width() / parseFloat(dst.cols); 77 + let ratio = Math.min($(window).width() / parseFloat(dst.cols), $(window).height() / parseFloat(dst.rows));
78 let dsize = new cv.Size(dst.cols * ratio, dst.rows * ratio); 78 let dsize = new cv.Size(dst.cols * ratio, dst.rows * ratio);
79 cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA); 79 cv.resize(dst, dst, dsize, 0, 0, cv.INTER_AREA);
80 } 80 }
......