React-native-sipjs NPM

About The Project

The library provide the react components, almost of components are React Hook, it provides easy way to build the sessions, perform actions on SIP calls

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Installation

Install via npm or yarn

yarn add react-sipjs npm install react-sipjs

Usage

Import and use the SIPProvider on our root application:

import { SIPProvider } from "react-sipjs";

function App() {
  return (
    <div className="p-5">
      <SIPProvider
        options={{
          domain: "voice.chatchilladev.sip.jambonz.cloud",
          webSocketServer: "wss://sip.jambonz.cloud:8443",
        }}
      >
        <div>
          <CallCenter />
        </div>
      </SIPProvider>
    </div>
  );
}

Use useSIPProvider at the hook to get connectAndRegister method to connect & register with SIP account

import { useSIPProvider } from "react-sipjs";

export const CallCenter = () => {
  const [username, setUsername] = useState<string>("test8");
  const [password, setPassword] = useState<string>("test123");
  const {
    connectAndRegister,
    connectStatus,
  } = useSIPProvider();
  
  useEffect(() => {
    connectAndRegister({
      username: username,
      password: password,
    });
  }, []);

  return ...;
}

Make the first call

const {
  sessionManager
  sessions
} = useSIPProvider();

await sessionManager?.call(`sip:${callTo}@voice.chatchilladev.sip.jambonz.cloud`);

Retrive reactive sessions

const {
  sessions
} = useSIPProvider();

sessions.forEach(session => {
  console.log(session.id, session.state);
})

Perform action with single session with useSessionCall

export const CallSessionItem = (props: { sessionId: string }) => {
  const { sessionId } = props;
  const {
    isHeld,
    isMuted,
    decline,
    hangup,
    hold,
    mute,
    answer,
    session,
    unhold,
    unmute,
    direction,
    timer,
  } = useSessionCall(sessionId);
  
  return (
    <div>
      <p>{session.state}</p>
        {session.state === SessionState.Initial && (
        <>
          <button  onClick={answer}>Answer</button>
          <button  onClick={decline}>Decline</button>
        </>
      )}
      
      {SessionState.Established === session.state && (
        <>
          <button  onClick={isHeld ? unhold : hold}>
            {isHeld ? "Unhold" : "Hold"}
          </button>
          <button  onClick={isMuted ? unmute : mute}>
            {isMuted ? "Ummute" : "Mute"}
          </button>
        </>
      )}
      {![SessionState.Terminating, SessionState.Terminated].includes(
      session.state) && <button  onClick={hangup}>Hang Up</button>}
    </div>
  )
}

Contributing

Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!