Porcupine - Angular Quick Start
Platforms
- Chrome & Chromium-based browsers
- Edge
- Firefox
- Safari
Requirements
- Picovoice Account and AccessKey
- Node.js 12+
- Angular 11+
- 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-angular @picovoice/porcupine-web-en-worker @picovoice/web-voice-processor
Usage
Add the PorcupineService
to an Angular component. Subscribe to the keyword
event for the built-in keywords porcupine
and bumblebee
:
import { Subscription } from "rxjs"import { PorcupineService } from "@picovoice/porcupine-web-angular"import { PorcupineWorkerFactory } from "@picovoice/porcupine-web-en-worker"export class VoiceWidget {private keywordDetection: Subscriptionconstructor(private porcupineService: PorcupineService) {this.keywordDetection = porcupineService.keyword$.subscribe(keywordLabel => console.log(`Detected "${keywordLabel}"`))}async ngOnInit() {const accessKey = ${ACCESS_KEY};const keywords = [{ builtin: "porcupine" },{ builtin: "bumblebee" }];await this.porcupineService.init(PorcupineWorkerFactory,{ accessKey, keywords })}ngOnDestroy() {this.keywordDetection.unsubscribe()this.porcupineService.release()}}
The PorcupineService
will take care of microphone access and audio downsampling (via @picovoice/web-voice-processor
).
Custom Keywords
Create custom keyword using the Picovoice Console. Train the keyword model for the target platform 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 PorcupineService
:
const accessKey = ${ACCESS_KEY};const DEEP_SKY_BLUE_PPN_64 = ${BASE64_MODEL} /* Base64 representation of deep_sky_blue.ppn */const keywords = [{ base64: DEEP_SKY_BLUE_PPN_64, custom: "Deep Sky Blue" }];await this.porcupineService.init(PorcupineWorkerFactory,{ accessKey, keywords })
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 Angular SDK:
- German: @picovoice/porcupine-web-de-worker
- Spanish: @picovoice/porcupine-web-es-worker
- French: @picovoice/porcupine-web-fr-worker
Demo
For the Porcupine Angular SDK, there is a Angular 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/angularnpm installnpm run start
- Open http://localhost:4200 to view it in the browser.
Resources
Packages
- @picovoice/porcupine-web-angular
- @picovoice/porcupine-web-en-worker
- @picovoice/porcupine-web-de-worker
- @picovoice/porcupine-web-es-worker
- @picovoice/porcupine-web-fr-worker
- @picovoice/web-voice-processor