Streaming WebRTC: A Comprehensive Guide for Developers

1// Basic WebRTC Client Code using JavaScript
2const pc = new RTCPeerConnection();
3
4navigator.mediaDevices.getUserMedia({ video: true, audio: true })
5  .then(stream => {
6    stream.getTracks().forEach(track => pc.addTrack(track, stream));
7
8    pc.ontrack = event => {
9      const video = document.getElementById('remoteVideo');
10      video.srcObject = event.streams[0];
11    };
12  })
13  .catch(error => console.error("Error accessing media devices:", error));
14
15pc.onicecandidate = event => {
16  if (event.candidate) {
17    // Send ICE candidate to signaling server
18    console.log('ICE candidate:', event.candidate);
19  }
20};
21
22pc.createOffer()
23  .then(offer => pc.setLocalDescription(offer))
24  .then(() => {
25    // Send offer to signaling server
26    console.log('Offer sent:', pc.localDescription);
27  })
28  .catch(error => console.error("Error creating offer:", error));
29

1// Simple Signaling Server using Node.js (using Socket.IO)
2const io = require('socket.io')(3000, {
3  cors: { origin: "*" }
4});
5
6io.on('connection', socket => {
7  socket.on('join-room', (roomId, userId) => {
8    socket.join(roomId);
9    socket.to(roomId).emit('user-connected', userId);
10
11    socket.on('disconnect', () => {
12      socket.to(roomId).emit('user-disconnected', userId);
13    });
14  });
15});
16

1// Handling Peer Connection Establishment
2pc.onicecandidate = event => {
3    if (event.candidate) {
4        // Send ICE candidate to signaling server
5        socket.emit('ice-candidate', event.candidate);
6    }
7};
8
9socket.on('ice-candidate', candidate => {
10    pc.addIceCandidate(candidate);
11});
12
13pc.createOffer()
14    .then(offer => pc.setLocalDescription(offer))
15    .then(() => {
16        // Send offer to signaling server
17        socket.emit('offer', pc.localDescription);
18    });
19
20socket.on('answer', answer => {
21    pc.setRemoteDescription(answer);
22});
23

1// Adding and Removing Tracks
2stream.getTracks().forEach(track => {
3    pc.addTrack(track, stream);
4});
5
6pc.ontrack = event => {
7    const remoteStream = event.streams[0];
8    // Display the remote stream
9    remoteVideoElement.srcObject = remoteStream;
10};
11