https://github.com/vanbui1995/react-sipjs
React components for SIP.js
https://github.com/vanbui1995/react-sipjs
call react sip sipjs voip webrtc
Last synced: 9 months ago
JSON representation
React components for SIP.js
- Host: GitHub
- URL: https://github.com/vanbui1995/react-sipjs
- Owner: vanbui1995
- Created: 2023-09-29T14:49:31.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-29T12:55:29.000Z (over 1 year ago)
- Last Synced: 2024-11-29T13:43:10.609Z (over 1 year ago)
- Topics: call, react, sip, sipjs, voip, webrtc
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-sipjs
- Size: 103 KB
- Stars: 16
- Watchers: 3
- Forks: 6
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Table of Contents
## 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:
```js
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("test8");
const [password, setPassword] = useState("test123");
const {
connectAndRegister,
connectStatus,
} = useSIPProvider();
useEffect(() => {
connectAndRegister({
username: username,
password: password,
});
}, []);
return ...;
}
```
3. Make the first call
```js
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`
```js
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 (
{session.state}
{session.state === SessionState.Initial && (
<>
Answer
Decline
>
)}
{SessionState.Established === session.state && (
<>
{isHeld ? "Unhold" : "Hold"}
{isMuted ? "Ummute" : "Mute"}
>
)}
{![SessionState.Terminating, SessionState.Terminated].includes(
session.state) && Hang Up}
)
}
```
## 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](https://github.com/vanbui1995/react-sipjs)
[contributors-shield]: https://img.shields.io/github/contributors/othneildrew/Best-README-Template.svg?style=for-the-badge
[contributors-url]: https://github.com/othneildrew/Best-README-Template/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/othneildrew/Best-README-Template.svg?style=for-the-badge
[forks-url]: https://github.com/othneildrew/Best-README-Template/network/members
[stars-shield]: https://img.shields.io/github/stars/othneildrew/Best-README-Template.svg?style=for-the-badge
[stars-url]: https://github.com/othneildrew/Best-README-Template/stargazers
[issues-shield]: https://img.shields.io/github/issues/othneildrew/Best-README-Template.svg?style=for-the-badge
[issues-url]: https://github.com/othneildrew/Best-README-Template/issues
[license-shield]: https://img.shields.io/github/license/othneildrew/Best-README-Template.svg?style=for-the-badge
[license-url]: https://github.com/othneildrew/Best-README-Template/blob/master/LICENSE.txt
[linkedin-shield]: https://img.shields.io/badge/-LinkedIn-black.svg?style=for-the-badge&logo=linkedin&colorB=555
[linkedin-url]: https://linkedin.com/in/othneildrew
[product-screenshot]: images/screenshot.png
[Next.js]: https://img.shields.io/badge/next.js-000000?style=for-the-badge&logo=nextdotjs&logoColor=white
[Next-url]: https://nextjs.org/
[React.js]: https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB
[React-url]: https://reactjs.org/
[Vue.js]: https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D
[Vue-url]: https://vuejs.org/
[Angular.io]: https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular&logoColor=white
[Angular-url]: https://angular.io/
[Svelte.dev]: https://img.shields.io/badge/Svelte-4A4A55?style=for-the-badge&logo=svelte&logoColor=FF3E00
[Svelte-url]: https://svelte.dev/
[Laravel.com]: https://img.shields.io/badge/Laravel-FF2D20?style=for-the-badge&logo=laravel&logoColor=white
[Laravel-url]: https://laravel.com
[Bootstrap.com]: https://img.shields.io/badge/Bootstrap-563D7C?style=for-the-badge&logo=bootstrap&logoColor=white
[Bootstrap-url]: https://getbootstrap.com
[JQuery.com]: https://img.shields.io/badge/jQuery-0769AD?style=for-the-badge&logo=jquery&logoColor=white
[JQuery-url]: https://jquery.com
