Search code examples
reactjswebspeech-api

Chrome WebSpeech API returning not-allowed error?

I was using Web Speech API for speech to text. But when calling recognition.start() it is showing me SpeechRecognitionErrorEvent

recognition = new webkitSpeechRecognition()
recognition.continuous = false
recognition.interimResults = false

recognition.onend = () => console.log("ended")

recognition.onerror = () => console.log("errored")

recognition.start()

Its logging,

errored
ended
SpeechRecognitionErrorEvent {isTrusted: true, error: "not-allowed", message: "", type: "error", target: SpeechRecognition, …}

I tried it in my react project. Trying to trigger the recognizer from chrome console also results in the same error. Someone else, as I am using it for the first time I cannot quite grasp the reason for this error. Another question with the same issue was raised in stackoverflow from where I couldn't got an clear answer. Is it that I must request the speech api start method with a ssl certificate. Otherwise, I cannot use the feature.

UPDATE:
I had to enable microphone permission manually in the browser to get rid of this error.

Solution

  • Try this :

      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();

  recognition.start()