From 70b15ef04cdb3348e224801ab15bacb76bc5ebfb Mon Sep 17 00:00:00 2001 From: Arya Vohra Date: Mon, 1 Jun 2020 00:22:36 +0800 Subject: [PATCH 1/6] Added border colors for peer identification in chat and video, removing nicknames --- public/css/chat.css | 6 ++++++ public/js/chat.js | 47 ++++++++++++++++++++++++--------------------- 2 files changed, 31 insertions(+), 22 deletions(-) diff --git a/public/css/chat.css b/public/css/chat.css index aef5584..cc49ab6 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -337,6 +337,9 @@ button:hover { justify-content: center; padding: 12px; max-width: 100%; + border-style: solid; + border-width: 2px; + border-color: var(--bloc-color); border-radius: 20px 20px 20px 5px; box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a; } @@ -345,6 +348,9 @@ button:hover { #chat-zone .message-item.customer .message-bloc { background-color: rgb(47, 48, 52); color: #fff; + border-style: solid; + border-width: 2px; + border-color: var(--bloc-color); border-radius: 20px 20px 5px 20px; box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a; } diff --git a/public/js/chat.js b/public/js/chat.js index 2233abb..1e6304c 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -30,9 +30,9 @@ const chatZone = $("#chat-zone"); var dataChannel = new Map(); var VideoChat = { - nickname: undefined, videoEnabled: true, audioEnabled: true, + borderColor: `hsl(${Math.floor(Math.random() * 360)}, 70%, 80%)`, connected: new Map(), localICECandidates: {}, socket: io(), @@ -97,17 +97,8 @@ var VideoChat = { }, }); - // Used to identify client to other peers in chats, captions etc. - VideoChat.nickname = prompt("Please enter a nickname", ""); - - while (VideoChat.nickname == null || VideoChat.nickname.trim() === "") { - VideoChat.nickname = prompt( - "Nickname cannot be empty. Please enter a nickname", - "" - ); - } - VideoChat.localVideo.srcObject = stream; + VideoChat.localVideo.style.border = `4px solid ${VideoChat.borderColor}`; // Now we're ready to join the chat room. VideoChat.socket.emit("join", roomHash); @@ -170,10 +161,6 @@ var VideoChat = { id: 0, }) ); - // Called when dataChannel is successfully opened - dataChannel.get(uuid).onopen = function (event) { - logIt("dataChannel opened"); - }; // Handle different dataChannel types dataChannel.get(uuid).onmessage = function (event) { const receivedData = event.data; @@ -186,8 +173,16 @@ var VideoChat = { recieveCaptions(cleanedMessage); } else if (dataType === "tog:") { toggleSendCaptions(); + } else if (dataType === "clr:") { + setStreamColor(uuid, cleanedMessage); } }; + // Called when dataChannel is successfully opened + dataChannel.get(uuid).onopen = function (event) { + logIt("dataChannel opened"); + // Sending our identifier color to the other peers + dataChannel.get(uuid).send("clr:" + VideoChat.borderColor); + }; // Set up callbacks for the connection generating iceCandidates or // receiving the remote media stream. Wrapping callback functions // to pass in the peer uuids. @@ -815,17 +810,16 @@ function recieveCaptions(captions) { // Text Chat // Add text message to chat screen on page -function addMessageToScreen(msg, isOwnMessage) { - // If nickname is undefined or null, user didn't input a nickname +function addMessageToScreen(msg, border, isOwnMessage) { if (isOwnMessage) { $(".chat-messages").append( - '
' + + `
` + msg + "
" ); } else { $(".chat-messages").append( - '
' + + `
` + msg + "
" ); @@ -843,9 +837,9 @@ chatInput.addEventListener("keypress", function (event) { // Make links clickable msg = msg.autoLink(); // Send message over data channel - sendToAllDataChannels("mes:" + VideoChat.nickname + ": " + msg); + sendToAllDataChannels("mes:" + VideoChat.borderColor + msg); // Add message to screen - addMessageToScreen(msg, true); + addMessageToScreen(msg, VideoChat.borderColor, true); // Auto scroll chat down chatZone.scrollTop(chatZone[0].scrollHeight); // Clear chat input @@ -855,8 +849,12 @@ chatInput.addEventListener("keypress", function (event) { // Called when a message is recieved over the dataChannel function handleRecieveMessage(msg) { + // Slice border color for message + const endIndex = msg.indexOf(')'); + const color = msg.slice(0, endIndex); + msg = msg.slice(endIndex+1, msg.length); // Add message to screen - addMessageToScreen(msg, false); + addMessageToScreen(msg, color, false); // Auto scroll chat down chatZone.scrollTop(chatZone[0].scrollHeight); // Show chat if hidden @@ -865,6 +863,11 @@ function handleRecieveMessage(msg) { } } +// Sets the border color of uuid's stream upon receiving color +function setStreamColor(uuid, color) { + document.querySelectorAll(`[uuid="${uuid}"]`)[0].style.border = `4px solid ${color}`; +} + // Show and hide chat function toggleChat() { var chatIcon = document.getElementById("chat-icon"); From d7a52afe5f96d3db26c4cb971af2dbf8f8c1d5fc Mon Sep 17 00:00:00 2001 From: Khush Jammu Date: Mon, 1 Jun 2020 00:32:09 +0800 Subject: [PATCH 2/6] fix muting and adjust border size --- public/js/chat.js | 6 +++--- server.js | 8 ++++++-- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/public/js/chat.js b/public/js/chat.js index 1e6304c..b997901 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -501,6 +501,8 @@ function sendToAllDataChannels(message) { function muteMicrophone() { var audioTrack = null; + VideoChat.audioEnabled = !VideoChat.audioEnabled; + VideoChat.peerConnections.forEach(function (value, key, map) { value.getSenders().find(function (s) { if (s.track.kind === "audio") { @@ -510,8 +512,6 @@ function muteMicrophone() { audioTrack.enabled = VideoChat.audioEnabled; }); - VideoChat.audioEnabled = !VideoChat.audioEnabled; - // select mic button and mic button text const micButtonIcon = document.getElementById("mic-icon"); const micButtonText = document.getElementById("mic-text"); @@ -865,7 +865,7 @@ function handleRecieveMessage(msg) { // Sets the border color of uuid's stream upon receiving color function setStreamColor(uuid, color) { - document.querySelectorAll(`[uuid="${uuid}"]`)[0].style.border = `4px solid ${color}`; + document.querySelectorAll(`[uuid="${uuid}"]`)[0].style.border = `3px solid ${color}`; } // Show and hide chat diff --git a/server.js b/server.js index de98ade..02cee3a 100644 --- a/server.js +++ b/server.js @@ -8,7 +8,11 @@ var twillioAccountSID = var twilio = require("twilio")(twillioAccountSID, twillioAuthToken); var express = require("express"); var app = express(); -var http = require("http").createServer(app); +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') +}, app); var io = require("socket.io")(http); var path = require("path"); var public = path.join(__dirname, "public"); @@ -132,7 +136,7 @@ io.on("connection", function (socket) { }); // Listen for Heroku port, otherwise just use 3000 -var port = process.env.PORT || 3000; +var port = process.env.PORT || 443; http.listen(port, function () { console.log("http://localhost:" + port); }); From 25c3014b680c705c6a3d8238ab4c73d473218a70 Mon Sep 17 00:00:00 2001 From: Khush Jammu Date: Mon, 1 Jun 2020 00:33:08 +0800 Subject: [PATCH 3/6] missed something when adjusting border size - fixed --- public/js/chat.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/js/chat.js b/public/js/chat.js index b997901..2e0944f 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -98,7 +98,7 @@ var VideoChat = { }); VideoChat.localVideo.srcObject = stream; - VideoChat.localVideo.style.border = `4px solid ${VideoChat.borderColor}`; + VideoChat.localVideo.style.border = `3px solid ${VideoChat.borderColor}`; // Now we're ready to join the chat room. VideoChat.socket.emit("join", roomHash); From ccb93c541bed9f37658940a9e3980b4f882b4bea Mon Sep 17 00:00:00 2001 From: Khush Jammu Date: Mon, 1 Jun 2020 01:01:22 +0800 Subject: [PATCH 4/6] remove https --- server.js | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/server.js b/server.js index 02cee3a..de98ade 100644 --- a/server.js +++ b/server.js @@ -8,11 +8,7 @@ var twillioAccountSID = var twilio = require("twilio")(twillioAccountSID, twillioAuthToken); var express = require("express"); var app = express(); -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') -}, app); +var http = require("http").createServer(app); var io = require("socket.io")(http); var path = require("path"); var public = path.join(__dirname, "public"); @@ -136,7 +132,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); }); From 0b57a5243e8d8b6b7a60df198d035c59fd8729da Mon Sep 17 00:00:00 2001 From: Arya Vohra Date: Mon, 1 Jun 2020 12:10:46 +0800 Subject: [PATCH 5/6] Added logic to ensure colors look unique --- public/js/chat.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/public/js/chat.js b/public/js/chat.js index 3909403..f89e66e 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -40,7 +40,7 @@ var VideoChat = { peerConnections: new Map(), recognition: undefined, borderColor: undefined, - peerColors: {}, + 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 @@ -861,15 +861,28 @@ function uuidToColor(uuid) { var hash = 0; for (var i = 0; i < uuid.length; i++) { hash = uuid.charCodeAt(i) + ((hash << 5) - hash); - hash &= hash; // Convert to 32bit integer + hash = hash & hash; } - return `hsl(${hash % 360},100%,40%)`; + var hue = Math.abs(hash % 360); + console.log(hue); + // Ensure color is not similar to other colors + var availColors = Array.from({length: 18}, (x,i) => i*20); + VideoChat.peerColors.forEach(function(value, key, map) {availColors[Math.floor(value/20)] = null}); + if (availColors[Math.floor(hue/20)] == null) { + for (var i = 0; i < availColors.length; i++) { + if (availColors[i] != null) { + hue = (hue % 20) + availColors[i]; + availColors[i] = null; + break; + } + } + } + return `hsl(${hue},100%,70%)`; } // Sets the border color of uuid's stream function setStreamColor(uuid) { const color = uuidToColor(uuid); - console.log(color); document.querySelectorAll(`[uuid="${uuid}"]`)[0].style.border = `3px solid ${color}`; VideoChat.peerColors[uuid] = color; } From 7d468f5a9182a452f51a3e52785c319d7e03219b Mon Sep 17 00:00:00 2001 From: Khush Jammu Date: Mon, 1 Jun 2020 12:18:45 +0800 Subject: [PATCH 6/6] fix border color for messages --- public/css/chat.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/public/css/chat.css b/public/css/chat.css index aef5584..6b0f476 100644 --- a/public/css/chat.css +++ b/public/css/chat.css @@ -337,6 +337,9 @@ button:hover { justify-content: center; padding: 12px; max-width: 100%; + border-style: solid; + border-width: 3px; + border-color: var(--bloc-color); border-radius: 20px 20px 20px 5px; box-shadow: 6px 6px 12px #030506, -6px -6px 12px #23242a; } @@ -345,6 +348,9 @@ button:hover { #chat-zone .message-item.customer .message-bloc { background-color: rgb(47, 48, 52); color: #fff; + border-style: solid; + border-width: 3px; + border-color: var(--bloc-color); border-radius: 20px 20px 5px 20px; box-shadow: 6px 6px 12px #030506, -6px -6px 12px #22232a; }