style flip camera btn

templates/browser-detect.html

@@ -27,8 +27,13 @@
 
 
     <div class="container">
+
         <video id="webcam" style="display:none" autoplay="" playsinline=""></video>
         <div class="canvas_wrapper" id="canvas_wrapper">
+            <button id="switch-camera" style="position: absolute; top:10px; left:10px; padding:5px; height:40px; width:40px; text-align: center; border-radius: 12.25px; font-size: 20px; font-weight: 900; border:none;   background-color: #f2f2f2;
+  box-shadow: 0px 4px 20px 4px rgba(0, 0, 0, 0.38); z-index:100">
+                <span>⟳</span>
+            </button>
             <canvas class="output_canvas" id="output_canvas" width="100%" height="300%"></canvas>
             <center>
                 <button id="webcamButton">
@@ -47,9 +52,7 @@
             <button id="text-to-speech" onclick="speak(document.getElementById('text').value)">
                 <span>Listen to the text 🔊</span>
             </button>
-            <button id="switch-camera">
-                <span>Switch CM</span>
-            </button>
+
         </div>
         <center>
             <script>
@@ -149,18 +152,18 @@
                 else {
                     console.warn("getUserMedia() is not supported by your browser");
                 }
-                async function switch_camera(){
-                    if (video_facing_mode=='user'){
-                        webcamRunning= false
+                async function switch_camera() {
+                    if (video_facing_mode == 'user') {
+                        webcamRunning = false
                         video_facing_mode = 'environment'
                         await load_camera()
-                        webcamRunning= true
+                        webcamRunning = true
                     }
-                    else{
+                    else {
                         webcamRunning = false
                         video_facing_mode = 'user'
                         await load_camera()
-                        webcamRunning= true
+                        webcamRunning = true
                     }
                 }
                 // Enable the live webcam view and start detection.
@@ -181,7 +184,7 @@
                     // getUsermedia parameters.
                     load_camera()
                 }
-                function load_camera(){
+                function load_camera() {
                     const constraints = {
                         video: {
                             facingMode: video_facing_mode
@@ -197,7 +200,7 @@
                 let results = undefined;
                 console.log(video);
                 async function predictWebcam() {
-                    if (video.videoHeight == 0){
+                    if (video.videoHeight == 0) {
                         return
                     }
                     canvasElement.width = window.innerWidth;