Porcupine — React Native Quick Start

Platforms

Android 4.4+ (API 19+)
iOS 9.0+

Requirements

Picovoice Account and AccessKey
React Native 0.62.2+

Picovoice Account & AccessKey

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

Quick Start

Setup

Setup the React Native environment.
Install the npm packages:
- @picovoice/porcupine-react-native
- @picovoice/react-native-voice-processor

npm install @picovoice/react-native-voice-processor @picovoice/porcupine-react-native

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();

To use your own audio processing pipeline, check out the Porcupine Low-Level API.

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

Install dependencies and setup environment:

cd porcupine/demo/react-native

npm run android-install
# or
npm run ios-install

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.

Porcupine — React Native Quick Start

Platforms

Requirements

Picovoice Account & AccessKey

Quick Start

Setup

Usage

Custom Keywords

Non-English Languages

Demo

Setup

Usage

Resources

Packages

API

GitHub

Benchmark

Further Reading

Videos