-
-
Save digitallysavvy/534d714a757f54ddac048919b5a6a64f to your computer and use it in GitHub Desktop.
JS to control UI within Group Video chat web app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// UI buttons | |
function enableUiControls(localStream) { | |
$("#mic-btn").prop("disabled", false); | |
$("#video-btn").prop("disabled", false); | |
$("#screen-share-btn").prop("disabled", false); | |
$("#exit-btn").prop("disabled", false); | |
$("#mic-btn").click(function(){ | |
toggleMic(localStream); | |
}); | |
$("#video-btn").click(function(){ | |
toggleVideo(localStream); | |
}); | |
$("#screen-share-btn").click(function(){ | |
toggleScreenShareBtn(); // set screen share button icon | |
$("#screen-share-btn").prop("disabled",true); // disable the button on click | |
if(screenShareActive){ | |
stopScreenShare(); | |
} else { | |
initScreenShare(); | |
} | |
}); | |
$("#exit-btn").click(function(){ | |
console.log("so sad to see you leave the channel"); | |
leaveChannel(); | |
}); | |
// keyboard listeners | |
$(document).keypress(function(e) { | |
switch (e.key) { | |
case "m": | |
console.log("squick toggle the mic"); | |
toggleMic(localStream); | |
break; | |
case "v": | |
console.log("quick toggle the video"); | |
toggleVideo(localStream); | |
break; | |
case "s": | |
console.log("initializing screen share"); | |
toggleScreenShareBtn(); // set screen share button icon | |
$("#screen-share-btn").prop("disabled",true); // disable the button on click | |
if(screenShareActive){ | |
stopScreenShare(); | |
} else { | |
initScreenShare(); | |
} | |
break; | |
case "q": | |
console.log("so sad to see you quit the channel"); | |
leaveChannel(); | |
break; | |
default: // do nothing | |
} | |
// (for testing) | |
if(e.key === "r") { | |
window.history.back(); // quick reset | |
} | |
}); | |
} | |
function toggleBtn(btn){ | |
btn.toggleClass('btn-dark').toggleClass('btn-danger'); | |
} | |
function toggleScreenShareBtn() { | |
$('#screen-share-btn').toggleClass('btn-danger'); | |
$('#screen-share-icon').toggleClass('fa-share-square').toggleClass('fa-times-circle'); | |
} | |
function toggleVisibility(elementID, visible) { | |
if (visible) { | |
$(elementID).attr("style", "display:block"); | |
} else { | |
$(elementID).attr("style", "display:none"); | |
} | |
} | |
function toggleMic(localStream) { | |
toggleBtn($("#mic-btn")); // toggle button colors | |
$("#mic-icon").toggleClass('fa-microphone').toggleClass('fa-microphone-slash'); // toggle the mic icon | |
if ($("#mic-icon").hasClass('fa-microphone')) { | |
localStream.enableAudio(); // enable the local mic | |
toggleVisibility("#mute-overlay", false); // hide the muted mic icon | |
} else { | |
localStream.disableAudio(); // mute the local mic | |
toggleVisibility("#mute-overlay", true); // show the muted mic icon | |
} | |
} | |
function toggleVideo(localStream) { | |
toggleBtn($("#video-btn")); // toggle button colors | |
$("#video-icon").toggleClass('fa-video').toggleClass('fa-video-slash'); // toggle the video icon | |
if ($("#video-icon").hasClass('fa-video')) { | |
localStream.enableVideo(); // enable the local video | |
toggleVisibility("#no-local-video", false); // hide the user icon when video is enabled | |
} else { | |
localStream.disableVideo(); // disable the local video | |
toggleVisibility("#no-local-video", true); // show the user icon when video is disabled | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment