Я пытаюсь использовать этот плагин: https://ionicframework.com/docs/native/speech-recognition
В каждом примере speechRecognition (isRecognitionAvailable, hasPermission, getSupportedLanguages, requestPermission, startListening) при вызове появляется следующая ошибка screen:
введите описание изображения здесь
Мой код:
import React from 'react';
import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';
import toastr from 'toastr';
import '../../toastr.min.css';
class Contato extends React.Component<{}, { matches: string, isRecording: boolean }>{
constructor(props: any, private speechRecognition: SpeechRecognition ){
super(props);
this.state = {
matches: '',
isRecording: false,
};
this.checkAvaliable = this.checkAvaliable.bind(this);
this.checkPermissions = this.checkPermissions.bind(this);
this.getPermissions = this.getPermissions.bind(this);
this.startListening = this.startListening.bind(this);
this.stopListening = this.stopListening.bind(this);
}
checkAvaliable = () => {
// Check feature available
this.speechRecognition.isRecognitionAvailable()
.then((available: boolean) => console.log(available))
}
checkPermissions = () => {
// Check permission
this.speechRecognition.hasPermission()
.then((hasPermission: boolean) => console.log(hasPermission))
}
getLanguageList = () => {
// Get the list of supported languages
this.speechRecognition.getSupportedLanguages()
.then(
(languages: string[]) => console.log(languages),
(error) => console.log(error)
)
}
getPermissions = () => {
// Request permissions
this.speechRecognition.requestPermission()
.then(
() => console.log('Granted'),
() => console.log('Denied')
)
}
startListening = () => {
let options = {
language: 'pt-BR',
};
// Start the recognition process
this.speechRecognition.startListening(options)
.subscribe(
(matches: string[]) => console.log(matches),
(onerror) => console.log('error:', onerror)
)
}
stopListening = () => {
this.speechRecognition.stopListening().then(() => {
this.setState({isRecording: false})
});
}
render(){
return(
<>
<div className="mb-3">
<h3>O que eu entendi...</h3>
<span>{this.state.matches}</span>
</div>
<div className="row mt-5">
<div className="col-12">
<button className="btn btn-tiber w-100" onClick={this.checkAvaliable}>Check Avaliable</button>
</div>
<div className="col-12">
<button className="btn btn-tiber w-100" onClick={this.checkPermissions}>Check Permissions</button>
</div>
<div className="col-12">
<button className="btn btn-tiber w-100" onClick={this.getLanguageList}>Get Languages</button>
</div>
<div className="col-12">
<button className="btn btn-tiber w-100" onClick={this.getPermissions}>Get Permission</button>
</div>
<div className="col-12">
<button className="btn btn-tiber w-100" onClick={this.startListening}>Start Listening</button>
</div>
</div>
</>
);
}
}
export default Contato;
Как я могу решить эту проблему?