StreamPersona Quickstart

This guide shows you how to initialize a live bidirectional avatar stream in your web application.

---

1. Installation

Install the client SDK:

npm install @creativetechstudios/streampersona-client

---

2. Initialize the Session

Request a session token from your backend, then initialize the WebRTC peer connection:

import { StreamPersonaSession } from '@creativetechstudios/streampersona-client';

const videoElement = document.getElementById('avatar-video') as HTMLVideoElement;

// Initialize session with secure token
const session = new StreamPersonaSession({
  sessionToken: 'sp_tok_live_018f23...',
  avatarId: 'avatar-amara-studio',
  voiceId: 'voice-lagos-natural',
});

// Attach incoming media stream to video element
session.on('track', (event) => {
  if (event.track.kind === 'video') {
    videoElement.srcObject = event.streams[0];
  }
});

// Start bidirectional WebRTC peer connection
await session.connect();

---

3. Handling User Interruption

StreamPersona features automated Voice Activity Detection (VAD). If the user speaks while the avatar is speaking, the avatar immediately yields, cancels active TTS synthesis, and transitions to listening state.