WebRTC demo code

[LePhenix47]

Videos for WebRTC:

• WebRTC crash course - Hussein Nasser
• Introduction to WebRTC YouTube playlist - Robert Bunch
• How to mute mic or toggle cam in WebRTC video chat? - Coding With Chaim

Documentation:

• A simple RTCDataChannel sample - MDN Docs

[LePhenix47]

Sender demo code:

const iceStunServers = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun1.l.google.com:19302' },
    { urls: 'stun:stun2.l.google.com:19302' },
  ],
  iceCandidatePoolSize: 1,
};

const localConnection = new RTCPeerConnection(iceStunServers)

const dataChannel = localConnection.createDataChannel("test")

dataChannel.onmessage = e => { console.log("New data channel msg:", e.data) }

dataChannel.onopen = e => { console.log("Connection opened:") }

localConnection.onicecandidate = e => {
  console.log("SDP:", JSON.stringify(localConnection.localDescription))
}

const offer = await localConnection.createOffer()
await localConnection.setLocalDescription(offer)

Once the receiver gives their SDP:

const answerSdp = { "type": "offer", "sdp": "v=0..." } // Copy the SDP from the receiver
localConnection.setRemoteDescription(answerSdp)

[LePhenix47]

Receiver demo code:

const iceStunServers = {
  iceServers: [
    { urls: 'stun:stun.l.google.com:19302' },
    { urls: 'stun:stun1.l.google.com:19302' },
    { urls: 'stun:stun2.l.google.com:19302' },
  ],
  iceCandidatePoolSize: 1,
};

const remoteConnection = new RTCPeerConnection(iceStunServers)

remoteConnection.onicecandidate = e => {
  console.log("SDP:", JSON.stringify(remoteConnection.localDescription))
}

let dataChannel = null
remoteConnection.ondatachannel = e => {
  console.log("Data dataChannel event", e)
  dataChannel = e.channel

  dataChannel.onmessage = (e) => {
    console.log("new message", e.data)
  }

  dataChannel.onopen = (e) => {
    console.log("Connected to other peer LETS GOOOO!!!!", e)
  }
}

Once the sender sent their SDP:

const offerSdp = { "type": "offer", "sdp": "v=0..." } // Copy the SDP from the sender
await remoteConnection.setRemoteDescription(offerSdp)

const answer = await remoteConnection.createAnswer()
await remoteConnection.setLocalDescription(answer)
console.log("Answer created")

[LePhenix47]

Now to send messages we can send messages to each other:

dataChannel.send("Yo, what's going on ?")

[LePhenix47]

PS: We're using the Data Channel because we didn't set up any WebSocket, normally this should be handled via WebSocket

[LePhenix47]

How to toggle webcam:

function toggleWebcam() {
    const videoTrack = userStream.getTracks().find(track => track.kind === 'video');
    videoTrack.enabled = !videoTrack.enabled;
}