├── .gitignore
├── README.md
├── package.json
├── server.js
└── public
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Web_RTC_Connection
2 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webrtc",
 3 |   "version": "1.0.0",
 4 |   "main": "server.js",
 5 |   "scripts": {
 6 |     "test": "echo \"Error: no test specified\" && exit 1",
 7 |     "start": "node server.js"
 8 |   },
 9 |   "keywords": [],
10 |   "author": "",
11 |   "license": "ISC",
12 |   "description": "",
13 |   "dependencies": {
14 |     "express": "^5.1.0",
15 |     "socket.io": "^4.8.1"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | // const express = require('express');
 2 | // const http = require('http');
 3 | // const { Server } = require('socket.io');
 4 | // const path = require('path');
 5 | 
 6 | // const app = express();
 7 | // const server = http.createServer(app);
 8 | // const io = new Server(server);
 9 | 
10 | // app.use(express.static(path.join(__dirname, 'public')));
11 | 
12 | // io.on('connection', (socket) => {
13 | //   console.log('New client connected:', socket.id);
14 | 
15 | //   socket.on('join', (roomId) => {
16 | //     socket.join(roomId);
17 | //     socket.to(roomId).emit('user-joined', socket.id);
18 | //   });
19 | 
20 | //   socket.on('offer', (data) => {
21 | //     socket.to(data.room).emit('offer', data);
22 | //   });
23 | 
24 | //   socket.on('answer', (data) => {
25 | //     socket.to(data.room).emit('answer', data);
26 | //   });
27 | 
28 | //   socket.on('ice-candidate', (data) => {
29 | //     socket.to(data.room).emit('ice-candidate', data.candidate);
30 | //   });
31 | 
32 | //   socket.on('disconnect', () => {
33 | //     console.log('Client disconnected:', socket.id);
34 | //   });
35 | // });
36 | 
37 | // server.listen(3000, () => {
38 | //   console.log('Server is running on http://localhost:3000');
39 | // });
40 | 
41 | 
42 | const express = require('express');
43 | const http = require('http');
44 | const { Server } = require('socket.io');
45 | const path = require('path');
46 | 
47 | const app = express();
48 | const server = http.createServer(app);
49 | const io = new Server(server);
50 | 
51 | app.use(express.static(path.join(__dirname, 'public')));
52 | 
53 | const rooms = {};
54 | 
55 | io.on('connection', (socket) => {
56 |   console.log('Connected:', socket.id);
57 | 
58 |   socket.on('join', (roomId) => {
59 |     socket.join(roomId);
60 |     if (!rooms[roomId]) rooms[roomId] = [];
61 |     rooms[roomId].push(socket.id);
62 | 
63 |     const otherUsers = rooms[roomId].filter(id => id !== socket.id);
64 |     socket.emit('all-users', otherUsers);
65 | 
66 |     socket.to(roomId).emit('user-joined', socket.id);
67 | 
68 |     socket.on('sending-signal', payload => {
69 |       io.to(payload.userToSignal).emit('user-signal', {
70 |         signal: payload.signal,
71 |         callerId: payload.callerId,
72 |       });
73 |     });
74 | 
75 |     socket.on('returning-signal', payload => {
76 |       io.to(payload.callerId).emit('receiving-returned-signal', {
77 |         signal: payload.signal,
78 |         id: socket.id,
79 |       });
80 |     });
81 | 
82 |     socket.on('disconnect', () => {
83 |       rooms[roomId] = rooms[roomId]?.filter(id => id !== socket.id);
84 |       socket.to(roomId).emit('user-left', socket.id);
85 |     });
86 |   });
87 | });
88 | 
89 | server.listen(3000, () => {
90 |   console.log('Server running at http://localhost:3000');
91 | });
92 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
  1 | <!-- <!DOCTYPE html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>WebRTC Screen Share + Audio</title>
  6 |   <style>
  7 |     video { width: 45%; margin: 10px; border: 2px solid #333; }
  8 |     button { margin: 10px; padding: 10px; font-size: 16px; }
  9 |   </style>
 10 | </head>
 11 | <body>
 12 |   <h2>WebRTC Call (Screen + Audio)</h2>
 13 |   <button id="shareScreenBtn">Share Screen Again</button>
 14 |   <video id="localVideo" autoplay muted></video>
 15 |   <video id="remoteVideo" autoplay></video>
 16 | 
 17 |   <script src="/socket.io/socket.io.js"></script>
 18 |   <script>
 19 |     const socket = io();
 20 |     const room = "test-room";
 21 |     const shareScreenBtn = document.getElementById("shareScreenBtn");
 22 |     const localVideo = document.getElementById('localVideo');
 23 |     const remoteVideo = document.getElementById('remoteVideo');
 24 |     const peerConnection = new RTCPeerConnection({
 25 |       iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
 26 |     });
 27 | 
 28 |     let localStream;
 29 | 
 30 |     function createBlackVideoTrack() {
 31 |       const canvas = Object.assign(document.createElement("canvas"), { width: 640, height: 480 });
 32 |       const ctx = canvas.getContext("2d");
 33 |       ctx.fillStyle = "black";
 34 |       ctx.fillRect(0, 0, canvas.width, canvas.height);
 35 |       const stream = canvas.captureStream();
 36 |       return stream.getVideoTracks()[0];
 37 |     }
 38 | 
 39 |     async function renegotiate() {
 40 |       try {
 41 |         const offer = await peerConnection.createOffer();
 42 |         await peerConnection.setLocalDescription(offer);
 43 |         socket.emit('offer', { offer, room });
 44 |       } catch (err) {
 45 |         console.error("Renegotiation failed:", err);
 46 |       }
 47 |     }
 48 | 
 49 |     async function startCallWithScreenAndAudio() {
 50 |       try {
 51 |         const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
 52 |         const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
 53 | 
 54 |         const [screenTrack] = screenStream.getVideoTracks();
 55 |         const [audioTrack] = audioStream.getAudioTracks();
 56 | 
 57 |         const combinedStream = new MediaStream([screenTrack, audioTrack]);
 58 |         localStream = combinedStream;
 59 |         localVideo.srcObject = combinedStream;
 60 | 
 61 |         combinedStream.getTracks().forEach(track => {
 62 |           peerConnection.addTrack(track, combinedStream);
 63 |         });
 64 | 
 65 |         screenTrack.onended = () => {
 66 |           const fallbackTrack = createBlackVideoTrack();
 67 |           const sender = peerConnection.getSenders().find(s => s.track && s.track.kind === 'video');
 68 |           if (sender) {
 69 |             sender.replaceTrack(fallbackTrack);
 70 |             localVideo.srcObject = new MediaStream([fallbackTrack, audioTrack]);
 71 |             renegotiate(); // notify peer of change
 72 |           }
 73 |         };
 74 |       } catch (err) {
 75 |         console.error("Error starting call:", err);
 76 |       }
 77 |     }
 78 | 
 79 |     async function switchToScreenShare() {
 80 |       try {
 81 |         const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
 82 |         const screenTrack = screenStream.getVideoTracks()[0];
 83 |         const sender = peerConnection.getSenders().find(s => s.track && s.track.kind === 'video');
 84 |         if (sender) {
 85 |           await sender.replaceTrack(screenTrack);
 86 |           localVideo.srcObject = new MediaStream([screenTrack]);
 87 |           screenTrack.onended = () => {
 88 |             const fallback = createBlackVideoTrack();
 89 |             sender.replaceTrack(fallback);
 90 |             localVideo.srcObject = new MediaStream([fallback]);
 91 |             renegotiate();
 92 |           };
 93 |           renegotiate(); // notify other peer
 94 |         }
 95 |       } catch (error) {
 96 |         console.error("Error switching screen:", error);
 97 |       }
 98 |     }
 99 | 
100 |     shareScreenBtn.onclick = switchToScreenShare;
101 | 
102 |     startCallWithScreenAndAudio();
103 | 
104 |     peerConnection.ontrack = ({ streams: [stream] }) => {
105 |       remoteVideo.srcObject = stream;
106 |     };
107 | 
108 |     peerConnection.onicecandidate = (event) => {
109 |       if (event.candidate) {
110 |         socket.emit('ice-candidate', { candidate: event.candidate, room });
111 |       }
112 |     };
113 | 
114 |     socket.emit('join', room);
115 | 
116 |     socket.on('user-joined', async () => {
117 |       renegotiate();
118 |     });
119 | 
120 |     socket.on('offer', async ({ offer }) => {
121 |       await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
122 |       const answer = await peerConnection.createAnswer();
123 |       await peerConnection.setLocalDescription(answer);
124 |       socket.emit('answer', { answer, room });
125 |     });
126 | 
127 |     socket.on('answer', async ({ answer }) => {
128 |       await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
129 |     });
130 | 
131 |     socket.on('ice-candidate', async (candidate) => {
132 |       try {
133 |         await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
134 |       } catch (e) {
135 |         console.error('Error adding ICE candidate', e);
136 |       }
137 |     });
138 |   </script>
139 | </body>
140 | </html> -->
141 | 
142 | 
143 | 
144 | 
145 | 
146 | 
147 | 
148 | <!DOCTYPE html>
149 | <html lang="en">
150 | <head>
151 |   <meta charset="UTF-8">
152 |   <title>WebRTC Screen Share + Audio</title>
153 |   <style>
154 |     video { width: 45%; margin: 10px; border: 2px solid #333; }
155 |     button { margin: 10px; padding: 10px; font-size: 16px; }
156 |   </style>
157 | </head>
158 | <body>
159 |   <h2>WebRTC Call (Screen + Audio)</h2>
160 |   <button id="shareScreenBtn">Share Screen Again</button>
161 | <video id="localVideo" autoplay muted style="width: 200px; border: 2px solid green;"></video>
162 | <div id="remoteVideo" style="display: flex; flex-wrap: wrap;"></div>
163 | 
164 | 
165 |   <script src="/socket.io/socket.io.js"></script>
166 |   <script src="https://cdn.jsdelivr.net/npm/simple-peer@9.11.1/simplepeer.min.js"></script>
167 | 
168 | 
169 |   <script>
170 |   const socket = io();
171 |   const peers = {};
172 |   const room = prompt("Enter room name", "default-room") || "default-room";
173 | 
174 |   const localVideo = document.getElementById('localVideo');
175 |   const videoGrid = document.getElementById('remoteVideo');
176 |   const shareScreenBtn = document.getElementById('shareScreenBtn');
177 | 
178 |   let localStream;
179 | 
180 |   async function getMedia() {
181 |     const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
182 |     const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
183 | 
184 |     localStream = new MediaStream([
185 |       ...screenStream.getVideoTracks(),
186 |       ...audioStream.getAudioTracks()
187 |     ]);
188 | 
189 |     localVideo.srcObject = localStream;
190 |   }
191 | 
192 |   function addVideoStream(stream) {
193 |     const video = document.createElement('video');
194 |     video.srcObject = stream;
195 |     video.autoplay = true;
196 |     video.playsInline = true;
197 |     video.style.width = '200px';
198 |     video.style.border = '2px solid #333';
199 |     videoGrid.appendChild(video);
200 |   }
201 | 
202 |   socket.on('all-users', users => {
203 |     users.forEach(userId => {
204 |       const peer = createPeer(userId, socket.id);
205 |       peers[userId] = peer;
206 |     });
207 |   });
208 | 
209 |   socket.on('user-joined', userId => {
210 |     const peer = addPeer(userId, socket.id);
211 |     peers[userId] = peer;
212 |   });
213 | 
214 |   socket.on('user-signal', payload => {
215 |     const peer = peers[payload.callerId];
216 |     peer.signal(payload.signal);
217 |   });
218 | 
219 |   socket.on('receiving-returned-signal', payload => {
220 |     const peer = peers[payload.id];
221 |     peer.signal(payload.signal);
222 |   });
223 | 
224 |   socket.on('user-left', id => {
225 |     if (peers[id]) {
226 |       peers[id].destroy();
227 |       delete peers[id];
228 |     }
229 |   });
230 | 
231 |   function createPeer(userToSignal, callerId) {
232 |     const peer = new SimplePeer({
233 |       initiator: true,
234 |       trickle: false,
235 |       stream: localStream,
236 |     });
237 | 
238 |     peer.on('signal', signal => {
239 |       socket.emit('sending-signal', { userToSignal, callerId, signal });
240 |     });
241 | 
242 |     peer.on('stream', addVideoStream);
243 |     return peer;
244 |   }
245 | 
246 |   function addPeer(incomingId, callerId) {
247 |     const peer = new SimplePeer({
248 |       initiator: false,
249 |       trickle: false,
250 |       stream: localStream,
251 |     });
252 | 
253 |     peer.on('signal', signal => {
254 |       socket.emit('returning-signal', { signal, callerId: incomingId });
255 |     });
256 | 
257 |     peer.on('stream', addVideoStream);
258 |     return peer;
259 |   }
260 | 
261 |   getMedia().then(() => {
262 |     socket.emit('join', room);
263 |   });
264 | 
265 |   shareScreenBtn.onclick = async () => {
266 |     const screenStream = await navigator.mediaDevices.getDisplayMedia({ video: true });
267 |     const videoTrack = screenStream.getVideoTracks()[0];
268 | 
269 |     for (let peerId in peers) {
270 |       const sender = peers[peerId]._pc.getSenders().find(s => s.track.kind === 'video');
271 |       if (sender) {
272 |         sender.replaceTrack(videoTrack);
273 |       }
274 |     }
275 | 
276 |     localStream.removeTrack(localStream.getVideoTracks()[0]);
277 |     localStream.addTrack(videoTrack);
278 |     localVideo.srcObject = localStream;
279 | 
280 |     videoTrack.onended = () => {
281 |       alert("Screen sharing ended.");
282 |     };
283 |   };
284 | </script>
285 | 
286 | 
287 | 
288 | </body>
289 | </html>
290 | 


--------------------------------------------------------------------------------