diff --git a/public/app.js b/public/app.js index 30dbdb1..c163597 100644 --- a/public/app.js +++ b/public/app.js @@ -1,6 +1,5 @@ mdc.ripple.MDCRipple.attachTo(document.querySelector('.mdc-button')); -// DEfault configuration - Change these if you have a different STUN or TURN server. const configuration = { iceServers: [ { @@ -42,11 +41,34 @@ async function createRoom() { }); // Code for creating a room below - + const offer = await peerConnection.createOffer(); + await peerConnection.setLocalDescription(offer); + console.log('Created offer:', offer); + + const roomWithOffer = { + 'offer': { + type: offer.type, + sdp: offer.sdp, + }, + }; + const roomRef = await db.collection('rooms').add(roomWithOffer); + roomId = roomRef.id; + console.log(`New room created with SDP offer. Room ID: ${roomRef.id}`); + document.querySelector( + '#currentRoom').innerText = `Current room is ${roomRef.id} - You are the caller!`; // Code for creating a room above // Code for collecting ICE candidates below - + const callerCandidatesCollection = roomRef.collection('callerCandidates'); + + peerConnection.addEventListener('icecandidate', event => { + if (!event.candidate) { + console.log('Got final candidate!'); + return; + } + console.log('Got candidate: ', event.candidate); + callerCandidatesCollection.add(event.candidate.toJSON()); + }); // Code for collecting ICE candidates above peerConnection.addEventListener('track', event => { @@ -58,11 +80,26 @@ async function createRoom() { }); // Listening for remote session description below - + roomRef.onSnapshot(async snapshot => { + const data = snapshot.data(); + if (!peerConnection.currentRemoteDescription && data.answer) { + console.log('Got remote description: ', data.answer); + const rtcSessionDescription = new RTCSessionDescription(data.answer); + await peerConnection.setRemoteDescription(rtcSessionDescription); + } + }); // Listening for remote session description above // Listen for remote ICE candidates below - + roomRef.collection('calleeCandidates').onSnapshot(snapshot => { + snapshot.docChanges().forEach(async change => { + if (change.type === 'added') { + let data = change.doc.data(); + console.log(`Got new remote ICE candidate: ${JSON.stringify(data)}`); + await peerConnection.addIceCandidate(new RTCIceCandidate(data)); + } + }); + }); // Listen for remote ICE candidates above } @@ -96,7 +133,15 @@ async function joinRoomById(roomId) { }); // Code for collecting ICE candidates below - + const calleeCandidatesCollection = roomRef.collection('calleeCandidates'); + peerConnection.addEventListener('icecandidate', event => { + if (!event.candidate) { + console.log('Got final candidate!'); + return; + } + console.log('Got candidate: ', event.candidate); + calleeCandidatesCollection.add(event.candidate.toJSON()); + }); // Code for collecting ICE candidates above peerConnection.addEventListener('track', event => { @@ -108,11 +153,32 @@ async function joinRoomById(roomId) { }); // Code for creating SDP answer below - + const offer = roomSnapshot.data().offer; + console.log('Got offer:', offer); + await peerConnection.setRemoteDescription(new RTCSessionDescription(offer)); + const answer = await peerConnection.createAnswer(); + console.log('Created answer:', answer); + await peerConnection.setLocalDescription(answer); + + const roomWithAnswer = { + answer: { + type: answer.type, + sdp: answer.sdp, + }, + }; + await roomRef.update(roomWithAnswer); // Code for creating SDP answer above // Listening for remote ICE candidates below - + roomRef.collection('callerCandidates').onSnapshot(snapshot => { + snapshot.docChanges().forEach(async change => { + if (change.type === 'added') { + let data = change.doc.data(); + console.log(`Got new remote ICE candidate: ${JSON.stringify(data)}`); + await peerConnection.addIceCandidate(new RTCIceCandidate(data)); + } + }); + }); // Listening for remote ICE candidates above } }