vuePorcupine - Vue Quick Start

Compatibility

  • 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-vue @picovoice/porcupine-web-en-worker @picovoice/web-voice-processor

Usage

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

<script lang="ts">
import porcupineMixin from "@picovoice/porcupine-web-vue";
import { PorcupineWorkerFactoryEn } from "@picovoice/porcupine-web-en-worker";
const porcupineFactoryArgs = {
accessKey: '${ACCESS_KEY}',
keywords: [
{ builtin: 'porcupine' },
{ builtin: 'bumblebee' },
],
start: true,
};
export default {
name: "App",
mixins: [porcupineMixin],
data: function() {
return {
factory: PorcupineWorkerFactoryEn,
factoryArgs: porcupineFactoryArgs
};
},
async created() {
await this.$porcupine.init(
this.factoryArgs,
this.factory,
this.ppnKeywordFn,
this.ppnReadyFn,
this.ppnErrorFn
);
},
methods: {
ppnReadyFn: function() {
// do something after load
},
ppnKeywordFn: function(label) {
if (label === 'porcupine') {
// keyword is porcupine
} else if (label === 'bumblebee') {
// keyword is bumblebee
}
},
ppnErrorFn: function(error) {
// handle error
},
},
};
</script>

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

To start microphone recording:

this.$porcupine.start()

To stop microphone recording:

this.$porcupine.stop()

Custom Keywords

Create custom keyword using the Picovoice Console. The target platform is 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 porcupineFactoryArgs = {
accessKey: '${ACCESS_KEY}',
keywords: [
{ base64: DEEP_SKY_BLUE_PPN_64, custom: 'Deep Sky Blue' },
],
}

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 Vue SDK:

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

API

GitHub

Benchmark


Issue with this doc? Please let us know.