Rhino - Angular API

Local Speech Recognition
npm

This document outlines how to integrate the Rhino Speech-to-Intent engine within an application using its Angular API.

Requirements

yarn (or npm)

Compatibility

Chrome, Edge
Firefox
Safari

The Picovoice SDKs for Web are powered by WebAssembly (WASM), the Web Audio API, and Web Workers.

All modern browsers (Chrome/Edge/Opera, Firefox, Safari) are supported, including on mobile. Internet Explorer is not supported.

Using the Web Audio API requires a secure context (HTTPS connection), with the exception of localhost, for local development.

Installation

Use npm or yarn to install the package and its peer dependencies. Each spoken language (e.g. 'en', 'de') is a separate package. For this example we'll use English:

yarn add @picovoice/rhino-web-angular @picovoice/rhino-web-en-worker @picovoice/web-voice-processor

(or)

npm install @picovoice/rhino-web-angular @picovoice/rhino-web-en-worker @picovoice/web-voice-processor

Language-specific Rhino web worker packages

These worker packages are compatible with the Angular SDK:

Usage

The Rhino SDK for Angular is based on the Rhino SDK for Web. The library provides an Angular service called RhinoService. The package will take care of microphone access and audio downsampling (via @picovoice/web-voice-processor) and provide a wake word detection event to which your application can subscribe.

In your Angular component, add the RhinoService. The RhinoService has a inference$ event to which you can subscribe:

import { Subscription } from "rxjs"
import { RhinoService } from "@picovoice/rhino-web-angular"
 
...
 
  constructor(private rhinoService: RhinoService) {
    // Subscribe to Rhino Keyword detections
    // Store each detection so we can display it in an HTML list
    this.rhinoDetection = rhinoService.inference$.subscribe(
      inference => console.log(`Rhino Detected "${inference}"`))
  }

We need to initialize Rhino to tell it which context we want to listen to (and at what sensitivity). We can use the Angular lifecycle hooks ngOnInit and ngOnDestroy to start up and later tear down the Rhino engine.

Imports

You can use Rhino by importing the worker package statically or dynamically. Static is more straightforward to implement, but will impact your initial bundle size with an additional ~4MB. Depending on your requirements, this may or may not be feasible. If you require a small bundle size, see dynamic importing below.

Static Import

import {RhinoWorkerFactory as RhinoWorkerFactoryEn} from'@picovoice/rhino-web-en-worker'
 
  async ngOnInit() {
    // Initialize Rhino Service
    try {
      await this.rhinoService.init(RhinoWorkerFactoryEn, {context: { base64: RHINO_CLOCK_64 }})
      console.log("Rhino is now loaded. Press the Push-to-Talk button to activate.")
    }
    catch (error) {
      console.error(error)
    }
  }
 
  ngOnDestroy() {
    this.rhinoDetection.unsubscribe()
    this.rhinoService.release()
  }
 
  public pushToTalk() {
    this.rhinoService.pushToTalk();
  }

Dynamic Import

async ngOnInit() {
  // Load Rhino worker chunk with specific language model (large ~3-4MB chunk; dynamically imported)
  const rhinoFactoryEn = (await import('@picovoice/rhino-web-en-worker')).RhinoWorkerFactory
  // Initialize Rhino Service
  try {
    await this.rhinoService.init(rhinoFactoryEn, {context: { base64: RHINO_CLOCK_64 }})
    console.log("Rhino is now loaded. Press the Push-to-Talk button to activate.")
  }
  catch (error) {
    console.error(error)
  }
}
 
ngOnDestroy() {
  this.rhinoDetection.unsubscribe()
  this.rhinoService.release()
}
 
public pushToTalk() {
  this.rhinoService.pushToTalk();
}

Microphone and Push to Talk

Upon mounting, the component will request microphone permission from the user, instantiate the audio stream and start up an instance of Rhino.

Rhino requires a trigger to begin listening. To start listening for natural language commands, there is a pushToTalk method on the RhinoService, which we can connect to a button press event, for example. If you want to trigger Rhino using voice (a wake word / trigger word / hotword), see the Picovoice SDK for Angular, which includes both the Porcupine and Rhino engines and switches between them automatically for a continuous hands-free Voice AI interaction loop. The Porcupine SDK for Angular is also available individually.