reactPorcupine - React Web Quick Start

Platforms

  • Chrome & Chromium-based browsers
  • Edge
  • Firefox
  • Safari

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. Install Node.js.

  2. Install the npm packages:

npm install @picovoice/porcupine-web-react @picovoice/porcupine-web-en-worker @picovoice/web-voice-processor

Usage

Create a usePorcupine Hook that detects the built-in keywords porcupine and bumblebee:

import React, { useState } from "react";
import { PorcupineWorkerFactory } from "@picovoice/porcupine-web-en-worker";
import { usePorcupine } from "@picovoice/porcupine-web-react";
const accessKey = ${ACCESS_KEY};
const keywords = [
{ builtin: "porcupine" },
{ builtin: "bumblebee" }
];
function VoiceWidget(props) {
const keywordEventHandler = (keywordLabel) => {
console.log(`Porcupine detected ${keywordLabel}`);
};
const {
isLoaded,
isListening,
isError,
errorMessage,
start,
pause,
setDetectionCallback
} = usePorcupine(
PorcupineWorkerFactory,
{ accessKey, keywords, start: true },
keywordEventHandler
);
}

The Hook will take care of microphone access and audio downsampling ( via @picovoice/web-voice-processor).

Custom Keywords

Create custom keyword using the Picovoice Console. Train the Porcupine model for the target platform WebAssembly (WASM). Inside the .zip file, there is a _b64.txt file which contains the binary model encoded with Base64. Copy the base64 and provide it as an argument to Porcupine:

const DEEP_SKY_BLUE_PPN_64 = ${BASE64_MODEL} /* Base64 representation of deep_sky_blue.ppn */
const [keywords] = useState([
{ base64: DEEP_SKY_BLUE_PPN_64, custom: "Deep Sky Blue"},
]);
const {
isLoaded,
isListening,
isError,
errorMessage,
start,
resume,
pause,
} = usePorcupine(
PorcupineWorkerFactory,
{ accessKey: accessKey, keywords: keywords },
keywordEventHandler
);

Non-English Languages

Import { PorcupineWorkerFactory } from the @picovoice/porcupine-web-xx-worker series of packages, where xx is the two-letter language code:

import { PorcupineWorkerFactory } from "@picovoice/porcupine-web-xx-worker";

These worker packages are compatible with the React SDK:

Demo

For the Porcupine React SDK, there is a React 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 run:
cd porcupine/demo/react
npm install
npm run start
  1. Open http://localhost:3000 to view it in the browser.

Resources

Packages

API

GitHub

Benchmark

Further Reading


Issue with this doc? Please let us know.