Porcupine - Vue Quick Start

Compatibility

Chrome & Chromium-based browsers
Edge
Firefox
Safari

Requirements

Picovoice Account and AccessKey
Node.js 12+
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

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

German: @picovoice/porcupine-web-de-worker
Spanish: @picovoice/porcupine-web-es-worker
French: @picovoice/porcupine-web-fr-worker

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

Install dependencies and run:

cd porcupine/demo/vue
npm install
npm run start

Porcupine - Vue Quick Start

Compatibility

Requirements

Picovoice Account & AccessKey

Quick Start

Setup

Usage

Custom Keywords

Non-English Languages

Demo

Setup

Usage

Resources

Packages

API

GitHub

Benchmark