Skip to content

Learning Paths

Choose a learning path based on your experience level and goals.

Beginner Path

Perfect for developers new to VoIP/SIP or Vue.js WebRTC applications.

Step 1: Basic Call Setup

  1. Quick Start - Get connected in 3 minutes
  2. Basic Audio Call - Understand call lifecycle
  3. Audio Devices - Manage microphones and speakers

Step 2: Call Controls

  1. DTMF Tones - Send touch tones during calls
  2. Hold & Mute - Basic call controls
  3. Call Timer - Track call duration

Step 3: User Experience

  1. Call History - Track past calls
  2. Settings Persistence - Save user preferences

Estimated Time: 2-3 hours


Intermediate Path

For developers ready to add advanced calling features.

Step 1: Enhanced Calling

  1. Video Calling - Add video to your calls
  2. Picture-in-Picture - PiP video support
  3. Screen Sharing - Share your screen

Step 2: Call Quality

  1. Quality Monitoring - Monitor call quality metrics
  2. Connection Recovery - Handle network issues

Step 3: Multi-Party

  1. Multi-Line - Handle multiple concurrent calls
  2. Conference Calls - Multi-party audio/video

Step 4: Communication

  1. Presence & BLF - User status monitoring
  2. SIP Messaging - Instant messaging

Estimated Time: 4-6 hours


Advanced Path

For building production call center and enterprise applications.

Step 1: Conference Features

  1. Conference Gallery - Gallery layout for participants
  2. Call Transfer - Blind and attended transfers

Step 2: Call Center Integration

  1. Agent Login - Call center agent authentication
  2. Queue Monitor - Live queue statistics
  3. CDR Dashboard - Call detail records

Step 3: AI Features

  1. Real-Time Transcription - Live speech-to-text
  2. Keyword Detection - Detect important phrases

Step 4: Advanced Recording

  1. Call Recording - Server-side recording
  2. Voicemail - Voicemail management

Estimated Time: 6-8 hours


Feature-Specific Paths

Video Application Developer

Focus on video calling and screen sharing:

  1. Video Calling
  2. Picture-in-Picture
  3. Screen Sharing
  4. Conference Gallery

Call Center Developer

Focus on call center features:

  1. Agent Login
  2. Queue Monitor
  3. CDR Dashboard
  4. Call Recording

AI/ML Developer

Focus on transcription and AI features:

  1. Real-Time Transcription
  2. Keyword Detection
  3. Quality Monitoring

Interactive Playground

All examples are available in the interactive playground:

bash
# Clone the repository
git clone https://github.com/ironyh/VueSip.git
cd VueSip

# Install dependencies
pnpm install

# Start the playground
pnpm dev

Visit http://localhost:5173 to explore all 50+ demos with live code.

Released under the MIT License.