Picovoice WordmarkPicovoice Console
Introduction
Introduction
AndroidC.NETFlutterlink to GoiOSJavaNvidia JetsonLinuxmacOSNodejsPythonRaspberry PiReact NativeRustWebWindows
AndroidC.NETFlutterlink to GoiOSJavaNodejsPythonReact NativeRustWeb
SummaryPicovoice LeopardAmazon TranscribeAzure Speech-to-TextGoogle ASRGoogle ASR (Enhanced)IBM Watson Speech-to-Text
FAQ
Introduction
AndroidC.NETFlutterlink to GoiOSJavaNodejsPythonReact NativeRustWeb
AndroidC.NETFlutterlink to GoiOSJavaNodejsPythonReact NativeRustWeb
FAQ
Introduction
AndroidCiOSLinuxmacOSPythonWebWindows
AndroidCiOSPythonWeb
SummaryOctopus Speech-to-IndexGoogle Speech-to-TextMozilla DeepSpeech
FAQ
Introduction
AndroidAngularArduinoBeagleBoneCChrome.NETEdgeFirefoxFlutterlink to GoiOSJavaNvidia JetsonLinuxmacOSMicrocontrollerNodejsPythonRaspberry PiReactReact NativeRustSafariUnityVueWebWindows
AndroidAngularC.NETFlutterlink to GoiOSJavaMicrocontrollerNodejsPythonReactReact NativeRustUnityVueWeb
SummaryPorcupineSnowboyPocketSphinx
Wake Word TipsFAQ
Introduction
AndroidAngularBeagleBoneCChrome.NETEdgeFirefoxFlutterlink to GoiOSJavaNvidia JetsonlinuxmacOSNodejsPythonRaspberry PiReactReact NativeRustSafariUnityVueWebWindows
AndroidAngularC.NETFlutterlink to GoiOSJavaNodejsPythonReactReact NativeRustUnityVueWeb
SummaryPicovoice RhinoGoogle DialogflowAmazon LexIBM WatsonMicrosoft LUIS
Expression SyntaxFAQ
Introduction
AndroidBeagleboneCiOSNvidia JetsonLinuxmacOSPythonRaspberry PiRustWebWindows
AndroidCiOSPythonRustWeb
SummaryPicovoice CobraWebRTC VAD
FAQ
Introduction
AndroidAngularArduinoBeagleBoneC.NETFlutterlink to GoiOSJavaNvidia JetsonMicrocontrollerNodejsPythonRaspberry PiReactReact NativeRustUnityVueWeb
AndroidAngularCMicrocontroller.NETFlutterlink to GoiOSJavaNodejsPythonReactReact NativeRustUnityVueWeb
Picovoice SDK - FAQ
IntroductionSTM32F407G-DISC1 (Arm Cortex-M4)STM32F411E-DISCO (Arm Cortex-M4)STM32F769I-DISCO (Arm Cortex-M7)IMXRT1050-EVKB (Arm Cortex-M7)
FAQGlossary

Porcupine Wake Word
Vue Quick Start


Compatibility

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

Requirements

  • Picovoice Account and AccessKey
  • Node.js 14+
  • Vue 2.6.11+, 3.0.0+
  • npm

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:

    • @picovoice/porcupine-vue
    • @picovoice/web-voice-processor
npm install @picovoice/porcupine-vue @picovoice/web-voice-processor

Usage

Put the model file in the project's public directory or generate a base64 model using the build in script:

npx pvbase64 -i ${PORCUPINE_PARAMS_PATH} -o ${OUTPUT_FILE_PATH}

Create a porcupineModel object with either of the methods above:

const PORCUPINE_MODEL_BASE64 = /* Base64 representation of the `.pv` model file*/;
const porcupineModel = {
publicPath: "${MODEL_RELATIVE_PATH}", // or
base64: PORCUPINE_MODEL_BASE64
}

Create a Vue Component that detects the built-in keywords porcupine and bumblebee:

