React SoftPhone

A modern WebRTC softphone component for React applications with all dependencies bundled and zero translation dependencies.

📱 Interface Preview

Modern, clean interface with call controls, settings, and multi-channel support

✨ Features

• 🚀 Self-Contained - All MUI dependencies bundled, no additional installs needed
• 📦 Simple Installation - Just npm install react-softphone and you're ready
• 🎯 Material Design - Beautiful UI with Material-UI components included
• 📱 WebRTC Ready - Built on JsSIP for reliable VoIP calls
• ⚛️ Modern React - Uses hooks and modern React patterns
• 🎨 Built-in Launcher - Optional floating launcher button
• 📞 Call Management - Hold, transfer, conference, and attended transfer support

📦 Installation

npm install react-softphone

That's it! All MUI dependencies are bundled - no additional packages needed.

🚀 Step-by-Step Setup Guide

Follow this complete tutorial to get React Softphone working in your app:

Step 1: Create a New React App

# Create a new React application
npx create-react-app my-softphone-app
cd my-softphone-app

Step 2: Install React Softphone

# Install the react-softphone package
npm install react-softphone

Step 3: Add Audio Files

Create the required audio files in your public directory:

# Create sound directory
mkdir public/sound

# Add your audio files (you'll need to provide these)
# public/sound/ringing.ogg - Incoming call ringtone
# public/sound/ringback.ogg - Outgoing call ringback tone

Step 4: Replace App.js Content

Replace the contents of src/App.js with:

import React, { useState } from 'react';
import SoftPhone from 'react-softphone';
import './App.css';

function App() {
  // State to control softphone visibility
  const [softPhoneOpen, setSoftPhoneOpen] = useState(false);
  
  // Your SIP server configuration
  const sipConfig = {
    domain: 'your-sip-server.com',        // Your SIP domain
    uri: 'sip:[email protected]',  // Your SIP URI
    password: 'your-sip-password',        // Your SIP password
    ws_servers: 'wss://your-sip-server.com:8089/ws', // WebSocket server
    display_name: 'Your Name',            // Display name for calls
    debug: false,                         // Set to true for debugging
    session_timers_refresh_method: 'invite'
  };

  // Settings state with localStorage persistence
  const [callVolume, setCallVolume] = useState(() => {
    const saved = localStorage.getItem('softphone-call-volume');
    return saved ? parseFloat(saved) : 0.8;
  });
  
  const [ringVolume, setRingVolume] = useState(() => {
    const saved = localStorage.getItem('softphone-ring-volume');
    return saved ? parseFloat(saved) : 0.6;
  });
  
  const [notifications, setNotifications] = useState(() => {
    const saved = localStorage.getItem('softphone-notifications');
    return saved ? JSON.parse(saved) : true;
  });
  
  const [connectOnStart, setConnectOnStart] = useState(() => {
    const saved = localStorage.getItem('softphone-connect-on-start');
    return saved ? JSON.parse(saved) : false;
  });

  // Functions to save settings (implement localStorage if needed)
  const saveConnectOnStart = (value) => {
    setConnectOnStart(value);
    localStorage.setItem('softphone-connect-on-start', value);
  };

  const saveNotifications = (value) => {
    setNotifications(value);
    localStorage.setItem('softphone-notifications', value);
  };

  const saveCallVolume = (value) => {
    setCallVolume(value);
    localStorage.setItem('softphone-call-volume', value);
  };

  const saveRingVolume = (value) => {
    setRingVolume(value);
    localStorage.setItem('softphone-ring-volume', value);
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>📞 My Softphone App</h1>
        <p>Click the button below to open the softphone</p>
        
        <button 
          onClick={() => setSoftPhoneOpen(true)}
          style={{
            padding: '12px 24px',
            fontSize: '16px',
            backgroundColor: '#1976d2',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            marginBottom: '20px'
          }}
        >
          📞 Open Softphone
        </button>

        <SoftPhone
          // Visibility control
          softPhoneOpen={softPhoneOpen}
          setSoftPhoneOpen={setSoftPhoneOpen}
          
          // Audio settings
          callVolume={callVolume}
          ringVolume={ringVolume}
          
          // Connection settings
          connectOnStart={connectOnStart}
          notifications={notifications}
          
          // SIP configuration
          config={sipConfig}
          
          // Settings callbacks
          setConnectOnStartToLocalStorage={saveConnectOnStart}
          setNotifications={saveNotifications}
          setCallVolume={saveCallVolume}
          setRingVolume={saveRingVolume}
          
          // Optional: Built-in floating launcher
          builtInLauncher={true}
          launcherPosition="bottom-right"
          launcherSize="medium"
          launcherColor="primary"
          
          // Optional: Accounts for call transfer
          asteriskAccounts={[]}
          
          // Optional: Timezone for call history
          timelocale="UTC"
        />
      </header>
    </div>
  );
}

