React native Speech recognition

Vamos mostrar como implementar reconhecimento de voz com React Native. 

Usaremos como base o projeto React Native criado nesse outro post. Antes de começar, precisamos instalar a biblioteca react-native-voice. Para isso basta navegar até a pasta do proejto e executar esse comando:

 npm i react-native-voice --save

Para quem não sabe, npm i é um atalho para npm install. Depois vamos executar esse outro comando:

 react-native link react-native-voice

Agora vamos editar arquivo android/setting.gradle para ficar desse jeito:

 rootProject.name = 'poc1'
 
 include ':react-native-voice', ':app'
 project(':react-native-voice').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-voice/android')

Agora no arquivo android/app/build.gradle vamos adicionar essa linha em dependencies:

 ...
 dependencies {
     ...
     compile project(':react-native-voice')
 }

Agora no arquivo androidappsrcmainjavacompoc1MainApplication.java adicionamos apenas essas duas linhas:

 import android.app.Application;
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactPackage;
 ...
 import com.wenkesj.voice.VoicePackage; // <------ Adicionar esse import!
 ...
 
 public class MainActivity extends Activity implements ReactApplication {
 ...
     @Override
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
         new MainReactPackage(),
         new VoicePackage() // <------ Adicionar essa linha!
         );
     }
 }

Agora na raiz do projeto o arquivo App.js deve ficar assim:

 /**
  * Sample React Native App
  * https://github.com/facebook/react-native
  * @flow
  */
 
 import React, { Component } from 'react';
 import {
   Platform,
   StyleSheet,
   Text,
   View,
   TouchableHighlight    
 } from 'react-native';
 import Voice from 'react-native-voice';
 
const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,' +
    'Shake or press menu button for dev menu',
});
 
 type Props = {};
 export default class App extends Component<Props> {
 
   constructor(props) {
   
     super(props)
     this.state = { textoStatus: '' ,texto:''}
   
     Voice.onSpeechStart = this.onSpeechStartHandler.bind(this);
     Voice.onSpeechEnd = this.onSpeechEndHandler.bind(this);
     Voice.onSpeechResults = this.onSpeechResultsHandler.bind(this);
     
   }
 
    onSpeechResultsHandler(result){
         this.setState({
             ...this.state,
             texto:result.value
         });
    }    
   
   onSpeechStartHandler(){
     this.setState({
         ...this.state,
         textoStatus:'iniciou'
     });    
   }    
   
   onSpeechEndHandler(){
     this.setState({
         ...this.state,
         textoStatus:'parou'
     });    
   }
     
   onStartButtonPress(e){
     Voice.start('pt-BR');
   }    
   
   onStopButtonPress(e){
     Voice.stop();
   }    
 
   render() {
     return (
       <View style={styles.container}>
         <Text style={styles.welcome}>
           Welcome to React Native!
         </Text>
         <TouchableHighlight
          style={styles.button}
          onPress={this.onStartButtonPress}
        >
          <Text> Iniciar reconhecimento de voz </Text>
         </TouchableHighlight>
          <TouchableHighlight
          style={styles.button}
          onPress={this.onStopButtonPress}
        >
          <Text> Parar </Text>
         </TouchableHighlight>
         <Text style={styles.welcome}>
          Status {this.state.textoStatus}
         </Text>
         <Text style={styles.welcome}>
           {this.state.texto}
         </Text>
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
   welcome: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
   },
   instructions: {
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
   },
 });
 

Criamos um botão para iniciar o reconhecimento de voz e outro para parar. Depois que o recinhecimento é concluído, o texto aparece em baixo:

Imagem

Documentação completa: https://www.npmjs.com/package/react-native-voice

Comentários

 

 
(há 2 meses) Davi Sousa:

Lèo,

O método que preenche o texto 

onSpeechResultsHandler

pode setá sendo chamado duas vezes ou a variável 

result.value

pode já está vindo com texto duplicado. Se for esse o caso, recomendo que tente procurar uma versão mais nova dessa biblioteca ou outra similar pois pesquisei e vi que ela já está marcada como deprecated

Quem Sou

Graduado em ADS (Análise e desenvolvimento de sistemas).

Não sou "devoto" de nenhuma linguagem de programação. Procuro aproveitar o melhor de cada uma de acordo com a necessidade do projeto. Prezo por uma arquitetura bem feita, código limpo, puro e simples! 

anuncio atendente