Connection theoretically stable now

public/js/chat.js

@@ -37,10 +37,10 @@ var VideoChat = {
   socket: io(),
   remoteVideoWrapper: document.getElementById("wrapper"),
   localVideo: document.getElementById("local-video"),
-  peerColors: new Map(),
   peerConnections: new Map(),
   recognition: undefined,
-  borderColor: undefined,
+  borderColor: "hsl(120,100%,70%)",
+  peerColors: new Map(),
 
   // 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
@@ -97,18 +97,21 @@ var VideoChat = {
         Snackbar.close();
       },
     });
+
+    // VideoChat.borderColor = uuidToColor(VideoChat.socket.id);
     VideoChat.localVideo.srcObject = stream;
+    VideoChat.localVideo.style.border = `3px solid ${VideoChat.borderColor}`;
 
     // Now we're ready to join the chat room.
     VideoChat.socket.emit("join", roomHash);
-    VideoChat.borderColor = uuidToColor(VideoChat.socket.id);
-    VideoChat.localVideo.style.border = `3px solid ${VideoChat.borderColor}`;
 
     // Add listeners to the websocket
     VideoChat.socket.on("leave", VideoChat.onLeave);
     VideoChat.socket.on("full", chatRoomFull);
     VideoChat.socket.on("offer", VideoChat.onOffer);
-    VideoChat.socket.on("initiateCall", VideoChat.call);
+    VideoChat.socket.on("willInitiateCall", VideoChat.call);
+
+    // Set up listeners on the socket
     VideoChat.socket.on("candidate", VideoChat.onCandidate);
     VideoChat.socket.on("answer", VideoChat.onAnswer);
     VideoChat.socket.on("requestToggleCaptions", () => toggleSendCaptions());
@@ -117,7 +120,6 @@ var VideoChat = {
     );
   },
 
