React SIP.js Client

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

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 (

); }

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

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
```js
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