MigrateRepos/decentralized-video-chat
1
0
Fork 0
mirror of https://github.com/ianramzy/decentralized-video-chat.git synced 2024-06-26 18:02:34 +08:00
Code Issues Releases Wiki Activity

working with peerconnection dict for 2 ppl

Browse Source
This commit is contained in:
Taichi Kato 2020-05-29 16:49:03 +08:00
parent 79e6a860cd
commit da732735ae
2 changed files with 67 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
public/js/chat.js
View File

@ -29,12 +29,15 @@ const chatZone = $("#chat-zone");
var VideoChat = {
connected: false,
counter: 0,
willInitiateCall: false,
localICECandidates: [],
socket: io(),
remoteVideoWrapper: document.getElementById("wrapper"),
localVideo: document.getElementById("local-video"),
peerConnections: {},
recognition: undefined,
uuid: undefined,
// Call to getUserMedia (provided by adapter.js for cross browser compatibility)
// asking for access to both the video and audio streams. If the request is
@ -94,49 +97,47 @@ var VideoChat = {
VideoChat.localVideo.srcObject = stream;
// Now we're ready to join the chat room.
VideoChat.socket.emit("join", roomHash);
// Receive its own uuid
VideoChat.socket.on("uuid", (uuid) => (VideoChat.uuid = uuid));
// Add listeners to the websocket
VideoChat.socket.on("full", chatRoomFull);
VideoChat.socket.on("offer", VideoChat.onOffer);
VideoChat.socket.on("ready", VideoChat.readyToCall);
VideoChat.socket.on(
"willInitiateCall",
() => (VideoChat.willInitiateCall = true)
);
VideoChat.socket.on("willInitiateCall", VideoChat.call)
},
// 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) {
},
call: function (uuid, room) {
logIt("Initiating call");
VideoChat.startCall();
}
VideoChat.startCall(uuid);
},
// Set up a callback to run when we have the ephemeral token to use Twilio's TURN server.
startCall: function (event) {
startCall: function (uuid) {
logIt("startCall >>> Sending token request...");
VideoChat.socket.on("token", VideoChat.onToken(VideoChat.createOffer));
VideoChat.socket.on("token", VideoChat.onToken(function() {VideoChat.createOffer(uuid)}, uuid));
VideoChat.socket.emit("token", roomHash);
},
// When we receive the ephemeral token back from the server.
onToken: function (callback) {
onToken: function (callback, uuid) {
logIt("onToken");
return function (token) {
logIt("<<< Received token");
// Set up a new RTCPeerConnection using the token's iceServers.
VideoChat.peerConnection = new RTCPeerConnection({
VideoChat.peerConnections[uuid] = new RTCPeerConnection({
iceServers: token.iceServers,
});
// Add the local video stream to the peerConnection.
VideoChat.localStream.getTracks().forEach(function (track) {
VideoChat.peerConnection.addTrack(track, VideoChat.localStream);
VideoChat.peerConnections[uuid].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", {
dataChanel = VideoChat.peerConnections[uuid].createDataChannel("chat", {
negotiated: true,
// both peers must have same id
id: 0,
@ -161,8 +162,8 @@ var VideoChat = {
};
// Set up callbacks for the connection generating iceCandidates or
// receiving the remote media stream.
VideoChat.peerConnection.onicecandidate = VideoChat.onIceCandidate;
VideoChat.peerConnection.onaddstream = VideoChat.onAddStream;
VideoChat.peerConnections[uuid].onicecandidate = VideoChat.onIceCandidate;
VideoChat.peerConnections[uuid].onaddstream = VideoChat.onAddStream;
// Set up listeners on the socket
VideoChat.socket.on("candidate", VideoChat.onCandidate);
VideoChat.socket.on("answer", VideoChat.onAnswer);
@ -171,12 +172,12 @@ var VideoChat = {
recieveCaptions(captions)
);
// Called when there is a change in connection state
VideoChat.peerConnection.oniceconnectionstatechange = function (event) {
switch (VideoChat.peerConnection.iceConnectionState) {
VideoChat.peerConnections[uuid].oniceconnectionstatechange = function (event) {
switch (VideoChat.peerConnections[uuid].iceConnectionState) {
case "connected":
logIt("connected");
// Once connected we no longer have a need for the signaling server, so disconnect
VideoChat.socket.disconnect();
// VideoChat.socket.disconnect();
break;
case "disconnected":
logIt("disconnected");
@ -222,26 +223,26 @@ 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) {
onCandidate: function (candidate, uuid) {
// Update caption text
captionText.text("Found other user... connecting");
rtcCandidate = new RTCIceCandidate(JSON.parse(candidate));
logIt(
`onCandidate <<< Received remote ICE candidate (${rtcCandidate.address} - ${rtcCandidate.relatedAddress})`
);
VideoChat.peerConnection.addIceCandidate(rtcCandidate);
VideoChat.peerConnections[uuid].addIceCandidate(rtcCandidate);
},
// Create an offer that contains the media capabilities of the browser.
createOffer: function () {
logIt("createOffer >>> Creating offer...");
VideoChat.peerConnection.createOffer(
createOffer: function (uuid) {
console.log(">>> Creating offer to UUID: ", uuid, ". my UUID is", VideoChat.socket.id);
VideoChat.peerConnections[uuid].createOffer(
function (offer) {
// If the offer is created successfully, set it as the local description
// and send it over the socket connection to initiate the peerConnection
// on the other side.
VideoChat.peerConnection.setLocalDescription(offer);
VideoChat.socket.emit("offer", JSON.stringify(offer), roomHash);
VideoChat.peerConnections[uuid].setLocalDescription(offer);
VideoChat.socket.emit("offer", JSON.stringify(offer), roomHash, uuid);
},
function (err) {
logIt("failed offer creation");
@ -255,16 +256,16 @@ var VideoChat = {
// needs to be parsed into an RTCSessionDescription and added as the remote
// description to the peerConnection object. Then the answer is created in the
// same manner as the offer and sent over the socket.
createAnswer: function (offer) {
createAnswer: function (offer, uuid) {
logIt("createAnswer");
return function () {
logIt(">>> Creating answer...");
rtcOffer = new RTCSessionDescription(JSON.parse(offer));
VideoChat.peerConnection.setRemoteDescription(rtcOffer);
VideoChat.peerConnection.createAnswer(
VideoChat.peerConnections[uuid].setRemoteDescription(rtcOffer);
VideoChat.peerConnections[uuid].createAnswer(
function (answer) {
VideoChat.peerConnection.setLocalDescription(answer);
VideoChat.socket.emit("answer", JSON.stringify(answer), roomHash);
VideoChat.peerConnections[uuid].setLocalDescription(answer);
console.log(">>> Creating answer to UUID: ", uuid, ". my UUID is", VideoChat.socket.id);
VideoChat.socket.emit("answer", JSON.stringify(answer), roomHash, uuid);
},
function (err) {
logIt("Failed answer creation.");
@ -276,26 +277,27 @@ 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) {
onOffer: function (offer, uuid) {
logIt("onOffer <<< Received offer");
VideoChat.socket.on(
"token",
VideoChat.onToken(VideoChat.createAnswer(offer))
VideoChat.onToken(VideoChat.createAnswer(offer, uuid), uuid)
);
VideoChat.socket.emit("token", roomHash);
},
// When an answer is received, add it to the peerConnection as the remote description.
onAnswer: function (answer) {
logIt("onAnswer <<< Received answer");
onAnswer: function (answer, uuid) {
console.log("onAnswer <<< Received answer", uuid, ". my UUID is", VideoChat.socket.id);
// logIt("onAnswer <<< Received answer" + "");
var rtcAnswer = new RTCSessionDescription(JSON.parse(answer));
// Set remote description of RTCSession
VideoChat.peerConnection.setRemoteDescription(rtcAnswer);
VideoChat.peerConnections[uuid].setRemoteDescription(rtcAnswer);
// 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);
VideoChat.socket.emit("candidate", JSON.stringify(candidate), roomHash, uuid);
});
// Reset the buffer of local ICE candidates. This is not really needed, but it's good practice
VideoChat.localICECandidates = [];
@ -303,6 +305,11 @@ var VideoChat = {
// Called when a stream is added to the peer connection
onAddStream: function (event) {
if(VideoChat.counter > 4) {
VideoChat.socket.disconnect();
}else{
VideoChat.counter++;
}
logIt("onAddStream <<< Received new stream from remote. Adding it...");
// Create new remote video source in wrapper
// Create a <video> node
@ -451,7 +458,7 @@ function windowResized() {
function muteMicrophone() {
var audioTrack = null;
// Get audio track to mute
VideoChat.peerConnection.getSenders().find(function (s) {
VideoChat.peerConnections.first.getSenders().find(function (s) {
if (s.track.kind === "audio") {
audioTrack = s.track;
}

34
server.js
View File

@ -78,16 +78,24 @@ io.on("connection", function (socket) {
var numClients = typeof clients !== "undefined" ? clients.length : 0;
if (numClients === 0) {
socket.join(room);
} else if (numClients === 1) {
} else if (numClients < 3) {
socket.join(room);
// When the client is second to join the room, both clients are ready.
logIt("Connected clients", room)
for (var clientId in clients.sockets) {
logIt('ID: ' + clientId, room);
}
// When the client is not the first to join the room, all clients are ready.
logIt("Broadcasting ready message", room);
// First to join call initiates call
socket.broadcast.to(room).emit("willInitiateCall", room);
// Existing callers initiates call with user
socket.broadcast.to(room).emit("willInitiateCall", socket.id, room);
// Send its uui
// socket.emit("uuid", socket.id);
socket.emit("ready", room).to(room);
socket.broadcast.to(room).emit("ready", room);
} else {
logIt("room already full", room);
logIt("room already full with " + numClients + " people in the room.", room);
socket.emit("full", room);
}
});
@ -107,21 +115,21 @@ io.on("connection", function (socket) {
});
// Relay candidate messages
socket.on("candidate", function (candidate, room) {
socket.on("candidate", function (candidate, room, uuid) {
logIt("Received candidate. Broadcasting...", room);
socket.broadcast.to(room).emit("candidate", candidate);
io.to(uuid).emit("candidate", candidate, socket.id);
});
// Relay offers
socket.on("offer", function (offer, room) {
logIt("Received offer. Broadcasting...", room);
socket.broadcast.to(room).emit("offer", offer);
socket.on("offer", function (offer, room, uuid) {
logIt("Received offer from " + socket.id + " and emitting to " + uuid, room);
io.to(uuid).emit("offer", offer, socket.id);
});
// Relay answers
socket.on("answer", function (answer, room) {
logIt("Received answer. Broadcasting...", room);
socket.broadcast.to(room).emit("answer", answer);
socket.on("answer", function (answer, room, uuid) {
logIt("Received answer from " + socket.id + " and emitting to " + uuid, room);
io.to(uuid).emit("answer", answer, socket.id);
});
});