-  // Initiate a call with newly joined peer
   call: function (uuid, room) {
     logIt(`call >>> Initiating call with ${uuid}...`);
     VideoChat.socket.on(
@@ -129,7 +131,6 @@ var VideoChat = {
     VideoChat.socket.emit("token", roomHash, uuid);
   },
 
-  // Handle a peer leaving the room
   onLeave: function(uuid) {
     logIt("disconnected - UUID " + uuid);
     // Remove video element
@@ -373,12 +374,6 @@ var VideoChat = {
     VideoChat.connected.set(uuid, true);
     // Hide caption status text
     captionText.fadeOut();
-    // Downscale send resolution and bitrate if num in room > 4
-    // if (VideoChat.peerConnections.size > 3) {
-    //   VideoChat.peerConnections.forEach(function (value, key, map) {
-    //     downscaleStream(value);
-    //   });
-    // }
     // Reposition local video after a second, as there is often a delay
     // between adding a stream and the height of the video div changing
     setTimeout(() => rePositionLocalVideo(), 500);
@@ -517,32 +512,6 @@ function sendToAllDataChannels(message) {
 // }
 // End Fullscreen
 
-// Downscale single stream
-// async function downscaleStream(pc, applying = false) {
-//   height = 240;
-//   rate = 800000;
-//   if (applying) return;
-//   try {
-//     applying = true;
-//     do {
-//       h = height;
-//       const sender = pc.getSenders().find(function (s) {
-//         return s.track.kind === "video";
-//       });
-//       const ratio = sender.track.getSettings().height / height;
-//       const params = sender.getParameters();
-//       if (!params.encodings) params.encodings = [{}]; // Firefox workaround!
-//       params.encodings[0].scaleResolutionDownBy = Math.max(ratio, 1);
-//       params.encodings[0].maxBitrate = rate;
-//       await sender.setParameters(params);
-//     } while (h != height);
-//   } catch (e) {
-//     logIt(e);
-//   } finally {
-//     applying = false;
-//   }
-// }
-
 // Mute microphone
 function muteMicrophone() {
   var audioTrack = null;
@@ -555,7 +524,7 @@ function muteMicrophone() {
     });
     audioTrack.enabled = VideoChat.audioEnabled;
   });
-
+  
   // select mic button and mic button text
   const micButtonIcon = document.getElementById("mic-icon");
   const micButtonText = document.getElementById("mic-text");
@@ -874,33 +843,29 @@ function uuidToColor(uuid) {
   // Using uuid to generate random. unique pastel color
   var hash = 0;
   for (var i = 0; i < uuid.length; i++) {
-    hash = uuid.charCodeAt(i) + ((hash << 5) - hash);
+      hash = uuid.charCodeAt(i) + ((hash << 5) - hash);
-    hash = hash & hash;
+      hash = hash & hash;
   }
   var hue = Math.abs(hash % 360);
   // Ensure color is not similar to other colors
-  var availColors = Array.from({ length: 9 }, (x, i) => i * 40);
+  var availColors = Array.from({length: 18}, (x,i) => i*20);
-  VideoChat.peerColors.forEach(function (value, key, map) {
+  VideoChat.peerColors.forEach(function(value, key, map) {availColors[Math.floor(value/20)] = null});
-    availColors[Math.floor(value / 40)] = null;
+  if (availColors[Math.floor(hue/20)] == null) {
-  });
-  if (availColors[Math.floor(hue / 40)] == null) {
     for (var i = 0; i < availColors.length; i++) {
       if (availColors[i] != null) {
-        hue = (hue % 40) + availColors[i];
+        hue = (hue % 20) + availColors[i];
         availColors[i] = null;
         break;
       }
     }
   }
-  return `hsl(${hue},100%,60%)`;
+  return `hsl(${hue},100%,70%)`;
 }
 
 // Sets the border color of uuid's stream
 function setStreamColor(uuid) {
   const color = uuidToColor(uuid);
-  document.querySelectorAll(
+  document.querySelectorAll(`[uuid="${uuid}"]`)[0].style.border = `3px solid ${color}`;
-    `[uuid="${uuid}"]`
-  )[0].style.border = `3px solid ${color}`;
   VideoChat.peerColors[uuid] = color;
 }
 
@@ -935,27 +900,18 @@ function togglePictureInPicture() {
         logIt("Error exiting pip.");
         logIt(error);
       });
+    } else if (VideoChat.remoteVideoWrapper.lastChild.webkitPresentationMode === "inline") {
+      VideoChat.remoteVideoWrapper.lastChild.webkitSetPresentationMode("picture-in-picture");
     } else if (
-      VideoChat.remoteVideoWrapper.lastChild.webkitPresentationMode === "inline"
+      VideoChat.remoteVideoWrapper.lastChild.webkitPresentationMode === "picture-in-picture"
     ) {
-      VideoChat.remoteVideoWrapper.lastChild.webkitSetPresentationMode(
+      VideoChat.remoteVideoWrapper.lastChild.webkitSetPresentationMode("inline");
-        "picture-in-picture"
-      );
-    } else if (
-      VideoChat.remoteVideoWrapper.lastChild.webkitPresentationMode ===
-      "picture-in-picture"
-    ) {
-      VideoChat.remoteVideoWrapper.lastChild.webkitSetPresentationMode(
-        "inline"
-      );
     } else {
-      VideoChat.remoteVideoWrapper.lastChild
+      VideoChat.remoteVideoWrapper.lastChild.requestPictureInPicture().catch((error) => {
-        .requestPictureInPicture()
+        alert(
-        .catch((error) => {
+          "You must be connected to another person to enter picture in picture."
-          alert(
+        );
-            "You must be connected to another person to enter picture in picture."
+      });
-          );
-        });
     }
   } else {
     alert(
@@ -978,6 +934,7 @@ window.onbeforeunload = function () {
   return null;
 };
 
+
 function startUp() {
   //  Try and detect in-app browsers and redirect
   var ua = navigator.userAgent || navigator.vendor || window.opera;

server.js

@@ -8,7 +8,6 @@ var twillioAccountSID =
 var twilio = require("twilio")(twillioAccountSID, twillioAuthToken);
 var express = require("express");
 var app = express();
-const fs = require('fs');
 var http = require("http").createServer(app);
 var io = require("socket.io")(http);
 var path = require("path");
@@ -81,9 +80,9 @@ io.on("connection", function (socket) {
       socket.join(room);
     } else if (numClients < 5) {
       socket.join(room);
-      logIt("Broadcasting request to connect with new peer...", room);
+      // When the client is not the first to join the room, all clients are ready.
-      // Emits message to ask peers in room to connect with joining peer
+      logIt("Broadcasting ready message", room);
-      socket.broadcast.to(room).emit("initiateCall", socket.id, room);
+      socket.broadcast.to(room).emit("willInitiateCall", socket.id, room);
     } else {
       logIt(
         "room already full with " + numClients + " people in the room.",
@@ -138,7 +137,7 @@ io.on("connection", function (socket) {
 });
 
 // Listen for Heroku port, otherwise just use 3000
-var port = process.env.PORT || 443;
+var port = process.env.PORT || 3000;
 http.listen(port, function () {
   console.log("http://localhost:" + port);
 });