MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2025-02-23 00:15:04 +08:00
Code Issues Releases Wiki Activity

basic refactor chat.js

Browse Source
This commit is contained in:
ian ramzy 2020-03-30 00:03:11 -04:00
parent 2db08f913d
commit 524c4602ef
1 changed files with 214 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

368
public/js/chat.js
View File

@ -1,58 +1,28 @@
// strip url parameters // Vars
if (window.location.href.indexOf('?') > -1) { const browserName = getBrowserName();
window.location.href = window.location.href.split('?')[0]; const url = window.location.href;
}
if (window.location.pathname === "/room") {
window.location.href = "/landing/newroom";
}
url = window.location.href;
const roomHash = url.substring(url.lastIndexOf('/') + 1).toLowerCase(); const roomHash = url.substring(url.lastIndexOf('/') + 1).toLowerCase();
document.title = 'Neon Chat - ' + url.substring(url.lastIndexOf('/') + 1); var mode = "camera";
var isFullscreen = false;
var sendingCaptions = false;
function getBrowserName() { var receivingCaptions = false;
var name = "Unknown"; const isWebRTCSupported =
if (window.navigator.userAgent.indexOf("MSIE") !== -1) {
} else if (window.navigator.userAgent.indexOf("Firefox") !== -1) {
name = "Firefox";
} else if (window.navigator.userAgent.indexOf("Opera") !== -1) {
name = "Opera";
} else if (window.navigator.userAgent.indexOf("Chrome") !== -1) {
name = "Chrome";
} else if (window.navigator.userAgent.indexOf("Safari") !== -1) {
name = "Safari";
}
return name;
}
var browserName = getBrowserName();
var isWebRTCSupported =
navigator.getUserMedia || navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.mozGetUserMedia ||
navigator.msGetUserMedia || navigator.msGetUserMedia ||
window.RTCPeerConnection; window.RTCPeerConnection;
if (!isWebRTCSupported || browserName === "Safari" || browserName === "MSIE") { // Element vars
alert("Your browser doesn't support Neon Chat. Please use Chrome or Firefox."); const chatInput = document.querySelector('.compose textarea');
window.location.href = "/"; const pipVideo = document.getElementById('remote-video');
}
function logIt(message, error) {
console.log(message);
}
// Create an object to save various objects to without polluting the global namespace.
var VideoChat = { var VideoChat = {
connected: false, connected: false,
willInitiateCall: false, willInitiateCall: false,
localICECandidates: [], localICECandidates: [],
// Initialise our connection to the WebSocket.
socket: io(), socket: io(),
remoteVideo: document.getElementById('remote-video'), remoteVideo: document.getElementById('remote-video'),
localVideo: document.getElementById('local-video'), localVideo: document.getElementById('local-video'),
@ -64,7 +34,7 @@ var VideoChat = {
// noMediaStream function. // noMediaStream function.
requestMediaStream: function (event) { requestMediaStream: function (event) {
logIt("requestMediaStream"); logIt("requestMediaStream");
VideoChat.rePositionLocalVideo(); rePositionLocalVideo();
navigator.mediaDevices.getUserMedia({ navigator.mediaDevices.getUserMedia({
video: true, video: true,
audio: true audio: true
@ -105,18 +75,13 @@ var VideoChat = {
VideoChat.localVideo.srcObject = stream; VideoChat.localVideo.srcObject = stream;
// Now we're ready to join the chat room. // Now we're ready to join the chat room.
VideoChat.socket.emit('join', roomHash); VideoChat.socket.emit('join', roomHash);
VideoChat.socket.on('full', VideoChat.chatRoomFull); VideoChat.socket.on('full', chatRoomFull);
VideoChat.socket.on('offer', VideoChat.onOffer); VideoChat.socket.on('offer', VideoChat.onOffer);
VideoChat.socket.on('ready', VideoChat.readyToCall); VideoChat.socket.on('ready', VideoChat.readyToCall);
VideoChat.socket.on('willInitiateCall', () => VideoChat.willInitiateCall = true); VideoChat.socket.on('willInitiateCall', () => VideoChat.willInitiateCall = true);
}, },
chatRoomFull: function () {
alert("Chat room is full. Check to make sure you don't have multiple open tabs, or try with a new room link");
window.location.href = "/newroom";
},
// When we are ready to call, enable the Call button. // When we are ready to call, enable the Call button.
readyToCall: function (event) { readyToCall: function (event) {
logIt("readyToCall"); logIt("readyToCall");
@ -154,32 +119,12 @@ var VideoChat = {
VideoChat.socket.on('candidate', VideoChat.onCandidate); VideoChat.socket.on('candidate', VideoChat.onCandidate);
VideoChat.socket.on('answer', VideoChat.onAnswer); VideoChat.socket.on('answer', VideoChat.onAnswer);
VideoChat.socket.on('requestToggleCaptions', () => toggleSendCaptions()); VideoChat.socket.on('requestToggleCaptions', () => toggleSendCaptions());
VideoChat.socket.on('recieveCaptions', (captions) => VideoChat.recieveCaptions(captions)); VideoChat.socket.on('recieveCaptions', (captions) => recieveCaptions(captions));
callback(); callback();
}; };
}, },
recieveCaptions: function (captions) {
// reset button to start captions
$('#remote-video-text').text("").fadeIn();
if (!receivingCaptions) {
$('#remote-video-text').text("").fadeOut();
}
if (captions === "notusingchrome") {
alert("Other caller must be using chrome for this feature to work");
receivingCaptions = false;
$('#remote-video-text').text("").fadeOut();
$('#caption-text').text("Start Live Caption");
return
}
if (captions.length > 100) {
$('#remote-video-text').text(captions.substr(captions.length - 199));
} else {
$('#remote-video-text').text(captions);
}
},
// When the peerConnection generates an ice candidate, send it over the socket to the peer. // When the peerConnection generates an ice candidate, send it over the socket to the peer.
onIceCandidate: function (event) { onIceCandidate: function (event) {
logIt("onIceCandidate"); logIt("onIceCandidate");
@ -259,8 +204,7 @@ var VideoChat = {
VideoChat.socket.emit('token', roomHash); VideoChat.socket.emit('token', roomHash);
}, },
// When an answer is received, add it to the peerConnection as the remote // When an answer is received, add it to the peerConnection as the remote description.
// description.
onAnswer: function (answer) { onAnswer: function (answer) {
logIt("onAnswer"); logIt("onAnswer");
logIt('<<< Received answer'); logIt('<<< Received answer');
@ -272,13 +216,10 @@ var VideoChat = {
logIt(`>>> Sending local ICE candidate (${candidate.address})`); logIt(`>>> Sending local ICE candidate (${candidate.address})`);
VideoChat.socket.emit('candidate', JSON.stringify(candidate), roomHash); VideoChat.socket.emit('candidate', JSON.stringify(candidate), roomHash);
}); });
// Reset the buffer of local ICE candidates. This is not really needed // Reset the buffer of local ICE candidates. This is not really needed, but it's good practice
// in this specific client, but it's good practice
VideoChat.localICECandidates = []; VideoChat.localICECandidates = [];
}, },
// 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) { onAddStream: function (event) {
logIt("onAddStream"); logIt("onAddStream");
logIt('<<< Received new stream from remote. Adding it...'); logIt('<<< Received new stream from remote. Adding it...');
@ -295,20 +236,48 @@ var VideoChat = {
if (timesRun === 20) { if (timesRun === 20) {
clearInterval(interval); clearInterval(interval);
} }
VideoChat.rePositionLocalVideo() rePositionLocalVideo()
}, 300); }, 300);
}, },
rePositionLocalVideo: function () {
var bounds = $("#remote-video").position();
bounds.top += 10;
bounds.left += 10;
$("#moveable").css(bounds)
}
}; };
var isFullscreen = false; function getBrowserName() {
var name = "Unknown";
if (window.navigator.userAgent.indexOf("MSIE") !== -1) {
} else if (window.navigator.userAgent.indexOf("Firefox") !== -1) {
name = "Firefox";
} else if (window.navigator.userAgent.indexOf("Opera") !== -1) {
name = "Opera";
} else if (window.navigator.userAgent.indexOf("Chrome") !== -1) {
name = "Chrome";
} else if (window.navigator.userAgent.indexOf("Safari") !== -1) {
name = "Safari";
}
return name;
}
function logIt(message, error) {
console.log(message);
}
function chatRoomFull() {
alert("Chat room is full. Check to make sure you don't have multiple open tabs, or try with a new room link");
window.location.href = "/newroom";
}
function rePositionLocalVideo() {
var bounds = $("#remote-video").position();
bounds.top += 10;
bounds.left += 10;
$("#moveable").css(bounds)
}
//
// Fullscreen
//
function openFullscreen() { function openFullscreen() {
var elem = document.getElementById("remote-video"); var elem = document.getElementById("remote-video");
@ -337,6 +306,14 @@ function openFullscreen() {
} }
} }
//
// End Fullscreen
//
//
// Mute microphone
//
function muteMicrophone() { function muteMicrophone() {
var muted = VideoChat.localStream.getAudioTracks()[0].enabled; var muted = VideoChat.localStream.getAudioTracks()[0].enabled;
VideoChat.localStream.getAudioTracks()[0].enabled = !muted; VideoChat.localStream.getAudioTracks()[0].enabled = !muted;
@ -353,6 +330,13 @@ function muteMicrophone() {
} }
} }
//
// End Mute microphone
//
//
// Pause Video
//
function pauseVideo() { function pauseVideo() {
var paused = VideoChat.localStream.getVideoTracks()[0].enabled; var paused = VideoChat.localStream.getVideoTracks()[0].enabled;
VideoChat.localStream.getVideoTracks()[0].enabled = !paused; VideoChat.localStream.getVideoTracks()[0].enabled = !paused;
@ -369,58 +353,14 @@ function pauseVideo() {
} }
} }
//
// Fade out / show UI on mouse move // End pause Video
var timedelay = 1; //
function delayCheck() {
if (timedelay === 5) {
$('.multi-button').fadeOut();
$('#header').fadeOut();
timedelay = 1;
}
timedelay = timedelay + 1;
}
$(document).mousemove(function () {
$('.multi-button').fadeIn();
$('#header').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
});
_delay = setInterval(delayCheck, 500);
// Show accept webcam snackbar //
Snackbar.show({ // Swap camera / screen share
text: 'Please allow microphone and webcam access', //
actionText: 'Show Me How',
width: '455px',
pos: 'top-right',
actionTextColor: '#8688ff',
duration: 50000,
backgroundColor: '#292B32',
onActionClick: function (element) {
window.open('https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser', '_blank');
}
});
//Neomorphic buttons
$(".HoverState").hide();
$(document).ready(function () {
$(".hoverButton").mouseover(function () {
$(".HoverState").hide();
$(this).next().show();
});
$(".hoverButton").mouseout(function () {
$(".HoverState").hide();
});
});
var mode = "camera";
function swap() { function swap() {
if (!VideoChat.connected) { if (!VideoChat.connected) {
@ -467,13 +407,14 @@ function switchStreamHelper(stream) {
VideoChat.localVideo.srcObject = stream; VideoChat.localVideo.srcObject = stream;
} }
//
// End swap camera / screen share
//
$("#moveable").draggable({containment: 'window'});
$('#remote-video-text').text("").fadeOut();
var sendingCaptions = false;
var receivingCaptions = false;
//
// Live caption
//
function requestToggleCaptions() { function requestToggleCaptions() {
if (!VideoChat.connected) { if (!VideoChat.connected) {
@ -502,7 +443,6 @@ function toggleSendCaptions() {
} }
} }
function startSpeech() { function startSpeech() {
try { try {
var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; var SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
@ -565,36 +505,60 @@ function startSpeech() {
recognition.start(); recognition.start();
} }
function recieveCaptions(captions) {
$('#remote-video-text').text("").fadeIn();
if (!receivingCaptions) {
$('#remote-video-text').text("").fadeOut();
}
if (captions === "notusingchrome") {
alert("Other caller must be using chrome for this feature to work");
receivingCaptions = false;
$('#remote-video-text').text("").fadeOut();
$('#caption-text').text("Start Live Caption");
return
}
if (captions.length > 100) {
$('#remote-video-text').text(captions.substr(captions.length - 199));
} else {
$('#remote-video-text').text(captions);
}
}
//
// End Live caption
//
//
// Chat // Chat
$('#entire-chat').hide(); //
var input = document.querySelector('.compose textarea');
var socket = VideoChat.socket; var socket = VideoChat.socket;
input.addEventListener('keypress', function (event) { chatInput.addEventListener('keypress', function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
event.preventDefault(); event.preventDefault();
socket.emit('chat message', input.value, roomHash); socket.emit('chat message', chatInput.value, roomHash);
$('.chat-messages').append('<div class="message-item customer"><div class="message-bloc"><div class="message">' + input.value + '</div></div></div>'); $('.chat-messages').append('<div class="message-item customer"><div class="message-bloc"><div class="message">' + chatInput.value + '</div></div></div>');
$('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight); $('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight);
input.value = ''; chatInput.value = '';
} }
}); });
socket.on('chat message', function (msg) { socket.on('chat message', function (msg) {
$('.chat-messages').append('<div class="message-item moderator"><div class="message-bloc"><div class="message">' + msg + '</div></div></div>'); $('.chat-messages').append('<div class="message-item moderator"><div class="message-bloc"><div class="message">' + msg + '</div></div></div>');
$('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight); $('#chat-zone').scrollTop($('#chat-zone')[0].scrollHeight);
if ($('#entire-chat').is(":hidden")){ if ($('#entire-chat').is(":hidden")) {
toggleChat() toggleChat()
} }
}); });
function toggleChat() { function toggleChat() {
var entireChat = $('#entire-chat'); var entireChat = $('#entire-chat');
var chatIcon = document.getElementById("chat-icon"); var chatIcon = document.getElementById("chat-icon");
var chatText = $('#chat-text'); var chatText = $('#chat-text');
if (entireChat.is(":visible")){ if (entireChat.is(":visible")) {
entireChat.fadeOut(); entireChat.fadeOut();
chatText.text("Show Chat"); chatText.text("Show Chat");
chatIcon.classList.remove("fa-comment-slash"); chatIcon.classList.remove("fa-comment-slash");
@ -606,11 +570,15 @@ function toggleChat() {
chatIcon.classList.add("fa-comment-slash"); chatIcon.classList.add("fa-comment-slash");
} }
} }
// Chat
//
// End chat
//
//
//Picture in picture //Picture in picture
const pipVideo = document.getElementById('remote-video'); //
function togglePictureInPicture() { function togglePictureInPicture() {
if ('pictureInPictureEnabled' in document) { if ('pictureInPictureEnabled' in document) {
if (document.pictureInPictureElement) { if (document.pictureInPictureElement) {
@ -639,9 +607,101 @@ pipVideo.addEventListener('enterpictureinpicture', () => {
pipVideo.addEventListener('leavepictureinpicture', () => { pipVideo.addEventListener('leavepictureinpicture', () => {
$('#pip-text').text("Enter Picture in Picture"); $('#pip-text').text("Enter Picture in Picture");
}); });
//
//Picture in picture //Picture in picture
//
// auto get media function startUp() {
VideoChat.requestMediaStream(); // strip url parameters
if (url.indexOf('?') > -1) {
window.location.href = url.split('?')[0];
}
// if no chat room provided go back to newroom
if (window.location.pathname === "/room") {
window.location.href = "/landing/newroom";
}
// Redirect unsupported browsers
if (!isWebRTCSupported || browserName === "Safari" || browserName === "MSIE") {
alert("Your browser doesn't support Neon Chat. Please use Chrome or Firefox.");
window.location.href = "/";
}
document.title = 'Neon Chat - ' + url.substring(url.lastIndexOf('/') + 1);
// get webcam on load
VideoChat.requestMediaStream();
$('#remote-video-text').text("").fadeOut();
$("#moveable").draggable({containment: 'window'});
$(".HoverState").hide();
$('#entire-chat').hide();
//
// Show hide button labels on hover
//
$(document).ready(function () {
$(".hoverButton").mouseover(function () {
$(".HoverState").hide();
$(this).next().show();
});
$(".hoverButton").mouseout(function () {
$(".HoverState").hide();
});
});
//
// End show hide button labels on hover
//
//
// Fade out / show UI on mouse move
//
var timedelay = 1;
function delayCheck() {
if (timedelay === 5) {
$('.multi-button').fadeOut();
$('#header').fadeOut();
timedelay = 1;
}
timedelay = timedelay + 1;
}
$(document).mousemove(function () {
$('.multi-button').fadeIn();
$('#header').fadeIn();
timedelay = 1;
clearInterval(_delay);
_delay = setInterval(delayCheck, 500);
});
_delay = setInterval(delayCheck, 500);
//
// End Fade out / show UI on mouse move
//
// Show accept webcam snackbar
Snackbar.show({
text: 'Please allow microphone and webcam access',
actionText: 'Show Me How',
width: '455px',
pos: 'top-right',
actionTextColor: '#8688ff',
duration: 50000,
backgroundColor: '#292B32',
onActionClick: function (element) {
window.open('https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser', '_blank');
}
});
}
startUp();