A modern, production-ready WebRTC softphone built with React 19, TypeScript, Tailwind CSS v4, and JsSIP.
Features • Demo • Installation • Configuration • Contributing
Modern WebRTC Phone is a fully-featured, browser-based softphone that enables voice calls over the internet using WebRTC technology. Built with the latest web technologies, it provides a clean, intuitive interface for making and receiving SIP calls directly from your browser—no plugins required.
Perfect for:
- Building custom VoIP solutions
- Integrating voice calling into web applications
- Creating customer support tools
- Learning WebRTC and SIP technologies
- Replacing legacy softphone applications
- 🎙️ Crystal Clear Audio - High-quality voice calls using WebRTC
- 📞 Full Call Control - Make, receive, answer, and hang up calls
- 🔇 Mute/Unmute - Control your microphone during calls
- 📊 Real-time Status - Live connection and call state indicators
- 🔄 Auto-reconnect - Automatic reconnection on network issues
- ⚡ Modern Stack - React 19, TypeScript, Vite, Tailwind CSS v4
- 🎨 Beautiful UI - Clean, responsive design with smooth animations
- 💾 Persistent Settings - Configuration saved in localStorage
- 🐛 Full Debug Logging - Comprehensive console logging for troubleshooting
- 🔒 Secure - WebSocket Secure (WSS) support
- 🌐 Standards Compliant - Modern WebRTC APIs (ontrack, not deprecated onaddstream)
- 🎯 STUN/TURN Support - NAT traversal for reliable connections
- 📦 Zero Configuration - Works out of the box
- 🔧 Easy Customization - Clean, modular code structure
- 📝 TypeScript - Full type safety and IntelliSense
- 🚀 Fast Development - Hot module replacement with Vite
- 📖 Well Documented - Comprehensive inline documentation
A sleek, modern interface for browser-based calling
- ✅ Chrome/Edge 90+ (recommended)
- ✅ Firefox 88+
- ✅ Safari 14+ (with limitations)
- ✅ Opera 76+
You need a WebRTC-compatible SIP provider with WebSocket support:
- Twilio - Enterprise-grade, excellent documentation
- Plivo - Developer-friendly, competitive pricing
- Bandwidth.com - Carrier-grade infrastructure
- Vonage/Nexmo - Global reach
- Self-hosted: Asterisk, FreeSWITCH, Kamailio (with WebRTC configured)
- VoIP.ms (no WebSocket/WebRTC support)
- Most traditional SIP providers without WebSocket endpoints
- Node.js 18+ (for development)
- Modern web browser with WebRTC support
- Microphone access
# Clone the repository
git clone https://github.com/3monthsfree/React-Phone.git
cd React-Phone
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:5173
# Build for production
npm run build
# Preview production build
npm run previewThe optimized build will be in the dist/ directory, ready to deploy to any static hosting service.
- Click the Settings icon (⚙️) in the top-right corner
- Fill in your SIP credentials:
| Field | Description | Example |
|---|---|---|
| Display Name | Your name for caller ID | Erik Bos |
| SIP URI | Your SIP address | sip:erik@sip.example.com |
| Auth Username | Authentication username | erik or 12345 |
| Password | Your SIP password | •••••••• |
| WebSocket Server | WSS endpoint URL | wss://sip.example.com:8089/ws |
| STUN/TURN Servers | ICE servers (one per line) | See below |
STUN Server Format:
stun:stun.l.google.com:19302
TURN Server Format:
turn:turn.example.com:3478,username,password
Multiple Servers:
stun:stun.l.google.com:19302
stun:stun1.l.google.com:19302
turn:turn.example.com:3478,myuser,mypass
Display Name: Your Name
SIP URI: sip:your-client-name@your-account.pstn.twilio.com
Auth Username: your-client-name
Password: your-auth-token
WebSocket Server: wss://your-account.pstn.twilio.com/ws
STUN/TURN: stun:global.stun.twilio.com:3478
Display Name: Your Name
SIP URI: sip:1001@asterisk.example.com
Auth Username: 1001
Password: your-secret
WebSocket Server: wss://asterisk.example.com:8089/ws
STUN/TURN: stun:stun.l.google.com:19302
- Configure Settings - Enter your SIP credentials (one-time setup)
- Wait for Registration - Green indicator shows "registered" status
- Enter Phone Number - Type the destination number
- Click Call - Initiate the call
- Talk - Enjoy your conversation
- Hang Up - End the call when finished
- Stay Registered - Keep the app open and registered
- Accept/Reject - Browser prompt appears for incoming calls
- Answer - Click "OK" to accept the call
- Talk - Conversation begins automatically
- 🔇 Mute/Unmute - Click the microphone icon
- 📞 Hang Up - Click the red phone icon to end the call
- 📊 Monitor Status - Check call state in the debug panel
The application includes comprehensive logging for troubleshooting:
Open Browser DevTools (F12 or Cmd+Option+I) to view:
- 🔌 Connection Events - WebSocket connection status
- 📝 Registration Status - SIP registration lifecycle
- 📞 Call State Changes - Detailed call progression
- 🌐 WebRTC Details - Peer connection and ICE candidates
- 🎵 Media Tracks - Audio stream information
The in-app debug panel shows:
- Current connection status
- Call state
- Registration status
| Issue | Solution |
|---|---|
| "Not registered" error | Check SIP credentials and WebSocket URL |
| No audio | Check browser microphone permissions |
| Connection fails | Verify WebSocket server supports WSS |
| Calls don't connect | Check STUN/TURN server configuration |
| One-way audio | Verify NAT/firewall settings, add TURN server |
src/
├── App.tsx # Main application component
├── lib/
│ ├── sip-client.ts # JsSIP wrapper and call management
│ └── utils.ts # Utility functions
├── types/
│ └── sip.ts # TypeScript type definitions
└── main.tsx # Application entry point
- React 19 - Latest React with concurrent features
- TypeScript 5.9 - Type-safe development
- Vite 7 - Lightning-fast build tool
- Tailwind CSS 4 - Utility-first styling
- JsSIP 3.10 - SIP/WebRTC library
- Lucide React - Beautiful icon set
Future enhancements planned:
- 📋 Call history with timestamps
- 👥 Contact management
- 🔢 DTMF tone support (dialpad during calls)
- 📹 Video call support
- 🎙️ Call recording
- 📞 Multiple simultaneous calls
- 🔔 Custom ringtones
- 📊 Call quality metrics
- 🌍 Internationalization (i18n)
- 📱 Progressive Web App (PWA)
- 🎨 Theme customization
- ⌨️ Keyboard shortcuts
Contributions are welcome! This project is open source and community-driven.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow the existing code style
- Add TypeScript types for new features
- Test thoroughly in multiple browsers
- Update documentation as needed
- Keep commits atomic and well-described
Found a bug? Please open an issue with:
- Browser and version
- Steps to reproduce
- Expected vs actual behavior
- Console logs (if applicable)
This project is licensed under the MIT License - see the LICENSE file for details.
MIT License - Copyright (c) 2025 Erik Bos
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
Erik Bos
- GitHub: @3monthsfree
- Project: React-Phone
Built with these amazing open-source projects:
- React - UI framework
- Vite - Build tool
- Tailwind CSS - Styling
- JsSIP - SIP/WebRTC library
- Lucide Icons - Icon set
- TypeScript - Type safety
⭐ Star this repository if you find it useful!
Made with ❤️ by Erik Bos