SIP.js WebRTC: Bridging SIP Telephony to the Browser (2026 Guide)

1import React, { useEffect, useState } from 'react';
2
3function ParticipantView({ session }) {
4    const [participants, setParticipants] = useState([]);
5
6    useEffect(() => {
7        if (session) {
8            const updateParticipants = () => {
9                const newParticipants = [];
10                if (session.remoteIdentity.displayName) {
11                    newParticipants.push(session.remoteIdentity.displayName);
12                } else {
13                    newParticipants.push(session.remoteIdentity.uri.toString());
14                }
15                setParticipants(newParticipants);
16            };
17
18            updateParticipants();
19
20            session.on('accepted', updateParticipants);
21            session.on('bye', () => setParticipants([]));
22            session.on('terminated', () => setParticipants([]));
23
24            return () => {
25                session.off('accepted', updateParticipants);
26                session.off('bye', () => setParticipants([]));
27                session.off('terminated', () => setParticipants([]));
28            };
29        }
30    }, [session]);
31
32    return (
33        <div>
34            <h2>Participant View</h2>
35            <ul>
36                {participants.map((participant, index) => (
37                    <li key={index}>{participant}</li>
38                ))}
39            </ul>
40        </div>
41    );
42}
43
44export default ParticipantView;
45

1import React, { useState } from 'react';
2import { UA } from 'sip.js';
3import JoinScreen from './components/JoinScreen';
4import CallControls from './components/CallControls';
5import ParticipantView from './components/ParticipantView';
6
7function App() {
8    const [userAgent, setUserAgent] = useState(null);
9    const [session, setSession] = useState(null);
10
11    const handleConnect = (username, password, server) => {
12        const ua = new UA({
13            uri: `sip:${username}@${server}`,
14            transportOptions: {
15                wsServers: [`wss://${server}/ws`],
16            },
17            authorizationUser: username,
18            password: password,
19        });
20
21        ua.start();
22        ua.on('invite', (incomingSession) => {
23            incomingSession.accept();
24            setSession(incomingSession);
25        });
26        setUserAgent(ua);
27    };
28
29    const handleStartCall = (target) => {
30        const outgoingSession = userAgent.invite(target);
31        setSession(outgoingSession);
32    };
33
34    const handleMute = () => {
35        if (session) {
36            session.mute();
37        }
38    };
39
40    const handleHold = () => {
41        if (session) {
42            session.hold();
43        }
44    };
45
46    const handleEndCall = () => {
47        if (session) {
48            session.terminate();
49            setSession(null);
50        }
51    };
52
53    return (
54        <div>
55            <h1>SIP.js WebRTC App</h1>
56            {!userAgent && <JoinScreen onConnect={handleConnect} />}
57            {userAgent && (
58                <CallControls
59                    onStartCall={handleStartCall}
60                    onMute={handleMute}
61                    onHold={handleHold}
62                    onEndCall={handleEndCall}
63                />
64            )}
65            {session && <ParticipantView session={session} />}
66        </div>
67    );
68}
69
70export default App;
71

1import React, { useEffect, useState } from 'react';
2
3function ParticipantView({ session }) {
4    const [participants, setParticipants] = useState([]);
5
6    useEffect(() => {
7        if (session) {
8            const updateParticipants = () => {
9                const newParticipants = session.dialogs.map(dialog => dialog.remoteIdentity.displayName || dialog.remoteIdentity.uri.toString());
10                setParticipants(newParticipants);
11            };
12
13            updateParticipants();
14
15            session.on('progress', updateParticipants);
16            session.on('accepted', updateParticipants);
17            session.on('bye', updateParticipants);
18            session.on('terminated', updateParticipants);
19
20            return () => {
21                session.off('progress', updateParticipants);
22                session.off('accepted', updateParticipants);
23                session.off('bye', updateParticipants);
24                session.off('terminated', updateParticipants);
25            };
26        }
27    }, [session]);
28
29    return (
30        <div>
31            <h2>Participant View</h2>
32            <ul>
33                {participants.map((participant, index) => (
34                    <li key={index}>{participant}</li>
35                ))}
36            </ul>
37        </div>
38    );
39}
40
41export default ParticipantView;
42

1npm start
2

1     npm run build
2