From 09bc7afec6ef25ae0177e91c018a9e617179f3be Mon Sep 17 00:00:00 2001 From: Arya Vohra Date: Fri, 5 Jun 2020 17:55:19 +0800 Subject: [PATCH 1/3] Added graceful disconnect back --- public/js/chat.js | 30 +++++++++++++++++++++--------- server.js | 5 +++++ 2 files changed, 26 insertions(+), 9 deletions(-) diff --git a/public/js/chat.js b/public/js/chat.js index 8634978..7ee693c 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -107,6 +107,7 @@ var VideoChat = { VideoChat.socket.emit("join", roomHash); // 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("willInitiateCall", VideoChat.call); @@ -131,6 +132,21 @@ var VideoChat = { VideoChat.socket.emit("token", roomHash, uuid); }, + onLeave: function(uuid) { + logIt("disconnected - UUID " + uuid); + // Remove video element + VideoChat.remoteVideoWrapper.removeChild( + document.querySelectorAll(`[uuid="${uuid}"]`)[0] + ); + // Delete connection & metadata + VideoChat.connected.delete(uuid); + VideoChat.peerConnections.delete(uuid); + dataChannel.delete(uuid); + if (VideoChat.peerConnections.size === 0) { + displayWaitingCaption(); + } + }, + establishConnection: function (correctUuid, callback) { return function (token, uuid) { if (correctUuid != uuid) { @@ -203,14 +219,11 @@ var VideoChat = { logIt("connected"); break; case "disconnected": - logIt("disconnected - UUID " + uuid); - VideoChat.remoteVideoWrapper.removeChild(document.querySelectorAll(`[uuid="${uuid}"]`)[0]); - VideoChat.connected.delete(uuid); - VideoChat.peerConnections.delete(uuid); - dataChannel.delete(uuid); - - if (VideoChat.peerConnections.size === 0) { - displayWaitingCaption(); + // Remove UUID if connection to server is intact + if (VideoChat.socket.connected) { + VideoChat.onLeave(uuid); + } else { + location.reload(); } break; case "failed": @@ -867,7 +880,6 @@ function uuidToColor(uuid) { hash = hash & hash; } 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}); diff --git a/server.js b/server.js index de98ade..054953b 100644 --- a/server.js +++ b/server.js @@ -92,6 +92,11 @@ io.on("connection", function (socket) { } }); + socket.on("leave", function (room) { + logIt("A client has left the room", room); + socket.broadcast.to(room).emit("leave", socket.id); + }); + // When receiving the token message, use the Twilio REST API to request an // token to get ephemeral credentials to use the TURN server. socket.on("token", function (room, uuid) { From 7e7888029e08bd0b5c83abb51155fea3c276538b Mon Sep 17 00:00:00 2001 From: Khush Jammu Date: Fri, 5 Jun 2020 18:39:26 +0800 Subject: [PATCH 2/3] fix issue: peers couldn't connect with person sharing screen --- public/js/chat.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/public/js/chat.js b/public/js/chat.js index 7ee693c..2ddc20b 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -32,7 +32,6 @@ var dataChannel = new Map(); var VideoChat = { videoEnabled: true, audioEnabled: true, - borderColor: `hsl(${Math.floor(Math.random() * 360)}, 70%, 80%)`, connected: new Map(), localICECandidates: {}, socket: io(), @@ -40,7 +39,7 @@ var VideoChat = { localVideo: document.getElementById("local-video"), 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) @@ -99,7 +98,7 @@ var VideoChat = { }, }); - VideoChat.borderColor = uuidToColor(VideoChat.socket.id); + // VideoChat.borderColor = uuidToColor(VideoChat.socket.id); VideoChat.localVideo.srcObject = stream; VideoChat.localVideo.style.border = `3px solid ${VideoChat.borderColor}`; @@ -666,7 +665,7 @@ function switchStreamHelper(stream) { } }); // Update local video stream - VideoChat.localStream = videoTrack; + VideoChat.localStream = stream; // Update local video object VideoChat.localVideo.srcObject = stream; // Unpause video on swap From c06b468cdcc6740e2faf6a1922f24e05d10eaa5c Mon Sep 17 00:00:00 2001 From: Khush Jammu Date: Fri, 5 Jun 2020 18:59:16 +0800 Subject: [PATCH 3/3] fixed crucial issue with disconnect handling: RTCPeerConnection was removed from maps, but never closed --- public/js/chat.js | 40 +++++++--------------------------------- 1 file changed, 7 insertions(+), 33 deletions(-) diff --git a/public/js/chat.js b/public/js/chat.js index 2ddc20b..fd76fa3 100644 --- a/public/js/chat.js +++ b/public/js/chat.js @@ -139,6 +139,7 @@ var VideoChat = { ); // Delete connection & metadata VideoChat.connected.delete(uuid); + VideoChat.peerConnections.get(uuid).close(); // This is necessary, because otherwise the RTC connection isn't closed VideoChat.peerConnections.delete(uuid); dataChannel.delete(uuid); if (VideoChat.peerConnections.size === 0) { @@ -787,39 +788,6 @@ function recieveCaptions(captions) { } // End Live caption -// Translation -// function translate(text) { -// let fromLang = "en"; -// let toLang = "zh"; -// // let text = "hello how are you?"; -// const API_KEY = "APIKEYHERE"; -// let gurl = `https://translation.googleapis.com/language/translate/v2?key=${API_KEY}`; -// gurl += "&q=" + encodeURI(text); -// gurl += `&source=${fromLang}`; -// gurl += `&target=${toLang}`; -// fetch(gurl, { -// method: "GET", -// headers: { -// "Content-Type": "application/json", -// Accept: "application/json", -// }, -// }) -// .then((res) => res.json()) -// .then((response) => { -// // console.log("response from google: ", response); -// // return response["data"]["translations"][0]["translatedText"]; -// logIt(response); -// var translatedText = -// response["data"]["translations"][0]["translatedText"]; -// console.log(translatedText); -// dataChanel.send("cap:" + translatedText); -// }) -// .catch((error) => { -// console.log("There was an error with the translation request: ", error); -// }); -// } -// End Translation - // Text Chat // Add text message to chat screen on page function addMessageToScreen(msg, border, isOwnMessage) { @@ -961,6 +929,12 @@ function displayWaitingCaption() { rePositionCaptions(); } +window.onbeforeunload = function () { + VideoChat.socket.emit("leave", roomHash); + return null; +}; + + function startUp() { // Try and detect in-app browsers and redirect var ua = navigator.userAgent || navigator.vendor || window.opera;