update style

static/browser_detect.css

@@ -69,7 +69,7 @@ body {
 .canvas_wrapper{
   position: relative;
 text-align: left;
-height:290px;
+height:300px;
 background-color: #F3F3F3;
 box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
 margin:10px;
@@ -93,4 +93,17 @@ overflow: hidden;
     font-size: large;
     border: none;
     color:#d3d3d3
+}
+#webcamButton{
+  margin: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  padding:10px;
+  border:none;
+  border-radius: 12.25px;
+  background-color: #f2f2f2;
+  box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38);
 }

templates/browser-detect.html

@@ -30,13 +30,15 @@
         <video id="webcam" style="display:none" autoplay="" playsinline=""></video>
         <div class="canvas_wrapper">
         <canvas class="output_canvas" id="output_canvas" width="100%" height="300%"></canvas>
+        <center>
+        <button id="webcamButton">
+            <span>ENABLE WEBCAM</span>
+        </button>
+        </center>
         </div>
     </div>
     <center>
         <img id="output_image" style="display:none"></img>
-        <button id="webcamButton">
-            <span>ENABLE WEBCAM</span>
-        </button>
         <div class="wrapper_result">
             <div id="predicted_result">></div>
         </div>