FreeSWITCH WebRTC: Complete 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>FreeSwitch WebRTC Main Interface</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="main-interface">
11        <div id="local-video-container">
12            <video id="local-video" autoplay muted></video>
13        </div>
14        <div id="remote-video-container">
15            <!-- Remote video elements will be added here dynamically -->
16        </div>
17        <div class="control-panel">
18            <button id="mute-audio">Mute Audio</button>
19            <button id="toggle-video">Stop Video</button>
20            <button id="switch-camera">Switch Camera</button>
21            <button id="end-call">End Call</button>
22        </div>
23    </div>
24    <script src="webrtc.js"></script>
25</body>
26</html>

1#remote-video-container {
2    display: flex;
3    flex-wrap: wrap;
4    justify-content: center;
5    gap: 10px;
6}
7
8.remote-video {
9    width: 300px;
10    border-radius: 8px;
11    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
12}

1document.addEventListener("DOMContentLoaded", function () {
2    const muteAudioButton = document.getElementById("mute-audio");
3    const toggleVideoButton = document.getElementById("toggle-video");
4    const switchCameraButton = document.getElementById("switch-camera");
5    const endCallButton = document.getElementById("end-call");
6
7    let localStream;
8    let remoteStreams = {};
9    let isAudioMuted = false;
10    let isVideoStopped = false;
11
12    // Get user media
13    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
14        .then(stream => {
15            localStream = stream;
16            document.getElementById("local-video").srcObject = stream;
17            // Initialize connection to signaling server
18            initializeWebSocket();
19        })
20        .catch(error => {
21            console.error("Error accessing media devices.", error);
22        });
23
24    // WebSocket initialization and handling
25    function initializeWebSocket() {
26        // Replace with your actual WebSocket signaling server URL
27        const signalingServerUrl = "wss://your-signaling-server-url";
28        const ws = new WebSocket(signalingServerUrl);
29
30        ws.onopen = function () {
31            console.log("Connected to the signaling server");
32
33            // Send join message
34            const joinMessage = {
35                type: "join",
36                username: "user",
37                roomId: "room"
38            };
39            ws.send(JSON.stringify(joinMessage));
40        };
41
42        ws.onmessage = function (message) {
43            console.log("Received message from server:", message.data);
44
45            const data = JSON.parse(message.data);
46            switch (data.type) {
47                case "joined":
48                    console.log(`${data.username} joined room ${data.roomId}`);
49                    break;
50                case "new-participant":
51                    handleNewParticipant(data.participantId);
52                    break;
53                case "participant-left":
54                    handleParticipantLeft(data.participantId);
55                    break;
56                case "offer":
57                    handleOffer(data.offer, data.participantId);
58                    break;
59                case "answer":
60                    handleAnswer(data.answer, data.participantId);
61                    break;
62                case "ice-candidate":
63                    handleIceCandidate(data.candidate, data.participantId);
64                    break;
65                // Handle other message types as needed
66            }
67        };
68
69        ws.onerror = function (error) {
70            console.error("WebSocket error:", error);
71        };
72
73        ws.onclose = function () {
74            console.log("Disconnected from the signaling server");
75        };
76    }
77
78    function handleNewParticipant(participantId) {
79        // Create new video element for the participant
80        const remoteVideo = document.createElement("video");
81        remoteVideo.id = `remote-video-${participantId}`;
82        remoteVideo.classList.add("remote-video");
83        remoteVideo.autoplay = true;
84        document.getElementById("remote-video-container").appendChild(remoteVideo);
85
86        // Initialize a new RTCPeerConnection
87        const peerConnection = new RTCPeerConnection();
88
89        // Add local stream tracks to the peer connection
90        localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
91
92        // Handle incoming tracks
93        peerConnection.ontrack = function (event) {
94            if (remoteVideo.srcObject !== event.streams[0]) {
95                remoteVideo.srcObject = event.streams[0];
96                console.log("Received remote stream");
97            }
98        };
99
100        // Handle ICE candidates
101        peerConnection.onicecandidate = function (event) {
102            if (event.candidate) {
103                const candidateMessage = {
104                    type: "ice-candidate",
105                    candidate: event.candidate,
106                    participantId: participantId
107                };
108                ws.send(JSON.stringify(candidateMessage));
109            }
110        };
111
112        remoteStreams[participantId] = peerConnection;
113
114        // Create and send an offer
115        peerConnection.createOffer()
116            .then(offer => {
117                return peerConnection.setLocalDescription(offer);
118            })
119            .then(() => {
120                const offerMessage = {
121                    type: "offer",
122                    offer: peerConnection.localDescription,
123                    participantId: participantId
124                };
125                ws.send(JSON.stringify(offerMessage));
126            })
127            .catch(error => {
128                console.error("Error creating offer:", error);
129            });
130    }
131
132    function handleParticipantLeft(participantId) {
133        // Remove the video element for the participant
134        const remoteVideo = document.getElementById(`remote-video-${participantId}`);
135        if (remoteVideo) {
136            remoteVideo.remove();
137        }
138
139        // Close the peer connection
140        if (remoteStreams[participantId]) {
141            remoteStreams[participantId].close();
142            delete remoteStreams[participantId];
143        }
144    }
145
146    function handleOffer(offer, participantId) {
147        const peerConnection = new RTCPeerConnection();
148
149        // Add local stream tracks to the peer connection
150        localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
151
152        // Handle incoming tracks
153        peerConnection.ontrack = function (event) {
154            const remoteVideo = document.getElementById(`remote-video-${participantId}`);
155            if (remoteVideo.srcObject !== event.streams[0]) {
156                remoteVideo.srcObject = event.streams[0];
157                console.log("Received remote stream");
158            }
159        };
160
161        // Handle ICE candidates
162        peerConnection.onicecandidate = function (event) {
163            if (event.candidate) {
164                const candidateMessage = {
165                    type: "ice-candidate",
166                    candidate: event.candidate,
167                    participantId: participantId
168                };
169                ws.send(JSON.stringify(candidateMessage));
170            }
171        };
172
173        peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
174            .then(() => {
175                return peerConnection.createAnswer();
176            })
177            .then(answer => {
178                return peerConnection.setLocalDescription(answer);
179            })
180            .then(() => {
181                const answerMessage = {
182                    type: "answer",
183                    answer: peerConnection.localDescription,
184                    participantId: participantId
185                };
186                ws.send(JSON.stringify(answerMessage));
187            })
188            .catch(error => {
189                console.error("Error handling offer:", error);
190            });
191
192        remoteStreams[participantId] = peerConnection;
193    }
194
195    function handleAnswer(answer, participantId) {
196        const peerConnection = remoteStreams[participantId];
197        peerConnection.setRemoteDescription(new RTCSessionDescription(answer))
198            .catch(error => {
199                console.error("Error setting remote description:", error);
200            });
201    }
202
203    function handleIceCandidate(candidate, participantId) {
204        const peerConnection = remoteStreams[participantId];
205        peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
206            .catch(error => {
207                console.error("Error adding ICE candidate:", error);
208            });
209    }
210
211    // Mute/Unmute Audio
212    muteAudioButton.addEventListener("click", function () {
213        isAudioMuted = !isAudioMuted;
214        localStream.getAudioTracks()[0].enabled = !isAudioMuted;
215        muteAudioButton.textContent = isAudioMuted ? "Unmute Audio" : "Mute Audio";
216    });
217
218    // Start/Stop Video
219    toggleVideoButton.addEventListener("click", function () {
220        isVideoStopped = !isVideoStopped;
221        localStream.getVideoTracks()[0].enabled = !isVideoStopped;
222        toggleVideoButton.textContent = isVideoStopped ? "Start Video" : "Stop Video";
223    });
224
225    // Switch Camera
226    switchCameraButton.addEventListener("click", async function () {
227        if (localStream) {
228            const videoTrack =
229
230 localStream.getVideoTracks()[0];
231            const currentConstraints = videoTrack.getConstraints();
232
233            const devices = await navigator.mediaDevices.enumerateDevices();
234            const videoDevices = devices.filter(device => device.kind === 'videoinput');
235
236            if (videoDevices.length > 1) {
237                const currentDeviceId = videoTrack.getSettings().deviceId;
238                const newDeviceId = videoDevices.find(device => device.deviceId !== currentDeviceId).deviceId;
239
240                const newConstraints = {
241                    video: {
242                        deviceId: { exact: newDeviceId }
243                    }
244                };
245
246                const newStream = await navigator.mediaDevices.getUserMedia(newConstraints);
247                const newVideoTrack = newStream.getVideoTracks()[0];
248                localStream.removeTrack(videoTrack);
249                localStream.addTrack(newVideoTrack);
250
251                document.getElementById("local-video").srcObject = localStream;
252            }
253        }
254    });
255
256    // End Call
257    endCallButton.addEventListener("click", function () {
258        if (localStream) {
259            localStream.getTracks().forEach(track => track.stop());
260        }
261        // Implement additional logic to handle call termination
262        window.location.href = "join.html";
263    });
264});

1     sudo freeswitch -nc

1     npm install -g http-server