Build Your Own WebRTC Project: A Comprehensive Guide

1const express = require('express');
2const http = require('http');
3const socketIO = require('socket.io');
4
5const app = express();
6const server = http.createServer(app);
7const io = socketIO(server);
8
9io.on('connection', (socket) => {
10  console.log('User connected:', socket.id);
11
12  socket.on('offer', (data) => {
13    socket.broadcast.emit('offer', data);
14  });
15
16  socket.on('answer', (data) => {
17    socket.broadcast.emit('answer', data);
18  });
19
20  socket.on('ice-candidate', (data) => {
21    socket.broadcast.emit('ice-candidate', data);
22  });
23
24  socket.on('disconnect', () => {
25    console.log('User disconnected:', socket.id);
26  });
27});
28
29const port = 3000;
30server.listen(port, () => {
31  console.log(`Signaling server running on port ${port}`);
32});
33

1const peerConnection = new RTCPeerConnection({
2  iceServers: [
3    { urls: 'stun:stun.l.google.com:19302' },
4    { urls: 'stun:stun1.l.google.com:19302' }
5  ]
6});
7
8peerConnection.onicecandidate = (event) => {
9  if (event.candidate) {
10    // Send the ICE candidate to the other peer through the signaling server
11    socket.emit('ice-candidate', { candidate: event.candidate });
12  }
13};
14
15peerConnection.ontrack = (event) => {
16  const remoteVideo = document.getElementById('remoteVideo');
17  remoteVideo.srcObject = event.streams[0];
18};
19
20// Creating an offer
21peerConnection.createOffer()
22  .then(offer => peerConnection.setLocalDescription(offer))
23  .then(() => {
24    // Send the offer to the other peer through the signaling server
25    socket.emit('offer', { sdp: peerConnection.localDescription });
26  });
27

1navigator.mediaDevices.getUserMedia({ video: true, audio: true })
2  .then(stream => {
3    const localVideo = document.getElementById('localVideo');
4    localVideo.srcObject = stream;
5
6    stream.getTracks().forEach(track => {
7      peerConnection.addTrack(track, stream);
8    });
9  })
10  .catch(error => {
11    console.error('Error getting user media:', error);
12  });
13

1const dataChannel = peerConnection.createDataChannel('my-data-channel');
2
3dataChannel.onopen = () => {
4  console.log('Data channel opened');
5  dataChannel.send('Hello, world!');
6};
7
8dataChannel.onmessage = (event) => {
9  console.log('Received message:', event.data);
10};
11