ran prettify

public/chat.html

@@ -46,8 +46,7 @@
     </div>
 
     <p id="remote-video-text"></p>
-    <div id="wrapper">
+    <div id="wrapper"></div>
-    </div>
     <div id="moveable">
       <p id="local-video-text">No webcam input</p>
       <video id="local-video" autoplay muted playsinline></video>

public/js/chat.js

@@ -35,7 +35,6 @@ var VideoChat = {
   localVideo: document.getElementById("local-video"),
   peerConnections: {},
   recognition: undefined,
-  answerCreatedUUIDs: [], // HACKY workaround: currently, onAnswer seems to be triggering twice and we don't know why
 
   // 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
@@ -116,24 +115,28 @@ var VideoChat = {
     logIt("readyToCall");
   },
   call: function (uuid, room) {
-      logIt("Initiating call");
+    logIt("Initiating call");
-      VideoChat.startCall(uuid);
+    VideoChat.startCall(uuid);
   },
 
   // Set up a callback to run when we have the ephemeral token to use Twilio's TURN server.
   startCall: function (uuid) {
-    VideoChat.socket.on("token", VideoChat.establishConnection(uuid, function(a) {VideoChat.createOffer(a);}));
+    VideoChat.socket.on(
+      "token",
+      VideoChat.establishConnection(uuid, function (a) {
+        VideoChat.createOffer(a);
+      })
+    );
     VideoChat.socket.emit("token", roomHash, uuid);
   },
 
   establishConnection: function (correctUuid, callback) {
-    return function(token, uuid) {
+    return function (token, uuid) {
       if (correctUuid != uuid) {
         return;
       }
       console.log("establishing connection to", uuid);
 
-
       VideoChat.localICECandidates[uuid] = []; // initialise uuid with empty array
       VideoChat.connected[uuid] = false;
 
@@ -173,12 +176,17 @@ var VideoChat = {
 
       // Set up callbacks for the connection generating iceCandidates or
       // receiving the remote media stream.
-      VideoChat.peerConnections[uuid].onicecandidate = function(u) {VideoChat.onIceCandidate(u, uuid)};
+      VideoChat.peerConnections[uuid].onicecandidate = function (u) {
-      VideoChat.peerConnections[uuid].onaddstream = function(u) {VideoChat.onAddStream(u, uuid)};
+        VideoChat.onIceCandidate(u, uuid);
-      
+      };
+      VideoChat.peerConnections[uuid].onaddstream = function (u) {
+        VideoChat.onAddStream(u, uuid);
+      };
 
       // Called when there is a change in connection state
-      VideoChat.peerConnections[uuid].oniceconnectionstatechange = function (event) {
+      VideoChat.peerConnections[uuid].oniceconnectionstatechange = function (
+        event
+      ) {
         switch (VideoChat.peerConnections[uuid].iceConnectionState) {
           case "connected":
             logIt("connected");
@@ -201,7 +209,7 @@ var VideoChat = {
         }
       };
       callback(uuid);
-    } 
+    };
   },
 
   // When the peerConnection generates an ice candidate, send it over the socket to the peer.
@@ -225,7 +233,6 @@ var VideoChat = {
         // The peer may not have created the RTCPeerConnection yet, so we are waiting for the 'answer'
         // to arrive. This will signal that the peer is ready to receive signaling.
         VideoChat.localICECandidates[uuid].push(event.candidate);
-        
       }
     }
   },
@@ -244,7 +251,12 @@ var VideoChat = {
 
   // Create an offer that contains the media capabilities of the browser.
   createOffer: function (uuid) {
-      console.log(">>> Creating offer to UUID: ", uuid, ". my UUID is", VideoChat.socket.id);
+    console.log(
+      ">>> Creating offer to UUID: ",
+      uuid,
+      ". my UUID is",
+      VideoChat.socket.id
+    );
     VideoChat.peerConnections[uuid].createOffer(
       function (offer) {
         // If the offer is created successfully, set it as the local description
@@ -268,12 +280,22 @@ var VideoChat = {
   createAnswer: function (offer, uuid) {
     logIt("createAnswer");
     rtcOffer = new RTCSessionDescription(JSON.parse(offer));
-    console.log("createAnswer: setting remote description of " + uuid + " on " + VideoChat.socket.id);
+    console.log(
+      "createAnswer: setting remote description of " +
+        uuid +
+        " on " +
+        VideoChat.socket.id
+    );
     VideoChat.peerConnections[uuid].setRemoteDescription(rtcOffer);
     VideoChat.peerConnections[uuid].createAnswer(
       function (answer) {
         VideoChat.peerConnections[uuid].setLocalDescription(answer);
-        console.log(">>> Creating answer to UUID: ", uuid, ". my UUID is", VideoChat.socket.id);
+        console.log(
+          ">>> Creating answer to UUID: ",
+          uuid,
+          ". my UUID is",
+          VideoChat.socket.id
+        );
         VideoChat.socket.emit("answer", JSON.stringify(answer), roomHash, uuid);
       },
       function (err) {
@@ -288,27 +310,45 @@ var VideoChat = {
   onOffer: function (offer, uuid) {
     logIt("onOffer <<< Received offer");
     // VideoChat.socket.on("token", VideoChat.establishConnection(uuid, function(a) {VideoChat.createOffer(a);}));
-    VideoChat.socket.on("token", VideoChat.establishConnection(uuid, function(a) {VideoChat.createAnswer(offer, a);}));
+    VideoChat.socket.on(
+      "token",
+      VideoChat.establishConnection(uuid, function (a) {
+        VideoChat.createAnswer(offer, a);
+      })
+    );
     VideoChat.socket.emit("token", roomHash, uuid);
   },
 
   // When an answer is received, add it to the peerConnection as the remote description.
   onAnswer: function (answer, uuid) {
-    console.log("onAnswer <<< Received answer", uuid, ". my UUID is", VideoChat.socket.id);
+    console.log(
+      "onAnswer <<< Received answer",
+      uuid,
+      ". my UUID is",
+      VideoChat.socket.id
+    );
 
-    // if (!VideoChat.answerCreatedUUIDs.includes(uuid)) {
+    // logIt("onAnswer <<< Received answer" + "");
-      VideoChat.answerCreatedUUIDs.push(uuid);
+    var rtcAnswer = new RTCSessionDescription(JSON.parse(answer));
-      // logIt("onAnswer <<< Received answer" + "");
+    // Set remote description of RTCSession
-      var rtcAnswer = new RTCSessionDescription(JSON.parse(answer));
+    console.log(
-      // Set remote description of RTCSession
+      "onAnswer: setting remote description of " +
-      console.log("onAnswer: setting remote description of " + uuid + " on " + VideoChat.socket.id);
+        uuid +
-      VideoChat.peerConnections[uuid].setRemoteDescription(rtcAnswer);
+        " on " +
-      // The caller now knows that the callee is ready to accept new ICE candidates, so sending the buffer over
+        VideoChat.socket.id
-      VideoChat.localICECandidates[uuid].forEach((candidate) => {
+    );
-        logIt(`>>> Sending local ICE candidate (${candidate.address})`);
+    VideoChat.peerConnections[uuid].setRemoteDescription(rtcAnswer);
-        // Send ice candidate over websocket
+    // The caller now knows that the callee is ready to accept new ICE candidates, so sending the buffer over
-        VideoChat.socket.emit("candidate", JSON.stringify(candidate), roomHash, uuid);
+    VideoChat.localICECandidates[uuid].forEach((candidate) => {
-      });
+      logIt(`>>> Sending local ICE candidate (${candidate.address})`);
+      // Send ice candidate over websocket
+      VideoChat.socket.emit(
+        "candidate",
+        JSON.stringify(candidate),
+        roomHash,
+        uuid
+      );
+    });
   },
 
   // Called when a stream is added to the peer connection
@@ -318,7 +358,9 @@ var VideoChat = {
     // }else{
     //   VideoChat.counter++;
     // }
-    logIt("onAddStream <<< Received new stream from remote. Adding it..." + event);
+    logIt(
+      "onAddStream <<< Received new stream from remote. Adding it..." + event
+    );
     // Create new remote video source in wrapper
     // Create a <video> node
     var node = document.createElement("video");
@@ -405,7 +447,8 @@ function rePositionCaptions() {
   // Get remote video position
   var bounds = remoteVideosWrapper.position();
   bounds.top -= 10;
-  bounds.top = bounds.top + remoteVideosWrapper.height() - 1 * captionText.height();
+  bounds.top =
+    bounds.top + remoteVideosWrapper.height() - 1 * captionText.height();
   // Reposition captions
   captionText.css(bounds);
 }

server.js

@@ -8,7 +8,7 @@ var twillioAccountSID =
 var twilio = require("twilio")(twillioAccountSID, twillioAuthToken);
 var express = require("express");
 var app = express();
-const fs = require('fs');
+const fs = require("fs");
 // var http = require("https").createServer({
 //   key: fs.readFileSync('/Users/khushjammu/certs/privkey.pem'),
 //   cert: fs.readFileSync('/Users/khushjammu/certs/cert.pem')
@@ -94,9 +94,9 @@ io.on("connection", function (socket) {
       });
     } else if (numClients < 4) {
       socket.join(room);
-      logIt("Connected clients", room)
+      logIt("Connected clients", room);
       for (var clientId in clients.sockets) {
-        logIt('ID: ' + clientId, room);
+        logIt("ID: " + clientId, room);
       }
 
       // When the client is not the first to join the room, all clients are ready.
@@ -106,7 +106,10 @@ io.on("connection", function (socket) {
       socket.emit("ready", room).to(room);
       socket.broadcast.to(room).emit("ready", room);
     } else {
-      logIt("room already full with " + numClients + " people in the room.", room);
+      logIt(
+        "room already full with " + numClients + " people in the room.",
+        room
+      );
       socket.emit("full", room);
     }
   });
@@ -133,13 +136,19 @@ io.on("connection", function (socket) {
 
   // Relay offers
   socket.on("offer", function (offer, room, uuid) {
-    logIt("Received offer from " + socket.id + " and emitting to " + uuid, room);
+    logIt(
+      "Received offer from " + socket.id + " and emitting to " + uuid,
+      room
+    );
     io.to(uuid).emit("offer", offer, socket.id);
   });
 
   // Relay answers
   socket.on("answer", function (answer, room, uuid) {
-    logIt("Received answer from " + socket.id + " and emitting to " + uuid, room);
+    logIt(
+      "Received answer from " + socket.id + " and emitting to " + uuid,
+      room
+    );
     io.to(uuid).emit("answer", answer, socket.id);
   });
 });