Build a Video Chat App with WebRTC and Node.js in 2026

1   const socket = io();
2
3   const joinScreen = document.getElementById('join-screen');
4   const videoChat = document.getElementById('video-chat');
5   const joinBtn = document.getElementById('join-btn');
6   const leaveBtn = document.getElementById('leave-btn');
7   const roomNameInput = document.getElementById('room-name');
8   const localVideo = document.getElementById('local-video');
9   const remoteVideos = document.getElementById('remote-videos');
10   const muteBtn = document.getElementById('mute-btn');
11   const videoBtn = document.getElementById('video-btn');
12
13   let localStream;
14   let peerConnections = {};
15   let isMuted = false;
16   let isVideoDisabled = false;
17
18   joinBtn.addEventListener('click', () => {
19       const roomName = roomNameInput.value;
20       if (roomName) {
21           joinRoom(roomName);
22       }
23   });
24
25   leaveBtn.addEventListener('click', leaveRoom);
26   muteBtn.addEventListener('click', toggleMute);
27   videoBtn.addEventListener('click', toggleVideo);
28
29   async function joinRoom(roomName) {
30       joinScreen.style.display = 'none';
31       videoChat.style.display = 'block';
32
33       localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
34       localVideo.srcObject = localStream;
35
36       socket.emit('join', roomName);
37
38       socket.on('offer', async (id, description) => {
39           const peerConnection = new RTCPeerConnection();
40           peerConnections[id] = peerConnection;
41
42           localStream.getTracks().forEach(track => peerConnection.addTrack(track, localStream));
43
44           await peerConnection.setRemoteDescription(new RTCSessionDescription(description));
45           const answer = await peerConnection.createAnswer();
46           await peerConnection.setLocalDescription(answer);
47
48           socket.emit('answer', id, peerConnection.localDescription);
49
50           peerConnection.ontrack = event => {
51               const remoteVideo = createRemoteVideoElement(id, event.streams[0]);
52               remoteVideos.appendChild(remoteVideo);
53           };
54
55           peerConnection.onicecandidate = event => {
56               if (event.candidate) {
57                   socket.emit('candidate', id, event.candidate);
58               }
59           };
60       });
61
62       socket.on('answer', async (id, description) => {
63           const peerConnection = peerConnections[id];
64           await peerConnection.setRemoteDescription(new RTCSessionDescription(description));
65       });
66
67       socket.on('candidate', (id, candidate) => {
68           const peerConnection = peerConnections[id];
69           peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
70       });
71
72       socket.on('leave', id => {
73           const peerConnection = peerConnections[id];
74           peerConnection.close();
75           delete peerConnections[id];
76           removeRemoteVideoElement(id);
77       });
78   }
79
80   function leaveRoom() {
81       for (let id in peerConnections) {
82           peerConnections[id].close();
83           delete peerConnections[id];
84       }
85       localStream.getTracks().forEach(track => track.stop());
86       joinScreen.style.display = 'block';
87       videoChat.style.display = 'none';
88       socket.emit('leave');
89       remoteVideos.innerHTML = '';
90   }
91
92   function toggleMute() {
93       isMuted = !isMuted;
94       localStream.getAudioTracks()[0].enabled = !isMuted;
95       muteBtn.textContent = isMuted ? 'Unmute' : 'Mute';
96   }
97
98   function toggleVideo() {
99       isVideoDisabled = !isVideoDisabled;
100       localStream.getVideoTracks()[0].enabled = !isVideoDisabled;
101       videoBtn.textContent = isVideoDisabled ? 'Enable Video' : 'Disable Video';
102   }
103
104   function createRemoteVideoElement(id, stream) {
105       const video = document.createElement('video');
106       video.id = `remote-video-${id}`;
107       video.srcObject = stream;
108       video.autoplay = true;
109       video.playsinline = true;
110       return video;
111   }
112
113   function removeRemoteVideoElement(id) {
114       const video = document.getElementById(`remote-video-${id}`);
115       if (video) {
116           video.remove();
117       }
118   }

1   node src/index.js