react-nativePorcupine — React Native Quick Start

Platforms

  • Android 4.4+ (API 19+)
  • iOS 9.0+

Requirements

Picovoice Account & AccessKey

Signup or Login to Picovoice Console to get your AccessKey. Make sure to keep your AccessKey secret.

Quick Start

Setup

  1. Setup the React Native environment.

  2. Install the npm packages:

npm install @picovoice/react-native-voice-processor @picovoice/porcupine-react-native
  1. Enable the proper permission for recording with the hardware's microphone on both iOS and Android:

iOS

Open your Info.plist and add the following line:

<key>NSMicrophoneUsageDescription</key>
<string>[Permission explanation]</string>


Android

Open your AndroidManifest.xml and add the following line:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />

Usage

Request audio recording permissions from the user:

const recordAudioRequest = async () => {
if (Platform.OS == 'android') {
// Android requires an explicit call to ask for permission
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
{
title: 'Microphone Permission',
message: '[Permission explanation]',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
}
);
return (granted === PermissionsAndroid.RESULTS.GRANTED)
} else {
// iOS will automatically ask for permission
return true;
}
};
const hasPermission = await recordAudioRequest();

Create an instance of PorcupineManager that detects the included built-in wake words porcupine and bumblebee:

import {PorcupineManager, BuiltInKeywords} from '@picovoice/porcupine-react-native';
let detectionCallback = (keywordIndex) => {
if (keywordIndex === 0) {
// detected `porcupine`
} else if (keywordIndex === 1) {
// detected `bumblebee`
}
};
let porcupineManager = await PorcupineManager.fromBuiltInKeywords(
"${ACCESS_KEY}",
[BuiltInKeywords.Porcupine, BuiltInKeywords.Bumblebee],
detectionCallback
);

Start audio capture and wake word detection with:

await porcupineManager.start();

Stop with:

await porcupineManager.stop();

Free resources used by PorcupineManager:

porcupineManager.delete();

Custom Keywords

Create a custom keyword using the Picovoice Console. Download the custom wake word file (.ppn) and create an instance of PorcupineManager using the .fromKeywordPaths constructor:

let porcupineManager = await PorcupineManager.fromKeywordPaths(
"${ACCESS_KEY}",
["${KEYWORD_FILE_PATH}"],
detectionCallback
);
  • Android custom models must be added to ./android/app/src/main/assets/.

  • iOS custom models can be added anywhere under ./ios, but they must be included as a bundled resource in XCode by right-clicking on the Navigation tab, and clicking Add Files To ....

Non-English Languages

Use the corresponding model file (.pv), to detect non-English wake words. The model files for all supported languages are available on the Porcupine GitHub repository.

Pass in the model file using the modelPath argument:

let porcupineManager = await PorcupineManager.fromKeywordPaths(
"${ACCESS_KEY}",
["${KEYWORD_FILE_PATH}"],
detectionCallback,
processErrorCallback,
"${MODEL_FILE_PATH}"
);

Demo

For the Porcupine React Native SDK, there is a React Native demo project available on the Porcupine GitHub repository.

Setup

Clone the Porcupine repository from GitHub:

git clone --recurse-submodules https://github.com/Picovoice/porcupine.git

Usage

  1. Install dependencies and setup environment:
cd porcupine/demo/react-native
npm run android-install
# or
npm run ios-install
  1. Connect a mobile device or launch a simulator and run:
npm run android-run
# or
npm run ios-run

For more information on our Porcupine demos for React Native, head over to our GitHub repository.

Resources

Packages

API

GitHub

Benchmark

Further Reading

Videos


Issue with this doc? Please let us know.