<script lang='ts'>
import { BuiltInKeyword } from '@picovoice/porcupine-web';
import { usePorcupine } from '@picovoice/porcupine-vue';
export default {
data() {
const {
state,
init,
start,
stop,
release
} = usePorcupine();
init(
${ACCESS_KEY},
[BuiltInKeyword.Porcupine],
porcupineModel
);
return {
state,
start,
stop,
release
}
},
watch: {
"state.keywordDetection": function (keyword) {
if (keyword !== null) {
console.log(keyword.label);
}
},
"state.isLoaded": function (isLoaded) {
console.log(isLoaded)
},
"state.isListening": function (isListening) {
console.log(isListening)
},
"state.error": function (error) {
console.error(error)
},
},
onBeforeDestroy() {
this.release();
},
};
</script>

To learn how to use PorcupineVue with Vue's Composition API, check Porcupine Vue GitHub Repo.

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

To start audio processing:

await this.start();

To stop audio processing:

await this.stop();

Clean up resources explicitly with:

this.release();

Custom Keywords

Create custom keywords using the Picovoice Console. Train and download a Porcupine keyword model (.ppn) for the target platform Web (WASM). This model file can be used directly with publicPath, but, if base64 is preferable, convert the .ppn file to a base64 JavaScript variable using the built-in pvbase64 script:

npx pvbase64 -i ${KEYWORD_FILE}.ppn -o ${KEYWORD_BASE64}.js -n ${KEYWORD_BASE64_VAR_NAME}

Similar to the model file (.pv), keyword files (.ppn) are saved in IndexedDB to be used by Web Assembly. Either base64 or publicPath must be set for each keyword to instantiate Porcupine. If both are set, Porcupine will use the base64 model. An arbitrary label is required to identify the keyword once the detection occurs.

const keywordModel = {
publicPath: "${KEYWORD_RELATIVE_PATH}",
// or
base64: "${KEYWORD_BASE64_STRING}",
label: "${KEYWORD_LABEL}",
}

Then, initialize an instance of Porcupine:

this.$porcupine.init(
${ACCESS_KEY},
[keywordModel],
porcupineModel
);

Switching Languages

In order to use Porcupine with other languages, you need to use the corresponding model file (.pv) for the desired language. The model files for all supported languages are available on the Picovoice Github repository.

Demo

For the Porcupine Vue SDK, there is a Vue 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/vue
npm install
npm run start
  1. Open http://localhost:8080 to view it in the browser.

Resources

Packages

  • @picovoice/porcupine-vue on the npm registry
  • @picovoice/porcupine-web on the npm registry
  • @picovoice/web-voice-processor on the npm registry

API

  • @picovoice/porcupine-vue API Docs

GitHub

  • Porcupine Vue SDK on GitHub
  • Porcupine Vue Demo on GitHub

Benchmark

  • Wake Word Benchmark

Was this doc helpful?

Issue with this doc?

Report a GitHub Issue
Porcupine Wake Word Vue Quick Start
  • Compatibility
  • Requirements
  • Picovoice Account & AccessKey
  • Quick Start
  • Setup
  • Usage
  • Custom Keywords
  • Switching Languages
  • Demo
  • Setup
  • Usage
  • Resources
Platform
  • Leopard Speech-to-Text
  • Cheetah Streaming Speech-to-Text
  • Octopus Speech-to-Index
  • Porcupine Wake Word
  • Rhino Speech-to-Intent
  • Cobra Voice Activity Detection
Resources
  • Docs
  • Console
  • Blog
  • Demos
Sales
  • Pricing
  • Starter Tier
  • Enterprise
Company
  • Careers
Follow Picovoice
  • LinkedIn
  • GitHub
  • Twitter
  • Medium
  • YouTube
  • AngelList
Subscribe to our newsletter
Terms of Use
Privacy Policy
© 2019-2022 Picovoice Inc.