Porcupine - React Web Quick Start

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

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

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

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

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

cd porcupine/demo/react
npm install
npm run start