React SIP

React wrapper for jssip.

Installation

npm install react-sip

There is no need to install jssip as it is a dependency of react-sip.

Usage

import { SipProvider } from 'react-sip';
import App from './components/App';

ReactDOM.render(
  <SipProvider
    host="sip.example.com"
    port={7443}
    pathname="/ws" // Path in socket URI (e.g. wss://sip.example.com:7443/ws); "" by default
    user="alice"
    password={sipPassword} // usually required (e.g. from ENV or props)
    autoRegister={true} // true by default, see jssip.UA option register
    autoAnswer={false} // automatically answer incoming calls; false by default
    iceRestart={false} // force ICE session to restart on every WebRTC call; false by default
    sessionTimersExpires={120} // value for Session-Expires header; 120 by default
    extraHeaders={{ // optional sip headers to send
      register: ['X-Foo: foo', 'X-Bar: bar'],
      invite: ['X-Foo: foo2', 'X-Bar: bar2']
    }}
    iceServers={[ // optional
      { urls: ['stun:a.example.com', 'stun:b.example.com'] },
      { urls: 'turn:example.com', username: 'foo', credential: '1234' }
    ]}
    debug={false} // whether to output events to console; false by default
  >
    <App />
  </SipProvider>
  document.getElementById('root'),
);

Child components get access to this context:

{
  sip: sipType,
  call: callType,

  registerSip: PropTypes.func,
  unregisterSip: PropTypes.func,

  answerCall: PropTypes.func,
  startCall: PropTypes.func,
  stopCall: PropTypes.func,
}

See lib/types.ts for technical details of what sipType and callType are. An overview is given below:

sip

sip.status represents SIP connection status and equals to one of these values:

• 'sipStatus/DISCONNECTED' when host, port or user is not defined
• 'sipStatus/CONNECTING'
• 'sipStatus/CONNECTED'
• 'sipStatus/REGISTERED' after calling registerSip or after 'sipStatus/CONNECTED' when autoRegister is true
• 'sipStatus/ERROR' in case of configuration, connection or registration problems

sip.errorType:

• null when sip.status is not 'sipStatus/ERROR'
• 'sipErrorType/CONFIGURATION'
• 'sipErrorType/CONNECTION'
• 'sipErrorType/REGISTRATION'

sip.host, sip.port, sip.user, ... – <SipProvider />’s props (to make them easy to be displayed in the UI).

call

call.id is a unique session id of the actual established voice call; undefined between calls

call.status represents the status of the call:

• 'callStatus/IDLE' between calls (even when disconnected)
• 'callStatus/STARTING' active incoming or outgoing call request
• 'callStatus/ACTIVE' during ongoing call
• 'callStatus/STOPPING' during call cancelation request

call.direction indicates the direction of the ongoing call:

• null between calls
• 'callDirection/INCOMING'
• 'callDirection/OUTGOING'

call.counterpart represents the call destination in case of outgoing call and caller for incoming calls. The format depends on the configuration of the SIP server (e.g. "bob" <[email protected]>, [email protected] or [email protected]).

methods

When autoRegister is set to false, you can call sipRegister() and sipUnregister() manually for advanced registration scenarios.

To make calls, simply use these functions:

• answerCall()
• startCall(destination)
• stopCall()

The value for destination argument equals to the target SIP user without the host part (e.g. +441234567890 or bob). The omitted host part is equal to host you’ve defined in SipProvider props (e.g. sip.example.com).

---

The values for sip.status, sip.errorType, call.status and call.direction can be imported as constants to make typos easier to detect:

import {
  SIP_STATUS_DISCONNECTED,
  //SIP_STATUS_...,
  CALL_STATUS_IDLE,
  //CALL_STATUS_...,
  SIP_ERROR_TYPE_CONFIGURATION,
  //SIP_ERROR_TYPE_...,
  CALL_DIRECTION_INCOMING,
  CALL_DIRECTION_OUTGOING,
} from "react-sip";

Custom PropTypes types are also provided by the library:

import { callType, extraHeadersType, iceServersType, sipType } from "react-sip";