add dynamic wrapper height

templates/browser-detect.html

@@ -28,7 +28,7 @@
 
     <div class="container">
         <video id="webcam" style="display:none" autoplay="" playsinline=""></video>
-        <div class="canvas_wrapper">
+        <div class="canvas_wrapper" id="canvas_wrapper">
         <canvas class="output_canvas" id="output_canvas" width="100%" height="300%"></canvas>
         <center>
         <button id="webcamButton">
@@ -104,6 +104,7 @@ function set_output_array(text) {
                 let webcamRunning = false;
                 var time_since_letter = 0
                 var last_letter_time = 0
+                var is_first_run=1
                 // Before we can use HandLandmarker class we must wait for it to finish
                 // loading. Machine Learning models can be large and take a moment to
                 // get everything needed to run.
@@ -156,6 +157,7 @@ function set_output_array(text) {
                     else {
                         webcamRunning = true;
                         enableWebcamButton.style = "display:none"
+                       
                     }
                     // getUsermedia parameters.
                     const constraints = {
@@ -185,6 +187,13 @@ function set_output_array(text) {
                     canvasCtx.save();
                     canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
                     canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
+                    if (is_first_run == 1){
+                        var elem_rect = document.getElementById("output_canvas").getBoundingClientRect()
+                        console.log(elem_rect.height | 0);
+                        document.getElementById("canvas_wrapper").style.height = (elem_rect.height | 0).toString()+"px"
+
+                        is_first_run=0
+                    }
 
                     if (results.landmarks && results.handednesses[0]) {
                         var current_time = Math.round(Date.now())