MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-11-23 10:39:20 +08:00
Code Issues Releases Wiki Activity

finish refactor

Browse Source
This commit is contained in:
Ian Ramzy 2020-04-06 00:17:40 -04:00
parent cfa063c422
commit 5b4b397418
1 changed files with 68 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
public/js/chat.js
View File

@ -18,7 +18,7 @@ const isWebRTCSupported =
// Element vars
const chatInput = document.querySelector(".compose input");
const pipVideo = document.getElementById("remote-video");
const remoteVideoVanilla = document.getElementById("remote-video");
const remoteVideo = $("#remote-video");
const captionText = $("#remote-video-text");
const localVideoText = $("#local-video-text");
@ -62,10 +62,12 @@ var VideoChat = {
});
},
// Called when a video stream is added to VideoChat
onMediaStream: function (stream) {
logIt("onMediaStream");
VideoChat.localStream = stream;
// Add the stream as video's srcObject.
// Now that we have webcam video sorted, prompt user to share URL
Snackbar.show({
text: "Share this URL with a friend to get started!",
actionText: "Copy Link",
@ -75,6 +77,8 @@ var VideoChat = {
duration: 500000,
backgroundColor: "#16171a",
onActionClick: function (element) {
// Copy url to clipboard, this is achieved by creating a temporary element,
// adding the text we want to that element, selecting it, then deleting it
var copyContent = window.location.href;
$('<input id="some-element">')
.val(copyContent)
@ -83,12 +87,13 @@ var VideoChat = {
document.execCommand("copy");
var toRemove = document.querySelector("#some-element");
toRemove.parentNode.removeChild(toRemove);
$(element).css("opacity", 0); //Set opacity of element to 0 to close Snackbar
Snackbar.close();
},
});
VideoChat.localVideo.srcObject = stream;
// Now we're ready to join the chat room.
VideoChat.socket.emit("join", roomHash);
// Add listeners to the websocket
VideoChat.socket.on("full", chatRoomFull);
VideoChat.socket.on("offer", VideoChat.onOffer);
VideoChat.socket.on("ready", VideoChat.readyToCall);
@ -101,6 +106,7 @@ var VideoChat = {
// When we are ready to call, enable the Call button.
readyToCall: function (event) {
logIt("readyToCall");
// First to join call will most likely initiate call
if (VideoChat.willInitiateCall) {
logIt("Initiating call");
VideoChat.startCall();
@ -127,20 +133,23 @@ var VideoChat = {
VideoChat.localStream.getTracks().forEach(function (track) {
VideoChat.peerConnection.addTrack(track, VideoChat.localStream);
});
// Add general purpose data channel to peer connection,
// used for text chats, captions, and toggling sending captions
dataChanel = VideoChat.peerConnection.createDataChannel("chat", {
negotiated: true,
// both peers must have same id
id: 0,
});
// Called when dataChannel is successfully opened
dataChanel.onopen = function (event) {
logIt("dataChannel opened");
};
// Handle different dataChannel types
dataChanel.onmessage = function (event) {
var recievedData = event.data;
var dataType = recievedData.substring(0, 4);
var cleanedMessage = recievedData.slice(4);
const receivedData = event.data;
// First 4 chars represent data type
const dataType = receivedData.substring(0, 4);
const cleanedMessage = receivedData.slice(4);
if (dataType === "mes:") {
handleRecieveMessage(cleanedMessage);
} else if (dataType === "cap:") {
@ -149,30 +158,29 @@ var VideoChat = {
toggleSendCaptions();
}
};
// Set up callbacks for the connection generating iceCandidates or
// receiving the remote media stream.
VideoChat.peerConnection.onicecandidate = VideoChat.onIceCandidate;
VideoChat.peerConnection.onaddstream = VideoChat.onAddStream;
// Set up listeners on the socket for candidates or answers being passed
// over the socket connection.
// Set up listeners on the socket
VideoChat.socket.on("candidate", VideoChat.onCandidate);
VideoChat.socket.on("answer", VideoChat.onAnswer);
VideoChat.socket.on("requestToggleCaptions", () => toggleSendCaptions());
VideoChat.socket.on("recieveCaptions", (captions) =>
recieveCaptions(captions)
);
// Called when there is a change in connection state
VideoChat.peerConnection.oniceconnectionstatechange = function (event) {
switch (VideoChat.peerConnection.iceConnectionState) {
case "connected":
logIt("connected");
// Once connected we no longer have a need for the signaling server, so disconnect
VideoChat.socket.disconnect();
break;
case "disconnected":
case "failed":
logIt("failed/disconnected");
// Refresh page if connection is lost
location.reload();
break;
case "closed":
@ -180,7 +188,6 @@ var VideoChat = {
break;
}
};
callback();
};
},
@ -212,19 +219,18 @@ var VideoChat = {
// When receiving a candidate over the socket, turn it back into a real
// RTCIceCandidate and add it to the peerConnection.
onCandidate: function (candidate) {
$("#remote-video-text").text("Found other user... connecting");
logIt("onCandidate");
// Update caption text
captionText.text("Found other user... connecting");
rtcCandidate = new RTCIceCandidate(JSON.parse(candidate));
logIt(
`<<< Received remote ICE candidate (${rtcCandidate.address} - ${rtcCandidate.relatedAddress})`
`onCandidate <<< Received remote ICE candidate (${rtcCandidate.address} - ${rtcCandidate.relatedAddress})`
);
VideoChat.peerConnection.addIceCandidate(rtcCandidate);
},
// Create an offer that contains the media capabilities of the browser.
createOffer: function () {
logIt("createOffer");
logIt(">>> Creating offer...");
logIt("createOffer >>> Creating offer...");
VideoChat.peerConnection.createOffer(
function (offer) {
// If the offer is created successfully, set it as the local description
@ -267,8 +273,7 @@ var VideoChat = {
// When a browser receives an offer, set up a callback to be run when the
// ephemeral token is returned from Twilio.
onOffer: function (offer) {
logIt("onOffer");
logIt("<<< Received offer");
logIt("onOffer <<< Received offer");
VideoChat.socket.on(
"token",
VideoChat.onToken(VideoChat.createAnswer(offer))
@ -278,30 +283,35 @@ var VideoChat = {
// When an answer is received, add it to the peerConnection as the remote description.
onAnswer: function (answer) {
logIt("onAnswer");
logIt("<<< Received answer");
logIt("onAnswer <<< Received answer");
var rtcAnswer = new RTCSessionDescription(JSON.parse(answer));
// Set remote description of RTCSession
VideoChat.peerConnection.setRemoteDescription(rtcAnswer);
VideoChat.localICECandidates.forEach((candidate) => {
// The caller now knows that the callee is ready to accept new ICE candidates, so sending the buffer over
VideoChat.localICECandidates.forEach((candidate) => {
logIt(`>>> Sending local ICE candidate (${candidate.address})`);
// Send ice candidate over websocket
VideoChat.socket.emit("candidate", JSON.stringify(candidate), roomHash);
});
// Reset the buffer of local ICE candidates. This is not really needed, but it's good practice
VideoChat.localICECandidates = [];
},
// Called when a stream is added to the peer connection
onAddStream: function (event) {
logIt("onAddStream");
logIt("<<< Received new stream from remote. Adding it...");
logIt("onAddStream <<< Received new stream from remote. Adding it...");
// Update remote video source
VideoChat.remoteVideo.srcObject = event.stream;
// Close the initial share url snackbar
Snackbar.close();
// Remove the loading gif from video
VideoChat.remoteVideo.style.background = "none";
// Update connection status
VideoChat.connected = true;
// Hide caption status text
captionText.fadeOut();
$("#local-video-text").fadeOut();
// Reposition local video repeatedly, as there is often a delay
// between adding a stream and the height of the video div changing
var timesRun = 0;
var interval = setInterval(function () {
timesRun += 1;
@ -472,12 +482,15 @@ function pauseVideo() {
// Swap camera / screen share
function swap() {
// Handle swap video before video call is connected
if (!VideoChat.connected) {
alert("You must join a call before you can share your screen.");
return;
}
// Store swap button icon and text
const swapIcon = document.getElementById("swap-icon");
const swapText = document.getElementById("swap-text");
// If mode is camera then switch to screen share
if (mode === "camera") {
// Show accept screenshare snackbar
Snackbar.show({
@ -488,22 +501,22 @@ function swap() {
actionTextColor: "#616161",
duration: 50000,
});
// Request screen share
// Request screen share, note we dont want to capture audio
// as we already have the stream from the Webcam
navigator.mediaDevices
.getDisplayMedia({
video: true,
audio: false,
})
.then(function (stream) {
// Close allow screenshare snackbar
Snackbar.close();
// Change display mode
mode = "screen";
// Update swap button icon and text
swapIcon.classList.remove("fa-desktop");
swapIcon.classList.add("fa-camera");
swapText.innerText = "Share Webcam";
if (videoIsPaused) {
pauseVideo();
}
switchStreamHelper(stream);
})
.catch(function (err) {
@ -511,15 +524,20 @@ function swap() {
logIt("Error sharing screen");
Snackbar.close();
});
// If mode is screenshare then switch to webcam
} else {
// Stop the screen share track
VideoChat.localVideo.srcObject.getTracks().forEach((track) => track.stop());
// Get webcam input
navigator.mediaDevices
.getUserMedia({
video: true,
audio: true,
})
.then(function (stream) {
// Change display mode
mode = "camera";
// Update swap button icon and text
swapIcon.classList.remove("fa-camera");
swapIcon.classList.add("fa-desktop");
swapText.innerText = "Share Screen";
@ -528,18 +546,26 @@ function swap() {
}
}
// Swap current video track with passed in stream
function switchStreamHelper(stream) {
// Get current video track
let videoTrack = stream.getVideoTracks()[0];
// Add listen for if the current track swaps, swap back
videoTrack.onended = function () {
swap();
};
if (VideoChat.connected) {
// Find sender
const sender = VideoChat.peerConnection.getSenders().find(function (s) {
// make sure tack types match
return s.track.kind === videoTrack.kind;
});
// Replace sender track
sender.replaceTrack(videoTrack);
}
// Update local video stream
VideoChat.localStream = videoTrack;
// Update local video object
VideoChat.localVideo.srcObject = stream;
// Unpause video on swap
if (videoIsPaused) {
@ -725,19 +751,21 @@ function toggleChat() {
function togglePictureInPicture() {
if (
"pictureInPictureEnabled" in document ||
pipVideo.webkitSetPresentationMode
remoteVideoVanilla.webkitSetPresentationMode
) {
if (document.pictureInPictureElement) {
document.exitPictureInPicture().catch((error) => {
logIt("Error exiting pip.");
logIt(error);
});
} else if (pipVideo.webkitPresentationMode === "inline") {
pipVideo.webkitSetPresentationMode("picture-in-picture");
} else if (pipVideo.webkitPresentationMode === "picture-in-picture") {
pipVideo.webkitSetPresentationMode("inline");
} else if (remoteVideoVanilla.webkitPresentationMode === "inline") {
remoteVideoVanilla.webkitSetPresentationMode("picture-in-picture");
} else if (
remoteVideoVanilla.webkitPresentationMode === "picture-in-picture"
) {
remoteVideoVanilla.webkitSetPresentationMode("inline");
} else {
pipVideo.requestPictureInPicture().catch((error) => {
remoteVideoVanilla.requestPictureInPicture().catch((error) => {
alert(
"You must be connected to another person to enter picture in picture."
);