Ionic Speech Recognition - run time error Object(…

2019-07-28 18:42发布

问题:

I'm trying to implement a simple speech recognition service (separately for now, to add it eventually in a bigger app).

I'm getting a weird run-time error, that I couldn't get any answer to it online or in documentation.

here's the code....

app.module.ts

import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';
.....
providers: [
StatusBar,
SplashScreen,
SpeechRecognition,
{provide: ErrorHandler, useClass: IonicErrorHandler}]

home.ts

import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';
import { AlertController } from 'ionic-angular';
......
constructor (private sr: SpeechRecognition, private alertCtrl: AlertController)
......
ngonInit() {
try {
      this.sr.hasPermission().then((permission: boolean) => {
        if(!permission) {
          this.sr.requestPermission().then(
            () => console.log("Granted"),
            () => console.log("Denied")
          );
        }
      });
    }
    catch(err) {
      let alert = this.alertCtrl.create({
        title: "x_x",
        message: "Opps! couldn't get permission!",
        buttons: [{
          text: "cancel",
          role: 'cancel',
          handler: () => {}
        }]
      });
      console.log(err);   //ERROR LOGGED
      alert.present();
    }
}

start() {
    try {
      this.sr.startListening().subscribe((matches: Array<string>) => {
        console.log(matches);
        this.msg= matches[0];
      });
    }
    catch(err) {
      let alert = this.alertCtrl.create({
        title: "x_x",
        message: "Opps! something is wrong!",
        buttons: [{
          text: "cancel",
          role: 'cancel',
          handler: () => {}
        }]
      });
      console.log(err);    // ERROR LOGGED if ngOnInit kept empty
      alert.present();
    }
  }

with a simple HTML button to invoke start() & print whatever is getting matched by the recognizer.

Just in case this is a compatibility issue, I'm using

@ionic-native/speech-recognition": "^5.0.0"

cordova-plugin-speechrecognition": "1.2.0"

The error I'm getting is always

TypeError: Object(...) is not a function at SpeechRecognition.hasPermission

needless to say, If i comment out the content of ngOnInit, the error will change to startListening() is not a function.

P.S. This is my first question here at StackOverFlow, hopefully I provided enough info about the problem.

Thanks.

回答1:

As expected, it was a compatibility (version) issue.

Ionic 3 will run speech-recognition up to: "^4.20.0"

/> ionic cordova plugin add cordova-plugin-speechrecognition@4.20.0
/> npm install --save @ionic-native/speech-recognition@4.20.0

import { SpeechRecognition } from '@ionic-native/speech-recognition';

Ionic 4 will run speech-recognition up-to: "^5.0.0" (latest at the time of writing)

/> ionic cordova plugin add cordova-plugin-speechrecognition
/> npm install @ionic-native/speech-recognition

import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';

P.S. You can't test that functionality on browser. (since this is a cordova plugin).

Credits to "AJT_82" for pointing this out in the comments.