Web (React) Guide

1
// src/App.tsx
2
import { useState } from 'react';
3
import { createJambonzClient, ClientState } from '@jambonz/client-sdk-web';
4
5
function App() {
6
  const [client, setClient] = useState(null);
7
  const [state, setState] = useState(ClientState.Disconnected);
8
9
  const connect = async () => {
10
    const c = createJambonzClient({
11
      server: 'wss://sbc.example.com:8443',
12
      username: 'your-username',
13
      password: 'your-password',
14
    });
15
16
    c.on('stateChanged', (s) => setState(s));
17
    c.on('error', (err) => console.error('Error:', err.message));
18
19
    await c.connect();
20
    setClient(c);
21
  };
22
23
  return (
24
    <div>
25
      <p>Status: {state}</p>
26
      <button onClick={connect}>Connect</button>
27
    </div>
28
  );
29
}
30
31
export default App;

1
const [call, setCall] = useState(null);
2
const [callState, setCallState] = useState(null);
3
4
const makeCall = () => {
5
  const newCall = client.call('+15551234567');
6
7
  newCall.on('stateChanged', (s) => setCallState(s));
8
  newCall.on('accepted', () => console.log('Call connected'));
9
  newCall.on('ended', (cause) => {
10
    console.log('Call ended:', cause.reason);
11
    setCall(null);
12
    setCallState(null);
13
  });
14
15
  setCall(newCall);
16
};
17
18
// In your JSX:
19
<button onClick={makeCall} disabled={!client}>Call</button>
20
<button onClick={() => call?.hangup()} disabled={!call}>Hang Up</button>
21
<p>Call: {callState || 'none'}</p>

1
const [incomingCall, setIncomingCall] = useState(null);
2
3
// Add this after creating the client:
4
c.on('incoming', (call) => {
5
  setIncomingCall(call);
6
});
7
8
// In your JSX:
9
{incomingCall && (
10
  <div>
11
    <p>Incoming call from: {incomingCall.remoteIdentity}</p>
12
    <button onClick={() => {
13
      incomingCall.answer();
14
      setCall(incomingCall);
15
      setIncomingCall(null);
16
    }}>Answer</button>
17
    <button onClick={() => {
18
      incomingCall.hangup();
19
      setIncomingCall(null);
20
    }}>Decline</button>
21
  </div>
22
)}

1
const [isMuted, setIsMuted] = useState(false);
2
const [isHeld, setIsHeld] = useState(false);
3
4
// Listen for events:
5
newCall.on('mute', (muted) => setIsMuted(muted));
6
newCall.on('hold', (held) => setIsHeld(held));
7
8
// In your JSX:
9
<button onClick={() => call?.toggleMute()}>
10
  {isMuted ? 'Unmute' : 'Mute'}
11
</button>
12
<button onClick={() => isHeld ? call?.unhold() : call?.hold()}>
13
  {isHeld ? 'Resume' : 'Hold'}
14
</button>
15
<button onClick={() => call?.sendDTMF('1')}>Send 1</button>

1
import { useJambonzClient, useCall } from '@jambonz/client-sdk-web';
2
3
function Phone() {
4
  const client = useJambonzClient({
5
    server: 'wss://sbc.example.com:8443',
6
    username: 'your-username',
7
    password: 'your-password',
8
  });
9
10
  const call = useCall(client.client);
11
12
  return (
13
    <div>
14
      <p>Status: {client.state}</p>
15
      {client.error && <p>Error: {client.error}</p>}
16
17
      {!client.isRegistered && (
18
        <button onClick={client.connect}>Connect</button>
19
      )}
20
21
      {client.isRegistered && !call.isActive && (
22
        <button onClick={() => call.makeCall('+15551234567')}>Call</button>
23
      )}
24
25
      {call.isActive && (
26
        <div>
27
          <p>Call: {call.state}</p>
28
          <button onClick={call.toggleMute}>
29
            {call.isMuted ? 'Unmute' : 'Mute'}
30
          </button>
31
          <button onClick={call.toggleHold}>
32
            {call.isHeld ? 'Resume' : 'Hold'}
33
          </button>
34
          <button onClick={call.hangup}>Hang Up</button>
35
        </div>
36
      )}
37
38
      {call.incomingCaller && (
39
        <div>
40
          <p>Incoming: {call.incomingCaller}</p>
41
          <button onClick={call.answerIncoming}>Answer</button>
42
          <button onClick={call.declineIncoming}>Decline</button>
43
        </div>
44
      )}
45
    </div>
46
  );
47
}