WebPhone Plugin Setup with Jssip

This project integrates the webphone-plugin to provide VoIP functionality using Jssip. Below you'll find instructions on how to configure and use the plugin in your React application.

Installation

Install the required webphone-plugin dependency:

npm install webphone-plugin

Configuration

To initialize the WebPhone Plugin, you'll need to configure the required settings. These settings will be passed to the Jssip component through a _config object, which is a Map containing key-value pairs for various parameters.

Example Configuration

const _config = new Map([
  ["extension", "xxxx"], // SIP extension
  // ['turn_username', 'xxxx:xxxx'],    // Optional TURN username
  // ['turn_password', 'xxxx='],        // Optional TURN password
  ["stun_url", "stun:stun.l.google.com:19302"], // STUN server URL for NAT traversal
  // ['turn_url', 'xxxx'],              // Optional TURN server URL
  ["domain", "xxxx"], // SIP domain
  ["password", "xxxxxxxx"], // SIP account password
  ["name", "xxxx"], // Display name for the caller
  ["wss_url", "wss://xxxx"], // WebSocket URL for SIP signaling
  ["via_transport", "WSS"], // Transport protocol (WebSocket Secure)
  ["logs", false], // Enable or disable logs
  ["callerID", "xxxx"], // Caller ID to display
  ["turn_policy", "xxxx"], // TURN server policy (if applicable)
]);

Configuration Parameters

• extension: Your SIP extension (e.g., 1001).
• stun_url: The STUN server URL, used for NAT traversal.
• domain: The SIP domain or server.
• password: Your SIP account password.
• name: Display name of the caller.
• wss_url: WebSocket Secure URL for SIP signaling.
• via_transport: Transport protocol for SIP (WSS for WebSocket Secure).
• logs: Boolean flag to enable or disable logging.
• callerID: The Caller ID to use during calls.
• turn_policy: Optional TURN server policy (e.g., "mandatory" or "optional").

Note: TURN servers can be configured for enhanced NAT traversal, but they are commented out in the configuration. Uncomment and fill in these parameters if TURN is required for your setup.

Usage

The Jssip component from webphone-plugin is a render prop component. It takes _config as a prop and provides various methods and states to control VoIP functionality.

Basic Usage Example

import React from "react";
import Jssip from "webphone-plugin";

const App = () => {
  const _config = new Map([
    ["extension", "1001"],
    ["stun_url", "stun:stun.l.google.com:19302"],
    ["domain", "your.sipdomain.com"],
    ["password", "yourpassword"],
    ["name", "Your Name"],
    ["wss_url", "wss://your.sipdomain.com:8089/ws"],
    ["via_transport", "WSS"],
    ["logs", false],
    ["callerID", "YourCallerID"],
    ["turn_policy", "optional"],
  ]);

  return (
    <Jssip _config={_config}>
      {(_data) => {
        const {
          _makeCall,
          _setNumber,
          _toggleHold,
          _answerCall,
          _terminate,
          _muteCall,
          _sendDtmf,
          _referUser,
          _passInfo,
          _start,
          _stop,
          _attendedTransfer,
          _speakerOff,
          _speakerOn,
          _nbTerminate,
        } = _data;

        const {
          _status,
          _number,
          _uaSessions,
          _uiSessions,
          _ring,
          _total,
          _speakers,
        } = _data;

        return (
          <div>
            <h1>VoIP WebPhone</h1>

            {/* Display current phone status */}
            <p>Status: {_status}</p>

            {/* Set the number to call */}
            <input
              type="text"
              placeholder="Enter Number"
              onChange={(e) => _setNumber(e.target.value)}
            />

            {/* Make a call */}
            <button onClick={() => _makeCall()}>Make Call</button>

            {/* Answer an incoming call */}
            <button onClick={() => _answerCall()}>Answer Call</button>

            {/* End an ongoing call */}
            <button onClick={() => _terminate()}>End Call</button>

            {/* Additional features */}
            <button onClick={() => _muteCall(true)}>Mute</button>
            <button onClick={() => _muteCall(false)}>Unmute</button>
            <button onClick={() => _toggleHold()}>Hold/Resume Call</button>
            <button onClick={() => _sendDtmf("1")}>Send DTMF (1)</button>
            <button onClick={() => _speakerOn()}>Speaker On</button>
            <button onClick={() => _speakerOff()}>Speaker Off</button>
          </div>
        );
      }}
    </Jssip>
  );
};

export default App;

Available Methods

The Jssip component provides the following methods via the _data object:

• _makeCall: Initiates a call to the number set in _setNumber.
• _setNumber: Sets the number to be called.
• _toggleHold: Toggles the hold status of the current call based on uuid.
• _answerCall: Answers an incoming call.
• _terminate: Terminates an ongoing call based on uuid.
• _muteCall: Mutes/unmutes the microphone (_muteCall(true) to mute, _muteCall(false) to unmute).
• _sendDtmf: Sends DTMF tones (e.g., _sendDtmf('1')).
• _referUser: Transfers the call to another user.
• _passInfo: Sends in-call information.
• _start: Starts the web phone service.
• _stop: Stops the web phone service.
• _attendedTransfer: Attends to a transfer.
• _speakerOff: Turns off the speakerphone.
• _speakerOn: Turns on the speakerphone.
• _nbTerminate: Terminates the session based on number.

Available State Variables

The component also provides various states, including:

• _status: The current status of the call (e.g., "ringing", "connected").
• _number: The phone number currently set.
• _uaSessions: User agent sessions object.
• _uiSessions: UI sessions object.
• _ring: Status of the phone ringer.
• _total: Total number of active sessions.
• _speakers: List of active speakers.