MigrateRepos
/
decentralized-video-chat
mirror of https://github.com/ianramzy/decentralized-video-chat.git
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor part 1

This commit is contained in:
Ian Ramzy 2020-04-05 23:15:20 -04:00
parent 426b185982
commit cfa063c422
3 changed files with 119 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/chat.html
View File

@ -110,7 +110,9 @@
<button class="hoverButton" onclick="{requestToggleCaptions()}"> <button class="hoverButton" onclick="{requestToggleCaptions()}">
<i class="fas fa-closed-captioning fa-xs"></i> <i class="fas fa-closed-captioning fa-xs"></i>
</button> </button>
<div class="HoverState" id="caption-text">Start Live Caption</div> <div class="HoverState" id="caption-button-text">
Start Live Caption
</div>
</div> </div>
<div class="buttonContainer"> <div class="buttonContainer">

BIN
public/images/portrait.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 500 KiB

After

Width:  |  Height:  |  Size: 53 KiB

282
public/js/chat.js
View File

@ -21,6 +21,10 @@ const chatInput = document.querySelector(".compose input");
const pipVideo = document.getElementById("remote-video"); const pipVideo = document.getElementById("remote-video");
const remoteVideo = $("#remote-video"); const remoteVideo = $("#remote-video");
const captionText = $("#remote-video-text"); const captionText = $("#remote-video-text");
const localVideoText = $("#local-video-text");
const captionButtontext = $("#caption-button-text");
const entireChat = $("#entire-chat");
const chatZone = $("#chat-zone");
var VideoChat = { var VideoChat = {
connected: false, connected: false,
@ -45,19 +49,19 @@ var VideoChat = {
}) })
.then((stream) => { .then((stream) => {
VideoChat.onMediaStream(stream); VideoChat.onMediaStream(stream);
$("#local-video-text").text("Drag Me"); localVideoText.text("Drag Me");
setTimeout(() => $("#local-video-text").fadeOut(), 5000); setTimeout(() => localVideoText.fadeOut(), 5000);
}) })
.catch((error) => { .catch((error) => {
logIt(error); logIt(error);
logIt( logIt(
"Failed to get local webcam video, check webcam privacy settings" "Failed to get local webcam video, check webcam privacy settings"
); );
// Keep trying to get user media
setTimeout(VideoChat.requestMediaStream, 1000); setTimeout(VideoChat.requestMediaStream, 1000);
}); });
}, },
// The onMediaStream function receives the media stream as an argument.
onMediaStream: function (stream) { onMediaStream: function (stream) {
logIt("onMediaStream"); logIt("onMediaStream");
VideoChat.localStream = stream; VideoChat.localStream = stream;
@ -105,8 +109,7 @@ var VideoChat = {
// Set up a callback to run when we have the ephemeral token to use Twilio's TURN server. // Set up a callback to run when we have the ephemeral token to use Twilio's TURN server.
startCall: function (event) { startCall: function (event) {
logIt("startCall"); logIt("startCall >>> Sending token request...");
logIt(">>> Sending token request...");
VideoChat.socket.on("token", VideoChat.onToken(VideoChat.createOffer)); VideoChat.socket.on("token", VideoChat.onToken(VideoChat.createOffer));
VideoChat.socket.emit("token", roomHash); VideoChat.socket.emit("token", roomHash);
}, },
@ -170,20 +173,6 @@ var VideoChat = {
case "disconnected": case "disconnected":
case "failed": case "failed":
logIt("failed/disconnected"); logIt("failed/disconnected");
// dataChanel.close();
// logIt("Refreshing page...");
// function reloadScript(id) {
// var $el = $("#" + id);
// $("#" + id).replaceWith(
// '<script id="' +
// id +
// '" src="' +
// $el.prop("src") +
// '"></script>'
// );
// }
// reloadScript("chatJS");
// alert("reloding");
location.reload(); location.reload();
break; break;
case "closed": case "closed":
@ -324,6 +313,7 @@ var VideoChat = {
}, },
}; };
// Get name of browser session using user agent
function getBrowserName() { function getBrowserName() {
var name = "Unknown"; var name = "Unknown";
if (window.navigator.userAgent.indexOf("MSIE") !== -1) { if (window.navigator.userAgent.indexOf("MSIE") !== -1) {
@ -339,40 +329,47 @@ function getBrowserName() {
return name; return name;
} }
// Basic logging class wrapper
function logIt(message, error) { function logIt(message, error) {
console.log(message); console.log(message);
} }
// Called when socket receives message that room is full
function chatRoomFull() { function chatRoomFull() {
alert( alert(
"Chat room is full. Check to make sure you don't have multiple open tabs, or try with a new room link" "Chat room is full. Check to make sure you don't have multiple open tabs, or try with a new room link"
); );
// Exit room and redirect
window.location.href = "/pickname"; window.location.href = "/pickname";
} }
// Reposition local video to top left of remote video
function rePositionLocalVideo() { function rePositionLocalVideo() {
// Get position of remote video
var bounds = remoteVideo.position(); var bounds = remoteVideo.position();
bounds.top += 10; bounds.top += 10;
bounds.left += 10; bounds.left += 10;
// Set position of local video
$("#moveable").css(bounds); $("#moveable").css(bounds);
} }
// Reposition captions to bottom of video
function rePositionCaptions() { function rePositionCaptions() {
// Get remote video position
var bounds = remoteVideo.position(); var bounds = remoteVideo.position();
bounds.top -= 10; bounds.top -= 10;
bounds.top = bounds.top + remoteVideo.height() - 1 * captionText.height(); bounds.top = bounds.top + remoteVideo.height() - 1 * captionText.height();
// Reposition captions
captionText.css(bounds); captionText.css(bounds);
} }
// Called when window is resized
function windowResized() { function windowResized() {
rePositionLocalVideo(); rePositionLocalVideo();
rePositionCaptions(); rePositionCaptions();
} }
//
// Fullscreen // Fullscreen
//
// function openFullscreen() { // function openFullscreen() {
// try { // try {
// // var elem = document.getElementById("remote-video"); // // var elem = document.getElementById("remote-video");
@ -415,50 +412,40 @@ function windowResized() {
// } // }
// setTimeout(windowResized, 1000); // setTimeout(windowResized, 1000);
// } // }
//
// End Fullscreen // End Fullscreen
//
//
// Mute microphone // Mute microphone
//
function muteMicrophone() { function muteMicrophone() {
var audioTrack = null; var audioTrack = null;
// Get audio track to mute
VideoChat.peerConnection.getSenders().find(function (s) { VideoChat.peerConnection.getSenders().find(function (s) {
if (s.track.kind === "audio") { if (s.track.kind === "audio") {
audioTrack = s.track; audioTrack = s.track;
} }
}); });
isMuted = !audioTrack.enabled; isMuted = !audioTrack.enabled;
audioTrack.enabled = isMuted; audioTrack.enabled = isMuted;
isMuted = !isMuted; isMuted = !isMuted;
// select mic button and mic button text
const micIcon = document.getElementById("mic-icon"); const micButtonIcon = document.getElementById("mic-icon");
const micText = document.getElementById("mic-text"); const micButtonText = document.getElementById("mic-text");
// Update mute button text and icon
if (isMuted) { if (isMuted) {
micIcon.classList.remove("fa-microphone"); micButtonIcon.classList.remove("fa-microphone");
micIcon.classList.add("fa-microphone-slash"); micButtonIcon.classList.add("fa-microphone-slash");
micText.innerText = "Unmute"; micButtonText.innerText = "Unmute";
} else { } else {
micIcon.classList.add("fa-microphone"); micButtonIcon.classList.add("fa-microphone");
micIcon.classList.remove("fa-microphone-slash"); micButtonIcon.classList.remove("fa-microphone-slash");
micText.innerText = "Mute"; micButtonText.innerText = "Mute";
} }
} }
//
// End Mute microphone // End Mute microphone
//
//
// Pause Video // Pause Video
//
function pauseVideo() { function pauseVideo() {
var videoTrack = null; var videoTrack = null;
// Get video track to pause
VideoChat.peerConnection.getSenders().find(function (s) { VideoChat.peerConnection.getSenders().find(function (s) {
if (s.track.kind === "video") { if (s.track.kind === "video") {
videoTrack = s.track; videoTrack = s.track;
@ -467,27 +454,23 @@ function pauseVideo() {
videoIsPaused = !videoTrack.enabled; videoIsPaused = !videoTrack.enabled;
videoTrack.enabled = videoIsPaused; videoTrack.enabled = videoIsPaused;
videoIsPaused = !videoIsPaused; videoIsPaused = !videoIsPaused;
const micIcon = document.getElementById("video-icon"); // select video button and video button text
const micText = document.getElementById("video-text"); const videoButtonIcon = document.getElementById("video-icon");
const videoButtonText = document.getElementById("video-text");
// update pause button icon and text
if (videoIsPaused) { if (videoIsPaused) {
micIcon.classList.remove("fa-video"); videoButtonIcon.classList.remove("fa-video");
micIcon.classList.add("fa-video-slash"); videoButtonIcon.classList.add("fa-video-slash");
micText.innerText = "Unpause Video"; videoButtonText.innerText = "Unpause Video";
} else { } else {
micIcon.classList.add("fa-video"); videoButtonIcon.classList.add("fa-video");
micIcon.classList.remove("fa-video-slash"); videoButtonIcon.classList.remove("fa-video-slash");
micText.innerText = "Pause Video"; videoButtonText.innerText = "Pause Video";
} }
} }
//
// End pause Video // End pause Video
//
//
// Swap camera / screen share // Swap camera / screen share
//
function swap() { function swap() {
if (!VideoChat.connected) { if (!VideoChat.connected) {
alert("You must join a call before you can share your screen."); alert("You must join a call before you can share your screen.");
@ -500,20 +483,13 @@ function swap() {
Snackbar.show({ Snackbar.show({
text: text:
"Please allow screen share. Click the middle of the picture above and then press share.", "Please allow screen share. Click the middle of the picture above and then press share.",
// actionText: "Show Me How",
width: "400px", width: "400px",
pos: "bottom-center", pos: "bottom-center",
actionTextColor: "#616161", actionTextColor: "#616161",
duration: 50000, duration: 50000,
// onActionClick: function (element) {
// window.open(
// "https://getacclaim.zendesk.com/hc/en-us/articles/360001547832-Setting-the-default-camera-on-your-browser",
// "_blank"
// );
// },
}); });
// Request screen share
navigator.mediaDevices navigator.mediaDevices
.getDisplayMedia({ .getDisplayMedia({
video: true, video: true,
@ -565,38 +541,42 @@ function switchStreamHelper(stream) {
} }
VideoChat.localStream = videoTrack; VideoChat.localStream = videoTrack;
VideoChat.localVideo.srcObject = stream; VideoChat.localVideo.srcObject = stream;
// Unpause video on swap
if (videoIsPaused) { if (videoIsPaused) {
pauseVideo(); pauseVideo();
} }
} }
//
// End swap camera / screen share // End swap camera / screen share
//
//
// Live caption // Live caption
// // Request captions from other user, toggles state
function requestToggleCaptions() { function requestToggleCaptions() {
// Handle requesting captions before connected
if (!VideoChat.connected) { if (!VideoChat.connected) {
alert("You must be connected to a peer to use Live Caption"); alert("You must be connected to a peer to use Live Caption");
return; return;
} }
if (receivingCaptions) { if (receivingCaptions) {
captionText.text("").fadeOut(); captionText.text("").fadeOut();
$("#caption-text").text("Start Live Caption"); captionButtontext.text("Start Live Caption");
receivingCaptions = false; receivingCaptions = false;
} else { } else {
alert( Snackbar.show({
"This is an experimental feature. Live transcription requires the other user to have chrome." text:
); "This is an experimental feature. Live caption requires the other user to be using Chrome",
$("#caption-text").text("End Live Caption"); width: "400px",
pos: "bottom-center",
actionTextColor: "#616161",
duration: 10000,
});
captionButtontext.text("End Live Caption");
receivingCaptions = true; receivingCaptions = true;
} }
// Send request to get captions over data channel
dataChanel.send("tog:"); dataChanel.send("tog:");
} }
// Start/stop sending captions to other user
function toggleSendCaptions() { function toggleSendCaptions() {
if (sendingCaptions) { if (sendingCaptions) {
sendingCaptions = false; sendingCaptions = false;
@ -607,29 +587,26 @@ function toggleSendCaptions() {
} }
} }
// Start speech recognition
function startSpeech() { function startSpeech() {
try { try {
var SpeechRecognition = var SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition; window.SpeechRecognition || window.webkitSpeechRecognition;
var recognition = new SpeechRecognition(); VideoChat.recognition = new SpeechRecognition();
VideoChat.recognition = recognition;
} catch (e) { } catch (e) {
sendingCaptions = false; sendingCaptions = false;
logIt(e); logIt(e);
logIt("error importing speech library"); logIt("error importing speech library");
// Alert other user that they cannon use live caption
dataChanel.send("cap:notusingchrome"); dataChanel.send("cap:notusingchrome");
return; return;
} }
// If false, the recording will stop after a few seconds of silence.
// When true, the silence period is longer (about 15 seconds),
// allowing us to keep recording even when the user pauses.
recognition.continuous = true;
recognition.interimResults = true;
// recognition.maxAlternatives = 3; // recognition.maxAlternatives = 3;
VideoChat.recognition.continuous = true;
// Show results that aren't final
VideoChat.recognition.interimResults = true;
var finalTranscript; var finalTranscript;
recognition.onresult = (event) => { VideoChat.recognition.onresult = (event) => {
let interimTranscript = ""; let interimTranscript = "";
for (let i = event.resultIndex, len = event.results.length; i < len; i++) { for (let i = event.resultIndex, len = event.results.length; i < len; i++) {
var transcript = event.results[i][0].transcript; var transcript = event.results[i][0].transcript;
@ -638,6 +615,8 @@ function startSpeech() {
} else { } else {
interimTranscript += transcript; interimTranscript += transcript;
var charsToKeep = interimTranscript.length % 100; var charsToKeep = interimTranscript.length % 100;
// Send captions over data chanel,
// subtracting as many complete 100 char slices from start
dataChanel.send( dataChanel.send(
"cap:" + "cap:" +
interimTranscript.substring(interimTranscript.length - charsToKeep) interimTranscript.substring(interimTranscript.length - charsToKeep)
@ -645,117 +624,105 @@ function startSpeech() {
} }
} }
}; };
VideoChat.recognition.onend = function () {
recognition.onstart = function () { logIt("on speech recording end");
console.log("recording on"); // Restart speech recognition if user has not stopped it
};
recognition.onspeechend = function () {
console.log("on speech end");
};
recognition.onerror = function (event) {
if (event.error === "no-speech") {
console.log("no speech detected");
}
};
recognition.onend = function () {
console.log("on end");
console.log(sendingCaptions);
if (sendingCaptions) { if (sendingCaptions) {
startSpeech(); startSpeech();
} else { } else {
VideoChat.recognition.stop(); VideoChat.recognition.stop();
} }
}; };
VideoChat.recognition.start();
recognition.start();
} }
// Recieve captions over datachannel
function recieveCaptions(captions) { function recieveCaptions(captions) {
if (receivingCaptions) { if (receivingCaptions) {
captionText.text("").fadeIn(); captionText.text("").fadeIn();
} else { } else {
captionText.text("").fadeOut(); captionText.text("").fadeOut();
} }
// Other user is not using chrome
if (captions === "notusingchrome") { if (captions === "notusingchrome") {
alert( alert(
"Other caller must be using chrome for this feature to work. Live Caption turned off." "Other caller must be using chrome for this feature to work. Live Caption turned off."
); );
receivingCaptions = false; receivingCaptions = false;
captionText.text("").fadeOut(); captionText.text("").fadeOut();
$("#caption-text").text("Start Live Caption"); captionButtontext.text("Start Live Caption");
return; return;
} }
captionText.text(captions); captionText.text(captions);
rePositionCaptions(); rePositionCaptions();
} }
//
// End Live caption // End Live caption
//
// // Text Chat
// Chat // Add text message to chat screen on page
// function addMessageToScreen(msg) {
$(".chat-messages").append(
'<div class="message-item customer cssanimation fadeInBottom"><div class="message-bloc"><div class="message">' +
msg +
"</div></div></div>"
);
}
// Listen for enter press on chat input
chatInput.addEventListener("keypress", function (event) { chatInput.addEventListener("keypress", function (event) {
if (event.keyCode === 13) { if (event.keyCode === 13) {
// Prevent page refresh on enter
event.preventDefault(); event.preventDefault();
var msg = chatInput.value; var msg = chatInput.value;
// Prevent cross site scripting
msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;"); msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
// Make links clickable
msg = msg.autoLink();
// Send message over data channel
dataChanel.send("mes:" + msg); dataChanel.send("mes:" + msg);
$(".chat-messages").append( // Add message to screen
'<div class="message-item customer cssanimation fadeInBottom"><div class="message-bloc"><div class="message">' + addMessageToScreen(msg);
msg.autoLink() + // Auto scroll chat down
"</div></div></div>" chatZone.scrollTop(chatZone[0].scrollHeight);
); // Clear chat input
$("#chat-zone").scrollTop($("#chat-zone")[0].scrollHeight);
chatInput.value = ""; chatInput.value = "";
} }
}); });
// Called when a message is recieved over the dataChannel
function handleRecieveMessage(msg) { function handleRecieveMessage(msg) {
msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;"); // Add message to screen
$(".chat-messages").append( addMessageToScreen(msg);
'<div class="message-item moderator cssanimation fadeInBottom"><div class="message-bloc"><div class="message">' + // Auto scroll chat down
msg.autoLink() + chatZone.scrollTop(chatZone[0].scrollHeight);
"</div></div></div>" // Show chat if hidden
); if (entireChat.is(":hidden")) {
$("#chat-zone").scrollTop($("#chat-zone")[0].scrollHeight);
if ($("#entire-chat").is(":hidden")) {
toggleChat(); toggleChat();
} }
} }
// Show and hide chat
function toggleChat() { function toggleChat() {
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();
// Update show chat buttton
chatText.text("Show Chat"); chatText.text("Show Chat");
chatIcon.classList.remove("fa-comment-slash"); chatIcon.classList.remove("fa-comment-slash");
chatIcon.classList.add("fa-comment"); chatIcon.classList.add("fa-comment");
} else { } else {
entireChat.fadeIn(); entireChat.fadeIn();
// Update show chat buttton
chatText.text("Hide Chat"); chatText.text("Hide Chat");
chatIcon.classList.remove("fa-comment"); chatIcon.classList.remove("fa-comment");
chatIcon.classList.add("fa-comment-slash"); chatIcon.classList.add("fa-comment-slash");
} }
} }
// End Text chat
//
// End chat
//
//
//Picture in picture //Picture in picture
//
function togglePictureInPicture() { function togglePictureInPicture() {
// pipVideo.webkitSetPresentationMode("picture-in-picture");
if ( if (
"pictureInPictureEnabled" in document || "pictureInPictureEnabled" in document ||
pipVideo.webkitSetPresentationMode pipVideo.webkitSetPresentationMode
@ -782,27 +749,17 @@ function togglePictureInPicture() {
); );
} }
} }
// pipVideo.addEventListener("enterpictureinpicture", () => {
// $("#pip-text").text("Exit Picture in Picture");
// alert("enter pip");
// });
//
// pipVideo.addEventListener("leavepictureinpicture", () => {
// $("#pip-text").text("Enter Picture in Picture");
// alert("exit pip");
// });
//
//Picture in picture //Picture in picture
//
function startUp() { function startUp() {
// Redirect mobile browsers
if ( if (
/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent navigator.userAgent
) )
) { ) {
alert( alert(
"Zipcall is not currently supported on mobile. Please try again on dekstop." "Zipcall is not currently supported on mobile. Please try again on desktop."
); );
window.location.href = "/notsupported"; window.location.href = "/notsupported";
} }
@ -814,23 +771,25 @@ function startUp() {
window.location.href = "/notsupported"; window.location.href = "/notsupported";
} }
// Set tab title
document.title = "Zipcall - " + url.substring(url.lastIndexOf("/") + 1); document.title = "Zipcall - " + url.substring(url.lastIndexOf("/") + 1);
// get webcam on load // get webcam on load
VideoChat.requestMediaStream(); VideoChat.requestMediaStream();
// Captions hidden by default
captionText.text("").fadeOut(); captionText.text("").fadeOut();
// Make local video draggable
$("#moveable").draggable({ containment: "window" }); $("#moveable").draggable({ containment: "window" });
// Hide button labels on load
$(".HoverState").hide(); $(".HoverState").hide();
$("#entire-chat").hide(); // Text chat hidden by default
entireChat.hide();
//
// Show hide button labels on hover // Show hide button labels on hover
//
$(document).ready(function () { $(document).ready(function () {
$(".hoverButton").mouseover(function () { $(".hoverButton").mouseover(function () {
$(".HoverState").hide(); $(".HoverState").hide();
@ -841,16 +800,8 @@ function startUp() {
}); });
}); });
//
// End show hide button labels on hover
//
//
// Fade out / show UI on mouse move // Fade out / show UI on mouse move
//
var timedelay = 1; var timedelay = 1;
function delayCheck() { function delayCheck() {
if (timedelay === 5) { if (timedelay === 5) {
$(".multi-button").fadeOut(); $(".multi-button").fadeOut();
@ -859,7 +810,6 @@ function startUp() {
} }
timedelay = timedelay + 1; timedelay = timedelay + 1;
} }
$(document).mousemove(function () { $(document).mousemove(function () {
$(".multi-button").fadeIn(); $(".multi-button").fadeIn();
$("#header").fadeIn(); $("#header").fadeIn();
@ -869,10 +819,6 @@ function startUp() {
}); });
_delay = setInterval(delayCheck, 500); _delay = setInterval(delayCheck, 500);
//
// End Fade out / show UI on mouse move
//
// Show accept webcam snackbar // Show accept webcam snackbar
Snackbar.show({ Snackbar.show({
text: "Please allow microphone and webcam access", text: "Please allow microphone and webcam access",
@ -889,9 +835,13 @@ function startUp() {
}, },
}); });
// Set caption text on start
captionText.text("Waiting for other user to join...").fadeIn(); captionText.text("Waiting for other user to join...").fadeIn();
// Reposition captions on start
rePositionCaptions(); rePositionCaptions();
// On change media devices refresh page and switch to system default
navigator.mediaDevices.ondevicechange = () => window.location.reload(); navigator.mediaDevices.ondevicechange = () => window.location.reload();
} }