add switch camera button

templates/browser-detect.html

@@ -29,12 +29,12 @@
     <div class="container">
         <video id="webcam" style="display:none" autoplay="" playsinline=""></video>
         <div class="canvas_wrapper" id="canvas_wrapper">
-        <canvas class="output_canvas" id="output_canvas" width="100%" height="300%"></canvas>
-        <center>
-        <button id="webcamButton">
-            <span>ENABLE WEBCAM</span>
-        </button>
-        </center>
+            <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>
@@ -45,7 +45,10 @@
         <div class="wrapper_text">
             <textarea id="text" onkeyup="set_output_array(this.value)"></textarea>
             <button id="text-to-speech" onclick="speak(document.getElementById('text').value)">
-               <span>Listen to the text 🔊</span>
+                <span>Listen to the text 🔊</span>
+            </button>
+            <button id="switch-camera">
+                <span>Switch CM</span>
             </button>
         </div>
         <center>
@@ -86,11 +89,11 @@
                 var word_list = []
 
 
-function set_output_array(text) {
-    console.log(text)
-    word_list = text.split("");
-    console.log(word_list)
-}
+                function set_output_array(text) {
+                    console.log(text)
+                    word_list = text.split("");
+                    console.log(word_list)
+                }
 
             </script>
 
@@ -104,7 +107,7 @@ function set_output_array(text) {
                 let webcamRunning = false;
                 var time_since_letter = 0
                 var last_letter_time = 0
-                var is_first_run=1
+                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.
@@ -133,6 +136,7 @@ function set_output_array(text) {
                 const canvasCtx = canvasElement.getContext("2d");
                 var x_array = []
                 var y_array = []
+                var video_facing_mode = "user"
                 // Check if webcam access is supported.
                 const hasGetUserMedia = () => { var _a; return !!((_a = navigator.mediaDevices) === null || _a === void 0 ? void 0 : _a.getUserMedia); };
                 // If webcam supported, add event listener to button for when user
@@ -140,10 +144,25 @@ function set_output_array(text) {
                 if (hasGetUserMedia()) {
                     enableWebcamButton = document.getElementById("webcamButton");
                     enableWebcamButton.addEventListener("click", enableCam);
+                    document.getElementById("switch-camera").addEventListener("click", switch_camera);
                 }
                 else {
                     console.warn("getUserMedia() is not supported by your browser");
                 }
+                async function switch_camera(){
+                    if (video_facing_mode=='user'){
+                        webcamRunning= false
+                        video_facing_mode = 'environment'
+                        await load_camera()
+                        webcamRunning= true
+                    }
+                    else{
+                        webcamRunning = false
+                        video_facing_mode = 'user'
+                        await load_camera()
+                        webcamRunning= true
+                    }
+                }
                 // Enable the live webcam view and start detection.
                 function enableCam(event) {
                     if (!handLandmarker) {
@@ -157,11 +176,16 @@ function set_output_array(text) {
                     else {
                         webcamRunning = true;
                         enableWebcamButton.style = "display:none"
-                       
+
                     }
                     // getUsermedia parameters.
+                    load_camera()
+                }
+                function load_camera(){
                     const constraints = {
-                        video: true
+                        video: {
+                            facingMode: video_facing_mode
+                        }
                     };
                     // Activate the webcam stream.
                     navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
@@ -173,6 +197,9 @@ function set_output_array(text) {
                 let results = undefined;
                 console.log(video);
                 async function predictWebcam() {
+                    if (video.videoHeight == 0){
+                        return
+                    }
                     canvasElement.width = window.innerWidth;
                     // Now let's start detecting the stream.
                     if (runningMode === "IMAGE") {
@@ -187,12 +214,12 @@ 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){
+                    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"
+                        document.getElementById("canvas_wrapper").style.height = (elem_rect.height | 0).toString() + "px"
 
-                        is_first_run=0
+                        is_first_run = 0
                     }
 
                     if (results.landmarks && results.handednesses[0]) {