Get transcript on chrome desktop but not on Chrome Android & isMicrophoneAvailable returns undefined

[vaismav]

Hi :) So the code works great on Chrome desktop, but when I use it on a mobile device (with Chrome Android) the transcript stays empty.

while trying to solve this I've noticed isMicrophoneAvailable returns undefined consistently.

I do hear an occasional beeping sound indicating speech recognition is working (as mentioned in the docs) but other than that, nothing else.

I don't know if polyfill will solve this. I need to transcribe Hebrew, so I cant use Speechly, and currently, I don't want to spend credits on it so I cant use Microsoft. if it relates I will simply disable the transcription on mobile devices but thought it will be worth a shot to ask here :)

is it related to #129 in terms of the Chrome android?

the code:

import React, { useEffect, useRef } from 'react';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';

const SpeechRecognitionTest = () => {

    const transcriptRef = useRef();

    const {
        transcript,
        browserSupportsSpeechRecognition,
        listening,
        isMicrophoneAvailable,
    } = useSpeechRecognition();

    useEffect( () => {
        console.log('listening state: ', listening);
        console.log('is microphone availble: ', isMicrophoneAvailable);
        console.log('browserSupportsSpeechRecognition: ', browserSupportsSpeechRecognition);
        console.log("length", transcript.length);
        console.log(transcript);
    }, [listening,transcript]);

    useEffect(() => {
        if (!browserSupportsSpeechRecognition) {
            console.log("Browser doesn't support speech recognition!");
        }

        SpeechRecognition.startListening({ language: 'he', continuous: true })
                            .then( ()=> console.log('start listening for speech recognition. '))
                            .catch(e => console.log('failed to start listening for speech recognition. Err:',e));

        return () => {
            SpeechRecognition.abortListening();
        }

    }, []);

    return (<div/>);
};

export default SpeechRecognitionTest;

I was running the app and speaking for half minute and those are the outputs:

output on mobile:

listening state: false is microphone availble: undefined browserSupportsSpeechRecognition: true length 0

start listening for speech recognition. undefined listening state: true is microphone availble: undefined browserSupportsSpeechRecognition: true length 0

output on desktop:

test.js:17 listening state: false test.js:18 is microphone availble: undefined test.js:19 browserSupportsSpeechRecognition: true test.js:20 length 0 test.js:21 test.js:30 start listening for speech recognition. undefined test.js:17 listening state: true test.js:18 is microphone availble: undefined test.js:19 browserSupportsSpeechRecognition: true test.js:20 length 0 test.js:21 test.js:17 listening state: true test.js:18 is microphone availble: undefined test.js:19 browserSupportsSpeechRecognition: true test.js:20 length 1 test.js:21 1 test.js:17 listening state: true test.js:18 is microphone availble: undefined test.js:19 browserSupportsSpeechRecognition: true test.js:20 length 3 test.js:21 חדש test.js:17 listening state: true test.js:18 is microphone availble: undefined test.js:19 browserSupportsSpeechRecognition: true test.js:20 length 2 test.js:21 12 test.js:17 listening state: true test.js:18 is microphone availble: undefined test.js:19 browserSupportsSpeechRecognition: true test.js:20 length 3 test.js:21 126 test.js:17 listening state: true test.js:18 is microphone availble: undefined test.js:19 browserSupportsSpeechRecognition: true test.js:20 length 5 test.js:21 1 2 3 test.js:17 listening state: true test.js:18 is microphone availble: undefined test.js:19 browserSupportsSpeechRecognition: true test.js:20 length 7 test.js:21 1 2 3 4

Mobile device: Redmi 9 Android 10 Chrome App version 96.0.4664.45

Hope there is a nice solution :)

[JamesBrill]

Hi @vaismav Thanks for raising this issue! Some comments:

• When running your code on Android Chrome 96, isMicrophoneAvailable is true and Hebrew translation works for me. Admittedly, this is on Android 9 - perhaps Android 10 handles the microphone differently
• My first thought is that you may be using an older version of react-speech-recognition. isMicrophoneAvailable was only introduced in the most recent minor version. Try upgrading to 3.9.0 and you should see that state populated correctly
• Are you running your React app over HTTPS on Android Chrome? It seems that microphone permission is automatically disabled in Android Chrome when running web pages over HTTP. I use ngrok to create a free HTTPS proxy for this purpose
• Do you see the microphone symbol at the top of your phone's screen at any point? It should turn on and stay on after you give permission to use it (Android Chrome will show a popup asking for this)
• Unrelated, but be sure to include isMicrophoneAvailable and browserSupportsSpeechRecognition as dependencies in your Effect to avoid getting stale values