Why isn't speech recognition working in my webapp? Is it because I'm autoplaying a video?

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 which makes me think that my video is interfering with it. 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?

Index.html

{% extends "base.html" %}
{% block content %}

<!---------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 = 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();
              }
            </script>
        </div>
    </section>
{% endblock content %}