javascript - 为什么语音识别在我的 web 应用程序中不起作用？是因为我正在自动播放视频吗？

Question

我有一个 Web 表单，它只获取用户信息，然后附加到下一页。我想通过让用户的麦克风抓取他们的口头数据并将其附加到表单来“自动化”表单。除了实际的语音识别之外，一切正常……事实上，我什至没有被要求允许我的麦克风访问，这让我认为我的视频干扰了它。我认为它也可能源于我的 javascript for 循环，它应该有三组语音识别附加到它们各自的输入。我需要为此使用 websockets 吗？

索引.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 %}  

标签： javascripthtmlwebkitspeech-recognition