react-vqaap-sip
v0.0.5
Published
<!-- Improved compatibility of back to top link: See: https://github.com/othneildrew/Best-README-Template/pull/73 --> <a name="readme-top"></a> <!-- *** Thanks for checking out the Best-README-Template. If you have a suggestion *** that would make this be
Downloads
2
Maintainers
Readme
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
- 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 getconnectAndRegister
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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
License
Distributed under the MIT License. See LICENSE.txt
for more information.
Contact
Van Bui - [email protected]
Project Link: https://github.com/vanbui1995/react-sipjs