Kamailio WebRTC Gateway Setup Guide for 2026

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Participant View</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="participant-view">
11        <h1>Participants</h1>
12        <div id="participants"></div>
13    </div>
14
15    <script src="app.js"></script>
16</body>
17</html>

1body {
2    display: flex;
3    flex-direction: column;
4    align-items: center;
5    font-family: Arial, sans-serif;
6}
7
8.participant-view {
9    width: 80%;
10    max-width: 1200px;
11    margin: 20px auto;
12}
13
14.participant-view h1 {
15    text-align: center;
16    margin-bottom: 20px;
17}
18
19#participants {
20    display: flex;
21    flex-wrap: wrap;
22    gap: 10px;
23    justify-content: center;
24}
25
26.participant {
27    width: 200px;
28    border: 1px solid #ccc;
29    border-radius: 8px;
30    padding: 10px;
31    text-align: center;
32}
33
34.participant video {
35    width: 100%;
36    border-radius: 8px;
37}

1let localStream;
2let peerConnections = {};
3const participantsContainer = document.getElementById('participants');
4
5// Function to add a participant
6function addParticipant(stream, participantId) {
7    const participantElement = document.createElement('div');
8    participantElement.className = 'participant';
9    participantElement.id = participantId;
10
11    const videoElement = document.createElement('video');
12    videoElement.srcObject = stream;
13    videoElement.autoplay = true;
14
15    participantElement.appendChild(videoElement);
16    participantsContainer.appendChild(participantElement);
17}
18
19// Function to remove a participant
20function removeParticipant(participantId) {
21    const participantElement = document.getElementById(participantId);
22    if (participantElement) {
23        participantElement.remove();
24    }
25}
26
27// Setting up local stream
28navigator.mediaDevices.getUserMedia({ audio: true, video: true })
29    .then(stream => {
30        localStream = stream;
31        addParticipant(stream, 'local');
32    })
33    .catch(error => {
34        console.error('Error accessing media devices.', error);
35    });
36
37// Example function to handle new participant connection
38function handleNewParticipant(participantId) {
39    const configuration = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };
40    const peerConnection = new RTCPeerConnection(configuration);
41
42    peerConnection.addStream(localStream);
43
44    peerConnection.onaddstream = event => {
45        addParticipant(event.stream, participantId);
46    };
47
48    peerConnection.onicecandidate = event => {
49        if (event.candidate) {
50            // Send the candidate to the remote peer
51            sendMessage({
52                type: 'candidate',
53                candidate: event.candidate,
54                participantId
55            });
56        }
57    };
58
59    peerConnections[participantId] = peerConnection;
60
61    // Create an offer and send it to the new participant
62    peerConnection.createOffer()
63        .then(offer => {
64            return peerConnection.setLocalDescription(offer);
65        })
66        .then(() => {
67            sendMessage({
68                type: 'offer',
69                offer: peerConnection.localDescription,
70                participantId
71            });
72        })
73        .catch(error => {
74            console.error('Error creating offer.', error);
75        });
76}
77
78// Example function to handle incoming messages
79function handleMessage(message) {
80    const { type, participantId, offer, answer, candidate } = message;
81
82    const peerConnection = peerConnections[participantId];
83
84    switch (type) {
85        case 'offer':
86            peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
87                .then(() => {
88                    return peerConnection.createAnswer();
89                })
90                .then(answer => {
91                    return peerConnection.setLocalDescription(answer);
92                })
93                .then(() => {
94                    sendMessage({
95                        type: 'answer',
96                        answer: peerConnection.localDescription,
97                        participantId
98                    });
99                })
100                .catch(error => {
101                    console.error('Error handling offer.', error);
102                });
103            break;
104
105        case 'answer':
106            peerConnection.setRemoteDescription(new RTCSessionDescription(answer))
107                .catch(error => {
108                    console.error('Error setting remote description.', error);
109                });
110            break;
111
112        case 'candidate':
113            peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
114                .catch(error => {
115                    console.error('Error adding received ice candidate.', error);
116                });
117            break;
118
119        default:
120            break;
121    }
122}
123
124// Function to send messages (to be implemented according to your signaling server)
125function sendMessage(message) {
126    // Implement your signaling server communication here
127}

1function toggleParticipantMute(participantId) {
2    const participantElement = document.getElementById(participantId);
3    if (participantElement) {
4        const videoElement = participantElement.querySelector('video');
5        const audioTracks = videoElement.srcObject.getAudioTracks();
6        audioTracks.forEach(track => {
7            track.enabled = !track.enabled;
8        });
9    }
10}
11
12function toggleParticipantVideo(participantId) {
13    const participantElement = document.getElementById(participantId);
14    if (participantElement) {
15        const videoElement = participantElement.querySelector('video');
16        const videoTracks = videoElement.srcObject.getVideoTracks();
17        videoTracks.forEach(track => {
18            track.enabled = !track.enabled;
19        });
20    }
21}

1const WebSocket = require('ws');
2const wss = new WebSocket.Server({ port: 8080 });
3
4let participants = {};
5
6wss.on('connection', ws => {
7    const participantId = generateUniqueId();
8    participants[participantId] = ws;
9
10    ws.on('message', message => {
11        const parsedMessage = JSON.parse(message);
12        handleSignalingMessage(participantId, parsedMessage);
13    });
14
15    ws.on('close', () => {
16        delete participants[participantId];
17        broadcastMessage({ type: 'participantDisconnected', participantId });
18    });
19
20    broadcastMessage({ type: 'participantConnected', participantId });
21});
22
23function handleSignalingMessage(participantId, message) {
24    const { type, targetParticipantId } = message;
25
26    if (type === 'offer' || type === 'answer' || type === 'candidate') {
27        const targetWs = participants[targetParticipantId];
28        if (targetWs) {
29            targetWs.send(JSON.stringify({ ...message, participantId }));
30        }
31    }
32}
33
34function broadcastMessage(message) {
35    Object.values(participants).forEach(ws => {
36        ws.send(JSON.stringify(message));
37    });
38}
39
40function generateUniqueId() {
41    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, c => {
42        const r = Math.random() * 16 | 0;
43        const v = c === 'x' ? r : (r & 0x3 | 0x8);
44        return v.toString(16);
45    });
46}

1     sudo kamailio -f /usr/local/etc/kamailio/kamailio.cfg -DD -E

1     sudo systemctl start rtpengine

1     node signalingServer.js

1     npx http-server ./path-to-your-webapp