vanbui1995/react-sipjs

React components for SIP.js

React SIP.js Client

React components for SIP.js.
View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
2. Getting Started
   • Installation
3. Usage
4. Contributing
5. Contact

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

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

1. 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>
  );
}

2. 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 ...;
}

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

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!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

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

Contact

Van Bui - btvan1995@gmail.com

Project Link: https://github.com/vanbui1995/react-sipjs