Web Speech API SpeechRecognition not defined when using React.js

Question

I am using React.js along with the Web Speech API's SpeechRecognition, however, it does not work and I get the error "ReferenceError: SpeechRecognition is not defined." The code I am using is directly from the SpeechRecognition documentation:

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

The first line causes the error, but without it, the second line will cause the same error. How can I fix this?

Answer 1

try window.SpeechRecognition || window.webkitSpeechRecognition;

See Using the Web Speech API for further explanation why you need the window. prefix.

Answer 2

Try this:

Instead of

const recognition = new SpeechRecognition();

Write:

const recognition = new speechRecognition();

This helped me!