About The Project

[Image here]

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

New Chnages

This library is updated version of modify-react-sipjs for generatin multiple channels at the same time previously it was support only max 3

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 modify-react-sipjs npm install modify-react-sipjs

Usage

1. Import and use the SIPProvider on our root application:

import { SIPProvider } from "modify-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>
  );
}

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

import { useSIPProvider } from "modify-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 ...;
}

3. Make the first call

const {
  sessionManager
  sessions
} = useSIPProvider();

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

4. Retrive reactive sessions

const {
  sessions
} = useSIPProvider();

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

5. 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>
  )
}

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

Ravi Raj - [email protected]

Project Link: https://github.com/RavirajO7/modify-modify-react-sipjs

Credit

Van Bui - [email protected]