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.