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.