Angular上的语音识别网络错误

Question

您好，我正在制作角度为7的语音识别Web应用程序。我正在使用webkitSpeechRecognition。但是我每次都遇到网络错误。它不接受任何输入。无论我怎么说，它都会在控制台上引发错误。我不知道为什么会出现此错误。

这是我的代码

服务

speechrecog.service.ts

import { Injectable, NgZone } from '@angular/core';
import {Observable } from 'rxjs';
import * as _ from 'lodash';

interface IWindow extends Window {
  webkitSpeechRecognition: any;
  SpeechRecognition: any;
}

@Injectable({
  providedIn: 'root'
})
export class SpeechrecogService {
  speechRecognition: any;
  constructor(private zone: NgZone) { }

  record(): Observable<string> {

    return Observable.create(observer => {
        const { webkitSpeechRecognition }: IWindow = <IWindow>window;
        this.speechRecognition = new webkitSpeechRecognition();
        this.speechRecognition.continuous = true;
        // this.speechRecognition.interimResults = true;
        this.speechRecognition.lang = 'en-us';
        this.speechRecognition.maxAlternatives = 1;

        this.speechRecognition.onresult = speech => {
            let term = '';
            if (speech.results) {
                const result = speech.results[speech.resultIndex];
                const transcript = result[0].transcript;
                if (result.isFinal) {
                    if (result[0].confidence < 0.3) {
                        console.log('Unrecognized result - Please try again');
                    } else {
                        term = _.trim(transcript);
                        console.log('Did you said? -> ' + term + ' , If not then say something else...');
                    }
                }
            }
            this.zone.run(() => {
                observer.next(term);
            });
        };

        this.speechRecognition.onerror = error => {
            observer.error(error);
        };

        this.speechRecognition.onend = () => {
            observer.complete();
        };

        this.speechRecognition.start();
        console.log('Say something - We are listening !!!');
    });
}

DestroySpeechObject() {
    if (this.speechRecognition) {
        this.speechRecognition.stop();
    }
}

}

这是我的组成部分：

speechtotxt.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { SpeechrecogService } from '../speechrecog.service';

@Component({
  selector: 'app-spechtotxt',
  templateUrl: './spechtotxt.component.html',
  styleUrls: ['./spechtotxt.component.css']
})
export class SpechtotxtComponent implements OnInit, OnDestroy {
  showSearchButton: boolean;
  speechData: string;

  constructor(private speechRecognitionService: SpeechrecogService) {
    this.showSearchButton = true;
    this.speechData = '';
  }

  ngOnInit() {
    console.log('hello');
  }

  ngOnDestroy() {
    this.speechRecognitionService.DestroySpeechObject();
  }

  activateSpeechSearchMovie(): void {
    this.showSearchButton = false;

    this.speechRecognitionService.record()
        .subscribe(
        // listener
        (value) => {
            this.speechData = value;
            console.log('jkhkjhkjk', value);
        },
        // errror
        (err) => {
            console.log(err);
            if (err.error === 'no-speech') {
                console.log('--restatring service--');
                this.activateSpeechSearchMovie();
            }
        },
        // completion
        () => {
            this.showSearchButton = true;
            console.log('--complete--');
            this.activateSpeechSearchMovie();
        });
}

}

speechtotxt.component.html

<div class="container-fluid">
  <div class="row">
      <div class="col-lg-12 col-md-12">
          <div class="card">
              <div class="header">
                  <h4 class="title">&nbsp;&nbsp; Web Speech API in Angular2</h4>
              </div>
              <div class="content">
                  <div class="row">
                      <div class="col-md-2"></div>
                      <div class="col-md-8">
                          <div class="form-group">
                              <label></label>
                              <input type="text" class="form-control border-input" name="txtSpeechSearchMovieName" id="txtSpeechSearchMovieName" value=""
                                     placeholder="Click below button and then say something!!!" [(ngModel)]="speechData" style="width:500px">
                          </div>
                      </div>
                      <div class="col-md-2"></div>
                  </div>
                  <br />
                  <div class="text-center">
                      <button class="btn btn-info btn-fill btn-wd" name="btnActivateSpeechSearchMovie" id="btnActivateSpeechSearchMovie" (click)="activateSpeechSearchMovie()"
                              [disabled]="!showSearchButton">
                          Enable Speech Search
                      </button>
                  </div>
                  <br />
              </div>
          </div>
      </div>
  </div>
</div>

This is the error I'm getting

无论何时我说些什么，它总是显示在控制台中

SpeechRecognitionError {isTrusted：true，错误：“ network”，消息：“”，类型：“ error”，目标：SpeechRecognition，…} 气泡：错误 cancelBubble：否 可取消：false 组成：假 currentTarget：SpeechRecognition {语法：SpeechGrammarList，lang：“ zh-cn”，连续：true，imimim结果：false，maxAlternatives：1，…} defaultPrevented：否 错误：“网络” eventPhase：0 isTrusted：正确 信息： ”” 路径：[] returnValue：正确 srcElement：SpeechRecognition {语法：SpeechGrammarList，lang：“ zh-cn”，连续：true，imimim结果：false，maxAlternatives：1，…} 目标：SpeechRecognition {语法：SpeechGrammarList，lang：“ zh-cn”，连续：true，interimResults：false，maxAlternatives：1，…} 时间戳：6534.664999999222 类型：“错误” 原始：SpeechRecognitionError

我不明白为什么要提出这个问题以及如何解决这个问题。预先感谢。