React JsSIP Wrapper

React wrapper for jssip. For discussion TelegramGroup

Installation

npm install react-jssip-wrapper

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

Usage

import React, { useCallback, useRef } from "react";
import { SipProvider } from "react-jssip-wrapper";
import { IStore, setSip } from "store";
import { useDispatch, useSelector } from "react-redux";

const Sip = () => {
  const dispatch = useDispatch();
  const ref = useRef<any>();
  const connectionConfig = useSelector(
    (state: IStore) => state.sip.connectionConfig
  );

  const onRefChange = useCallback((node: any) => {
    if (node === null) {
      // DOM node referenced by ref has been unmounted
    } else {
      dispatch(setSip({ ref: node }));
      ref.current = node;
    }
  }, []);

  if (!connectionConfig) {
    return null;
  }

  // const call = () =>
  //   ref.current?.startCall(`sip:${phone}@${connectionConfig.server}`);
  //
  // const transfer = () => {
  //   ref.current?.state?.rtcSession?.refer(
  //     `sip:${transferPhone}@${connectionConfig.server}`
  //   );
  // };

  return (
      <SipProvider
        host={connectionConfig.server as string}
        port={7443}
        pathname="" // Path in socket URI (e.g. wss://sip.example.com:7443/ws); "" by default
        user={connectionConfig.user as string}
        password={connectionConfig.password as string} // usually required (e.g. from ENV or props)
        autoRegister={false} // true by default, see jssip.UA option register
        // autoAnswer={true} // automatically answer incoming calls; false by default
        iceRestart={true} // force ICE session to restart on every WebRTC call; false by default
        sessionTimersExpires={30000}
        debug={false} // wh
        ref={onRefChange}
        iceServers={[
          {
            urls: [
              "stun:stun.l.google.com:19302",
              "stun:stun1.l.google.com:19302",
            ],
          },
        ]}
        setAction={(data: any) => {
          dispatch(setSip({ ...data, ref: ref.current }));
        }}
        audioId="newAudioId" // default 'sip-provider-audio' for output audio
      />
  );
};

export default Sip;

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. +998945667725 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-jssip-wrapper";

Custom PropTypes types are also provided by the library:

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