Voice Agent

A Vue.js voice and video calling component with WebSocket support, audio/video processing, and pure functional API.

Features

• 🎤 Real-time audio recording and playback
• 📹 Video calling with camera support
• 🔊 Audio visualization effects
• 📞 Multiple phone number switching
• 💬 Conversation history
• 🔄 Automatic reconnection
• 📱 Mobile-friendly
• ✨ Pure functional API - no component tags needed

Installation

npm install voice-agent

Quick Start

import { startVoiceAgent, stopVoiceAgent, isVoiceAgentRunning, getVoiceAgentStatus } from 'voice-agent'

// Basic configuration
const config = {
  websocket: {
    url: 'ws://your-websocket-server.com',
    token: 'your-auth-token'
  },
  user: {
    phoneId: '0980714296',
    phoneList: ['0987154520', '0980714296']
  },
  callbacks: {
    onConnect: () => console.log('Connected'),
    onDisconnect: () => console.log('Disconnected'),
    onTranscript: (text) => console.log('Transcript:', text),
    onError: (error) => console.error('Error:', error)
  }
}

// Start voice agent
await startVoiceAgent(config)

// Stop voice agent  
await stopVoiceAgent()

// Check status
const isRunning = isVoiceAgentRunning()
const status = getVoiceAgentStatus()

Configuration Options

Required Settings

{
  websocket: {
    url: 'ws://your-server.com',    // WebSocket server URL
    token: 'your-auth-token'        // Authentication token
  },
  user: {
    phoneId: '0980714296',          // Current phone number
    phoneList: ['...']              // Available phone numbers
  }
}

Optional Settings

{
  audio: {
    chunkDuration: 1000,            // Audio chunk duration (ms)
    sampleRate: 16000               // Sample rate
  },
  video: {
    enabled: true,                  // Enable video calls
    frameRate: 2,                   // Video frame rate (FPS)
    quality: 0.8                    // Video quality (0.1-1.0)
  },
  ui: {
    showLogs: true,                 // Show debug logs
    showVisualizer: true            // Show audio visualizer
  }
}

API Methods

| Method | Description | Returns | |--------|-------------|---------| | startVoiceAgent(config) | Start voice agent with config | Promise<{success, message}> | | stopVoiceAgent() | Stop and cleanup | Promise<{success, message}> | | isVoiceAgentRunning() | Check if running | boolean | | getVoiceAgentStatus() | Get detailed status | StatusObject |

Status Object

{
  isModalOpen: boolean,       // UI modal state
  isConnected: boolean,       // WebSocket connection
  isRecording: boolean,       // Audio recording state
  isInitializing: boolean,    // Initialization state
  connectionStatus: string,   // Connection description
  conversationCount: number   // Number of conversations
}

Vue Component Example

<template>
  <div>
    <button @click="start" :disabled="status.isModalOpen">Start</button>
    <button @click="stop" :disabled="!status.isModalOpen">Stop</button>
  </div>
</template>

<script setup>
import { startVoiceAgent, stopVoiceAgent, getVoiceAgentStatus } from 'voice-agent'
import { ref } from 'vue'

const status = ref({})

const start = async () => {
  await startVoiceAgent(config)
  status.value = getVoiceAgentStatus()
}

const stop = async () => {
  await stopVoiceAgent()
  status.value = getVoiceAgentStatus()
}
</script>

Key Advantages

• ✅ No Component Tags - Pure functional API calls
• ✅ Auto DOM Management - Handles UI creation/cleanup
• ✅ Singleton Pattern - Prevents conflicts
• ✅ Full Lifecycle - Complete resource management
• ✅ Video Support - Seamless audio/video switching
• ✅ Mobile Ready - Touch-optimized interface

Browser Requirements

• Chrome 60+, Firefox 55+, Safari 11+, Edge 79+
• WebRTC, Web Audio API, WebSocket, getUserMedia support

License

MIT