diff --git a/index.js b/index.js index d9abb53..05076b5 100644 --- a/index.js +++ b/index.js @@ -16,17 +16,16 @@ io.on('connection', function(socket){ // When a client tries to join a room, only allow them if they are first or // second in the room. Otherwise it is full. socket.on('join', function(room){ - - console.log('A client joined') + console.log('A client joined room:' + room); var clients = io.sockets.adapter.rooms[room]; var numClients = typeof clients !== 'undefined' ? clients.length : 0; if(numClients === 0){ socket.join(room); - socket.emit('firstin', room); }else if(numClients === 1){ socket.join(room); // When the client is second to join the room, both clients are ready. console.log('Broadcasting ready message') + socket.broadcast.emit('willInitiateCall', room); socket.emit('ready', room); socket.broadcast.emit('ready', room); }else{ diff --git a/public/app.js b/public/app.js index e761478..180a786 100644 --- a/public/app.js +++ b/public/app.js @@ -10,9 +10,7 @@ if (!location.hash) { const roomHash = location.hash.substring(1); function logIt(message, error) { - // Print on console - console.log(message); - + // console.log(message); // Add to logs on page // let logs = document.getElementById('logs'); // let tmp = document.createElement('P'); @@ -26,7 +24,7 @@ function logIt(message, error) { // Create an object to save various objects to without polluting the global namespace. var VideoChat = { connected: false, - firstInChat : false, + willInitiateCall : false, localICECandidates: [], // Initialise our connection to the WebSocket. socket: io(), @@ -36,14 +34,12 @@ var VideoChat = { // screenButton: document.getElementById('get-screen'), // callButton: document.getElementById('call'), - - - // Call to getUserMedia (provided by adapter.js for cross browser compatibility) // asking for access to both the video and audio streams. If the request is // accepted callback to the onMediaStream function, otherwise callback to the // noMediaStream function. requestMediaStream: function (event) { + console.log("requestMediaStream"); navigator.mediaDevices .getUserMedia({video: true, audio: true}) .then(stream => { @@ -67,17 +63,19 @@ var VideoChat = { // The onMediaStream function receives the media stream as an argument. onMediaStream: function (stream) { - VideoChat.localVideo.volume = 0; // Turn the volume down to 0 to avoid echoes. + console.log("onMediaStream"); + // VideoChat.localVideo.volume = 0; // Turn the volume down to 0 to avoid echoes. VideoChat.localStream = stream; // VideoChat.videoButton.setAttribute('disabled', 'disabled'); // VideoChat.screenButton.setAttribute('disabled', 'disabled'); // Add the stream as video's srcObject. VideoChat.localVideo.srcObject = stream; // Now we're ready to join the chat room. - VideoChat.socket.emit('join', 'test'); + VideoChat.socket.emit('join', roomHash); + // VideoChat.socket.emit('join', 'test'); default VideoChat.socket.on('offer', VideoChat.onOffer); VideoChat.socket.on('ready', VideoChat.readyToCall); - VideoChat.socket.on('firstin', () => VideoChat.firstInChat = true); + VideoChat.socket.on('willInitiateCall', () => VideoChat.willInitiateCall = true); }, // There's not much to do in this demo if there is no media stream. So let's just stop. @@ -87,16 +85,16 @@ var VideoChat = { // When we are ready to call, enable the Call button. readyToCall: function (event) { + console.log("readyToCall"); // VideoChat.callButton.removeAttribute('disabled'); - if (VideoChat.firstInChat) { - // alert("firstin is calling") + if (VideoChat.willInitiateCall) { VideoChat.startCall() } }, - // Set up a callback to run when we have the ephemeral token to use Twilio's - // TURN server. + // Set up a callback to run when we have the ephemeral token to use Twilio's TURN server. startCall: function (event) { + console.log("startCall"); logIt('>>> Sending token request...'); VideoChat.socket.on('token', VideoChat.onToken(VideoChat.createOffer)); VideoChat.socket.emit('token'); @@ -105,6 +103,7 @@ var VideoChat = { // When we receive the ephemeral token back from the server. onToken: function (callback) { + console.log("onToken"); return function (token) { logIt('<<< Received token'); // Set up a new RTCPeerConnection using the token's iceServers. @@ -126,6 +125,7 @@ var VideoChat = { // When the peerConnection generates an ice candidate, send it over the socket // to the peer. onIceCandidate: function (event) { + console.log("onIceCandidate"); if (event.candidate) { logIt(`<<< Received local ICE candidate from STUN/TURN server (${event.candidate.address})`); if (VideoChat.connected) { @@ -144,6 +144,7 @@ var VideoChat = { // When receiving a candidate over the socket, turn it back into a real // RTCIceCandidate and add it to the peerConnection. onCandidate: function (candidate) { + console.log("onCandidate"); rtcCandidate = new RTCIceCandidate(JSON.parse(candidate)); logIt(`<<< Received remote ICE candidate (${rtcCandidate.address} - ${rtcCandidate.relatedAddress})`); VideoChat.peerConnection.addIceCandidate(rtcCandidate); @@ -151,6 +152,7 @@ var VideoChat = { // Create an offer that contains the media capabilities of the browser. createOffer: function () { + console.log("createOffer"); logIt('>>> Creating offer...'); VideoChat.peerConnection.createOffer( function (offer) { @@ -173,6 +175,7 @@ var VideoChat = { // description to the peerConnection object. Then the answer is created in the // same manner as the offer and sent over the socket. createAnswer: function (offer) { + console.log("createAnswer"); return function () { logIt('>>> Creating answer...'); VideoChat.connected = true; @@ -194,6 +197,7 @@ var VideoChat = { // When a browser receives an offer, set up a callback to be run when the // ephemeral token is returned from Twilio. onOffer: function (offer) { + console.log("onOffer"); logIt('<<< Received offer'); VideoChat.socket.on('token', VideoChat.onToken(VideoChat.createAnswer(offer))); VideoChat.socket.emit('token'); @@ -202,6 +206,7 @@ var VideoChat = { // When an answer is received, add it to the peerConnection as the remote // description. onAnswer: function (answer) { + console.log("onAnswer"); logIt('<<< Received answer'); var rtcAnswer = new RTCSessionDescription(JSON.parse(answer)); VideoChat.peerConnection.setRemoteDescription(rtcAnswer); @@ -219,6 +224,7 @@ var VideoChat = { // When the peerConnection receives the actual media stream from the other // browser, add it to the other video element on the page. onAddStream: function (event) { + console.log("onAddStream"); logIt('<<< Received new stream from remote. Adding it...'); VideoChat.remoteVideo.srcObject = event.stream; } @@ -229,5 +235,5 @@ var VideoChat = { // auto get media // VideoChat.requestScreenStream(); -VideoChat.requestMediaStream() +VideoChat.requestMediaStream(); diff --git a/public/index.html b/public/index.html index 7aec0a7..b85eb84 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,8 @@ - Video Chat + Decentralized Video Chat +