For some reason speech recognition is not working for me at all. Is it because I'm running this locally? What am I doing wrong?

Question

I have a web form that just gets user info and is then appended to the next page. I want to "automate" the form by having a user's microphone grab their verbalized data and append it to the form. Everything works except the actual speech recognition...in fact, I'm not even being asked to allow my microphone access. I think it could also be stemming from my javascript for loop, that is supposed to have three sets of speech recognition that is appended to their respective inputs. Do I need to use websockets for it?

Already considered: this, this, and this.

index.html

<!---------Therapist Section--------->
    <section id="therapist">
        <div class="container" id="therapist_container">
            <script>
              function getLocalStream() {
                  navigator.mediaDevices.getUserMedia({video: false, audio: true}).then( stream => {
                      window.localStream = stream;
                      window.localAudio.srcObject = stream;
                      window.localAudio.autoplay = true;
                  }).catch( err => {
                      console.log("u got an error:" + err)
                  });
              }

              getLocalStream();
            </script>
            <div id="button">
              <button type="button" class="btn btn-primary" id="therapist-button" onclick="SpeechRecog" data-toggle="modal" data-target="#myModal">Talk with Delphi</button>
            </div>
            
            <!-- Modal -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="vid1Title" aria-hidden="true">
              <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                  <div class="modal-body">
                    <video width="100%" id="video1">
                      <source src="./static/movie.mp4" type="video/mp4">
                    </video>
                    <form action="/care" id="careid" name="care" method="POST">
                      <input type="text" id="1" name="name" placeholder="what's your name?">
                      <input type="text" id="2" name="location" placeholder="Where are you?">
                      <input type="text" id="3" name="state" placeholder="how can I help?">
                      <input id="buttonInput" class="btn btn-success form-control" type="submit" value="Send">
                    </form>
                  </div>
                </div>
              </div>
            </div>
            <script>
              $('#myModal').on('shown.bs.modal', function () {
                $('#video1')[0].play();
              })
              $('#myModal').on('hidden.bs.modal', function () {
                $('#video1')[0].pause();
              })

              video = document.getElementById('video1');
              video.addEventListener('ended',function(){       
                window.location.pathname = '/care';
                document.care.submit();
              })

              
              function SpeechRecog() {u
                    var action = document.getElementById("careid");
                    var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
                    var recognition = new SpeechRecognition();
                
                    
                    for (let i=0; i < 3; i++){
                      recognition.onspeechend = function() {
                        var output = document.getElementById(i);
                        recognition.onresult = function(event) {
                          var transcript = event.results[0][0].transcript;
                          var confidence = event.results[0][0].confidence;
                          output.value=transcript;
                        };  
                      }
                      recognition.stop();
                    }                    
                  
                    // start recognition
                    recognition.start();
              }