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