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/vuenpm installnpm run start
- Open http://localhost:8080 to view it in the browser.
Resources
Packages
- @picovoice/porcupine-web-vue
- @picovoice/porcupine-web-en-worker
- @picovoice/porcupine-web-de-worker
- @picovoice/porcupine-web-es-worker
- @picovoice/porcupine-web-fr-worker
- @picovoice/web-voice-processor