I am looking for a way to use speech recognition plugins in my project, but all I have found is for Angular / ReactNative projects. Is it possible to use this feature in Ionic React?
Obviously there is a way, using Ionic Cordovaās Speech Recognition Plugin 
Full guide by DesignCourse
How can I ātranslateā NgModules in this example to React? The project need to have a similar .tsx file to app.module.ts? When I try to use this link example, I receive this following error:
Property āhasPermission/startListeningā does not exist on type āSpeechRecognitionā.
My File:
import React from āreactā;
import { IonContent, IonPage } from ā@ionic/reactā;
import { SpeechRecognition } from ā@ionic-native/speech-recognitionā;
import toastr from ātoastrā;
import āā¦/ā¦/toastr.min.cssā;
class Contato extends React.Component<{}, { isRecording: boolean, color: string }>{
constructor(props: any, private speechRecognition: SpeechRecognition){
super(props);
this.state = {
isRecording: false,
color: 'green',
};
this.start = this.start.bind(this);
}
componentWillMount(){
this.speechRecognition.hasPermission()
.then((hasPermission: boolean) => {
if (!hasPermission) {
this.speechRecognition.hasPermission()
.then(
() => console.log('Granted'),
() => console.log('Denied')
)
}
});
}
start() {
this.speechRecognition.startListening()
.subscribe(
(matches: Array<string>) => {
let resultado = matches[0];
this.setState({ bgcolor: resultado });
},
(onerror: any) => console.log('error:', onerror)
)
}
render(){
return (
<IonPage>
<IonContent className="mt-5">
<div className="mt-5">
<button className="btn btn-info" onClick={this.start}> Start</button>
<button className="btn btn-info" > Stop </button>
</div>
</IonContent>
</IonPage>
);
}
};
export default Contato;
Iām not sure what you did wrong, but try to follow this video!
1 Like
