WebRTC Internals: Understanding the Core of Real-Time Communication Technology

1navigator.mediaDevices.getUserMedia({ 
2  video: true, 
3  audio: true 
4})
5.then(stream => {
6  // Use the stream for local display or to send to peers
7  localVideo.srcObject = stream;
8})
9.catch(err => {
10  console.error("Error accessing media devices:", err);
11});
12

1const peerConnection = new RTCPeerConnection({
2  iceServers: [
3    { urls: 'stun:stun.l.google.com:19302' },
4    { 
5      urls: 'turn:your-turn-server.com', 
6      username: 'username', 
7      credential: 'password' 
8    }
9  ]
10});
11
12// Add local tracks to the connection
13localStream.getTracks().forEach(track => {
14  peerConnection.addTrack(track, localStream);
15});
16
17// Create an offer to initialize the connection
18peerConnection.createOffer()
19  .then(offer => peerConnection.setLocalDescription(offer))
20  .then(() => {
21    // Send the offer to the remote peer via signaling
22    sendSignalingMessage({
23      type: 'offer',
24      sdp: peerConnection.localDescription
25    });
26  });
27

1const dataChannel = peerConnection.createDataChannel("myChannel", {
2  ordered: true,  // Guarantee message order
3  maxRetransmits: 3  // Maximum retransmission attempts
4});
5
6dataChannel.onopen = () => {
7  console.log("Data channel is open");
8  dataChannel.send("Hello from WebRTC data channel!");
9};
10
11dataChannel.onmessage = event => {
12  console.log("Received:", event.data);
13};
14

1// Example using WebSockets for signaling
2const ws = new WebSocket('wss://your-signaling-server.com');
3
4ws.onmessage = event => {
5  const message = JSON.parse(event.data);
6  
7  switch(message.type) {
8    case 'offer':
9      handleOffer(message);
10      break;
11    case 'answer':
12      handleAnswer(message);
13      break;
14    case 'ice-candidate':
15      handleIceCandidate(message);
16      break;
17  }
18};
19
20function handleOffer(message) {
21  peerConnection.setRemoteDescription(new RTCSessionDescription(message))
22    .then(() => peerConnection.createAnswer())
23    .then(answer => peerConnection.setLocalDescription(answer))
24    .then(() => {
25      ws.send(JSON.stringify({
26        type: 'answer',
27        sdp: peerConnection.localDescription
28      }));
29    });
30}
31

1// Example of setting specific codec constraints
2const offerOptions = {
3  offerToReceiveAudio: true,
4  offerToReceiveVideo: true
5};
6
7// For specific video constraints
8const videoConstraints = {
9  width: { ideal: 1280 },
10  height: { ideal: 720 },
11  frameRate: { max: 30 }
12};
13

1// Enabling simulcast in Chrome
2const transceiver = peerConnection.addTransceiver('video', {
3  direction: 'sendrecv',
4  sendEncodings: [
5    { rid: 'high', active: true, priority: 'high', maxBitrate: 900000 },
6    { rid: 'medium', active: true, priority: 'medium', maxBitrate: 300000, scaleResolutionDownBy: 2 },
7    { rid: 'low', active: true, priority: 'low', maxBitrate: 100000, scaleResolutionDownBy: 4 }
8  ]
9});
10

1peerConnection.getStats().then(stats => {
2  stats.forEach(report => {
3    if (report.type === 'inbound-rtp' && report.kind === 'video') {
4      console.log('Packets received:', report.packetsReceived);
5      console.log('Packets lost:', report.packetsLost);
6      console.log('Jitter:', report.jitter);
7    }
8  });
9});
10