export default App;

Step 5: Update App.css (Optional Styling)

Add these styles to src/App.css:

.App {
  text-align: center;
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.App-header h1 {
  margin-bottom: 10px;
}

.App-header p {
  margin-bottom: 30px;
  opacity: 0.8;
}

Step 6: Configure Your SIP Settings

Update the sipConfig object in Step 4 with your actual SIP server details:

const sipConfig = {
  domain: 'sip.yourprovider.com',           // Replace with your SIP domain
  uri: 'sip:[email protected]',     // Replace with your extension
  password: 'your-actual-password',          // Replace with your SIP password
  ws_servers: 'wss://sip.yourprovider.com:8089/ws', // Replace with your WebSocket URL
  display_name: 'John Doe',                  // Replace with your name
  debug: false                               // Set to true for troubleshooting
};

Step 7: Run Your Application

# Start the development server
npm start

Your app will open at http://localhost:3000 with a working softphone!

Step 8: Enable Debug Mode (Optional)

For troubleshooting, add this to your browser console:

window.__SOFTPHONE_DEBUG__ = true;

📋 Requirements

No Additional Dependencies Required

All dependencies are bundled with the package.

🔧 Props Configuration

Required Props

| Property | Type | Description | |----------|------|-------------| | config | Object | SIP configuration object (see below) | | setConnectOnStartToLocalStorage | Function | Callback to save auto-connect preference | | setNotifications | Function | Callback to save notification preference | | setCallVolume | Function | Callback to save call volume | | setRingVolume | Function | Callback to save ring volume |

Optional Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | softPhoneOpen | Boolean | false | Controls softphone visibility | | setSoftPhoneOpen | Function | () => {} | Callback when softphone opens/closes | | callVolume | Number | 0.5 | Call audio volume (0-1) | | ringVolume | Number | 0.5 | Ring audio volume (0-1) | | connectOnStart | Boolean | false | Auto-connect on component mount | | notifications | Boolean | true | Show browser notifications for calls | | timelocale | String | 'UTC' | Timezone for call history | | asteriskAccounts | Array | [] | List of available accounts for transfer | | builtInLauncher | Boolean | false | Show floating launcher button | | launcherPosition | String | 'bottom-right' | Launcher position ('bottom-right', 'bottom-left', etc.) | | launcherSize | String | 'medium' | Launcher size ('small', 'medium', 'large') | | launcherColor | String | 'primary' | Launcher color theme |

Config Object

The config prop must include these SIP settings:

const domain = 'your-sip-server.com';
const extension = 'your-extension';

const config = {
  domain: domain,
  uri: `sip:${extension}@${domain}`,
  password: 'your-password',
  ws_servers: `wss://${domain}:8089/ws`,
  display_name: extension,
  debug: false,
  session_timers_refresh_method: 'invite'
};

🎵 Audio Files

Place these audio files in your public/sound/ directory:

• ringing.ogg - Incoming call ringtone
• ringback.ogg - Outgoing call ringback tone

🎨 Built-in Launcher

The softphone includes an optional floating launcher button:

<SoftPhone
  config={config}
  builtInLauncher={true}
  launcherPosition="bottom-right"
  launcherSize="medium"
  launcherColor="primary"
  // ... other props
/>

Available positions: bottom-right, bottom-left, top-right, top-left Available sizes: small, medium, large Available colors: primary, secondary, success, error, warning, info

📞 Call Features

• Make Calls - Dial numbers and make outgoing calls
• Answer/Reject - Handle incoming calls with notifications
• Hold/Resume - Put calls on hold and resume them
• Transfer - Transfer calls to other numbers
• Attended Transfer - Talk to transfer target before completing
• Conference - Merge multiple calls into conference
• Mute/Unmute - Control microphone during calls
• Call History - View recent call history with timestamps
• Volume Control - Separate controls for call and ring volume

🌐 Browser Support

• Chrome 60+
• Firefox 55+
• Safari 11+ (with WebRTC support)
• Edge 79+

🐛 Debug Mode

To enable debug logging for troubleshooting:

// Enable debug mode in your app
window.__SOFTPHONE_DEBUG__ = true;

// Now all debug messages will appear in browser console

This will show detailed logs for:

• Connection attempts
• Call state changes
• Notification handling
• Error messages

🔧 Development

# Clone the repository
git clone https://github.com/chamuridis/react-softphone.git

# Install dependencies
npm install

# Build the package
npm run build

# Create package
npm pack

# Install the created package in your project
npm install ../react-softphone/react-softphone-*.tgz  

📄 License

ISC © chamuridis