diff --git a/public/scripts/call.js b/public/scripts/call.js
index 9f632e6..bcb2d2d 100644
--- a/public/scripts/call.js
+++ b/public/scripts/call.js
@@ -1,318 +1,153 @@
-'use strict';
-
-const baseURL = "/"
-
-let localVideo = document.querySelector('#localVideo');
-let remoteVideo = document.querySelector('#remoteVideo');
-
-let otherUser;
-let remoteRTCMessage;
-
-let iceCandidatesFromCaller = [];
-let peerConnection;
-let remoteStream;
-let localStream;
-
-let callInProgress = false;
-
-//event from html
-function call() {
- let userToCall = document.getElementById("callName").value;
- otherUser = userToCall;
-
- beReady()
- .then(bool => {
- processCall(userToCall)
+new AWN().asyncBlock(
+ fetch('https://video-chat-rbe8.onrender.com/start'),
+ 'Room Joined Successfully',
+)
+const socket = io('https://video-chat-rbe8.onrender.com/');
+const videoDiv = document.getElementById('videoDiv');
+const hideA = document.getElementById('hide-audio');
+const hideV = document.getElementById('hide-video');
+const room = document.getElementById("roomID");
+const myPeer = new Peer();
+let userStream;
+const urlParams = new URLSearchParams(window.location.search);
+const roomID = urlParams.get('id');
+room.innerText = `Your Room ID is ${roomID}, Happy Video-Chatting !!`;
+const video = document.createElement('video');
+video.muted = true;
+//To keep track of user connected
+const userConnected = {}
+// Asking for video and audio feature
+navigator.mediaDevices.getUserMedia({
+ video: true,
+ audio: true,
+
+}).then(stream => {
+ // Appending the user video to video element
+ addStream(video, stream);
+ userStream = stream;
+ //When Someone call us
+ myPeer.on('call', (call) => {
+ //--For receiving Calls--
+ //answered call and send our current stream
+ call.answer(stream)
+ //responding and adding the coming videoStream
+ const video = document.createElement('video');
+ call.on('stream', (userStream) => {
+ addStream(video, userStream)
})
-}
-
-//event from html
-function answer() {
- //do the event firing
-
- beReady()
- .then(bool => {
- processAccept();
- })
-
- document.getElementById("answer").style.display = "none";
-}
-
-let pcConfig = {
- "iceServers":
- [
- { "url": "stun:stun.jap.bloggernepal.com:5349" },
- {
- "url": "turn:turn.jap.bloggernepal.com:5349",
- "username": "guest",
- "credential": "somepassword"
- }
- ]
-};
-
-// Set up audio and video regardless of what devices are present.
-let sdpConstraints = {
- offerToReceiveAudio: true,
- offerToReceiveVideo: true
-};
-
-/////////////////////////////////////////////
-
-let socket;
-function connectSocket() {
- socket = io.connect(baseURL, {
- query: {
- name: myName
- }
- });
-
- socket.on('newCall', data => {
- //when other called you
- console.log(data);
- //show answer button
-
- otherUser = data.caller;
- remoteRTCMessage = data.rtcMessage
-
- // document.getElementById("profileImageA").src = baseURL + callerProfile.image;
- document.getElementById("callerName").innerHTML = otherUser;
- document.getElementById("call").style.display = "none";
- document.getElementById("answer").style.display = "block";
})
-
- socket.on('callAnswered', data => {
- //when other accept our call
- remoteRTCMessage = data.rtcMessage
- peerConnection.setRemoteDescription(new RTCSessionDescription(remoteRTCMessage));
-
- document.getElementById("calling").style.display = "none";
-
- console.log("Call Started. They Answered");
- // console.log(pc);
-
- callProgress()
+ // user joined the room
+ socket.on('user-join', (userID) => {
+ connectNewUser(userID, stream)
})
+}).catch(err => {
+ console.log(err);
+})
+// Hiding the video functionality
+hideV.addEventListener("click", () => {
+ const videoTrack = userStream.getTracks().find(track => track.kind === 'video');
+ if (videoTrack.enabled) {
+ videoTrack.enabled = false;
+ hideV.style = `width: 50px;
+ height: 50px;
+ cursor: pointer;
+ background-color: black;
+ border-radius: 100%;
+ padding: 8px;
+ margin: 10px;
+ margin-top: 40px;`
+ } else {
+ videoTrack.enabled = true;
+ hideV.style = `width: 50px;
+ height: 50px;
+ cursor: pointer;
+ background-color: white;
+ border-radius: 100%;
+ padding: 8px;
+ margin: 10px;
+ margin-top: 40px;`
+ }
- socket.on('ICEcandidate', data => {
- // console.log(data);
- console.log("GOT ICE candidate");
-
- let message = data.rtcMessage
-
- let candidate = new RTCIceCandidate({
- sdpMLineIndex: message.label,
- candidate: message.candidate
- });
-
- if (peerConnection) {
- console.log("ICE candidate Added");
- peerConnection.addIceCandidate(candidate);
- } else {
- console.log("ICE candidate Pushed");
- iceCandidatesFromCaller.push(candidate);
- }
-
- })
-
-}
-
-/**
- *
- * @param {Object} data
- * @param {number} data.name - the name of the user to call
- * @param {Object} data.rtcMessage - the rtc create offer object
- */
-function sendCall(data) {
- //to send a call
- console.log("Send Call");
- socket.emit("call", data);
-
- document.getElementById("call").style.display = "none";
- // document.getElementById("profileImageCA").src = baseURL + otherUserProfile.image;
- document.getElementById("otherUserNameCA").innerHTML = otherUser;
- document.getElementById("calling").style.display = "block";
-}
+})
-/**
- *
- * @param {Object} data
- * @param {number} data.caller - the caller name
- * @param {Object} data.rtcMessage - answer rtc sessionDescription object
- */
-function answerCall(data) {
- //to answer a call
- socket.emit("answerCall", data);
- callProgress();
-}
+// Disable audio functionality
+hideA.addEventListener("click", () => {
+ const videoTrack = userStream.getTracks().find(track => track.kind === 'audio');
+ if (videoTrack.enabled) {
+ videoTrack.enabled = false;
+ hideA.style = `width: 50px;
+ height: 50px;
+ cursor: pointer;
+ background-color: black;
+ border-radius: 100%;
+ padding: 8px;
+ margin: 10px;
+ margin-top: 40px;`
+ } else {
+ videoTrack.enabled = true;
+ hideA.style = `width: 50px;
+ height: 50px;
+ cursor: pointer;
+ background-color: white;
+ border-radius: 100%;
+ padding: 8px;
+ margin: 10px;
+ margin-top: 40px;`
-/**
- *
- * @param {Object} data
- * @param {number} data.user - the other user //either callee or caller
- * @param {Object} data.rtcMessage - iceCandidate data
- */
-function sendICEcandidate(data) {
- //send only if we have caller, else no need to
- console.log("Send ICE candidate");
- socket.emit("ICEcandidate", data)
-}
+ }
-function beReady() {
- return navigator.mediaDevices.getUserMedia({
- audio: true,
- video: true
- })
- .then(stream => {
- localStream = stream;
- localVideo.srcObject = stream;
+})
- return createConnectionAndAddStream()
- })
- .catch(function (e) {
- alert('getUserMedia() error: ' + e.name);
- });
-}
-function createConnectionAndAddStream() {
- createPeerConnection();
- peerConnection.addStream(localStream);
- return true;
-}
+//To close the conneciton of disconnected user
+socket.on('user-disconnected', (userID) => {
+ if (userConnected[userID]) {
+ userConnected[userID].close()
+ }
+})
-function processCall(userName) {
- peerConnection.createOffer((sessionDescription) => {
- peerConnection.setLocalDescription(sessionDescription);
- sendCall({
- name: userName,
- rtcMessage: sessionDescription
- })
- }, (error) => {
- console.log("Error");
- });
-}
+// When a new client connects
+myPeer.on('open', (id) => {
+ socket.emit('join-room', roomID, id)
+})
-function processAccept() {
- peerConnection.setRemoteDescription(new RTCSessionDescription(remoteRTCMessage));
- peerConnection.createAnswer((sessionDescription) => {
- peerConnection.setLocalDescription(sessionDescription);
+const connectNewUser = (userID, stream) => {
- if (iceCandidatesFromCaller.length > 0) {
- //I am having issues with call not being processed in real world (internet, not local)
- //so I will push iceCandidates I received after the call arrived, push it and, once we accept
- //add it as ice candidate
- //if the offer rtc message contains all thes ICE candidates we can ingore this.
- for (let i = 0; i < iceCandidatesFromCaller.length; i++) {
- //
- let candidate = iceCandidatesFromCaller[i];
- console.log("ICE candidate Added From queue");
- try {
- peerConnection.addIceCandidate(candidate).then(done => {
- console.log(done);
- }).catch(error => {
- console.log(error);
- })
- } catch (error) {
- console.log(error);
- }
- }
- iceCandidatesFromCaller = [];
- console.log("ICE candidate queue cleared");
- } else {
- console.log("NO Ice candidate in queue");
- }
+ //--Make call when new user connects to our room--
- answerCall({
- caller: otherUser,
- rtcMessage: sessionDescription
- })
+ const call = myPeer.call(userID, stream);
+ const video = document.createElement('video');
- }, (error) => {
- console.log("Error");
+ call.on('stream', (userStream) => {
+ addStream(video, userStream)
})
-}
-
-/////////////////////////////////////////////////////////
-
-function createPeerConnection() {
- try {
- peerConnection = new RTCPeerConnection(pcConfig);
- // peerConnection = new RTCPeerConnection();
- peerConnection.onicecandidate = handleIceCandidate;
- peerConnection.onaddstream = handleRemoteStreamAdded;
- peerConnection.onremovestream = handleRemoteStreamRemoved;
- console.log('Created RTCPeerConnnection');
- return;
- } catch (e) {
- console.log('Failed to create PeerConnection, exception: ' + e.message);
- alert('Cannot create RTCPeerConnection object.');
- return;
- }
-}
-
-function handleIceCandidate(event) {
- // console.log('icecandidate event: ', event);
- if (event.candidate) {
- console.log("Local ICE candidate");
- // console.log(event.candidate.candidate);
-
- sendICEcandidate({
- user: otherUser,
- rtcMessage: {
- label: event.candidate.sdpMLineIndex,
- id: event.candidate.sdpMid,
- candidate: event.candidate.candidate
- }
- })
-
- } else {
- console.log('End of candidates.');
- }
-}
-function handleRemoteStreamAdded(event) {
- console.log('Remote stream added.');
- remoteStream = event.stream;
- remoteVideo.srcObject = remoteStream;
-}
+ call.on('close', () => {
+ video.remove()
+ })
-function handleRemoteStreamRemoved(event) {
- console.log('Remote stream removed. Event: ', event);
- remoteVideo.srcObject = null;
- localVideo.srcObject = null;
+ //Add to object whenever new user joins
+ userConnected[userID] = call
}
-window.onbeforeunload = function () {
- if (callInProgress) {
- stop();
- }
-};
-
-function stop() {
- localStream.getTracks().forEach(track => track.stop());
- callInProgress = false;
- peerConnection.close();
- peerConnection = null;
- document.getElementById("call").style.display = "block";
- document.getElementById("answer").style.display = "none";
- document.getElementById("inCall").style.display = "none";
- document.getElementById("calling").style.display = "none";
- document.getElementById("endVideoButton").style.display = "none"
- otherUser = null;
-}
-
-function callProgress() {
+// Appending the video to video element
+const addStream = (video, stream) => {
+ video.srcObject = stream;
+ video.addEventListener('loadedmetadata', () => {
+ video.play()
+ })
- document.getElementById("videos").style.display = "block";
- document.getElementById("otherUserNameC").innerHTML = otherUser;
- document.getElementById("inCall").style.display = "block";
+ videoDiv.append(video)
- callInProgress = true;
}
-document.getElementById("my_ac_btn").onclick = ()=>{
- location.assign("https://busy-motion-6100-production.up.railway.app/dashboard.html")
-}
+// Hangup functionality
+let hangup = document.getElementById("hangup");
+hangup.onclick = () => {
+ // console.log("Call cut");
+ window.location.href("https://icons.veryicon.com/png/o/miscellaneous/cloud-call-center/hang-up.png")
+}
\ No newline at end of file
diff --git a/public/scripts/dashboard.js b/public/scripts/dashboard.js
index a26eb3e..521558d 100644
--- a/public/scripts/dashboard.js
+++ b/public/scripts/dashboard.js
@@ -36,7 +36,7 @@ window.addEventListener("load", () => {
const livebtn = document.getElementById("livemeeting").onclick = ()=>{
let x = myname.split(" ")
- location.assign(baseUrl+`videochat.html?name=${x[0]}&user_id=${myUserId}`)
+ location.assign(baseUrl+"/videochat.html")
}
diff --git a/public/scripts/index.js b/public/scripts/index.js
index 581af67..1af6a42 100644
--- a/public/scripts/index.js
+++ b/public/scripts/index.js
@@ -7,19 +7,16 @@ const baseUrl = "https://busy-motion-6100-production.up.railway.app/"
document.getElementById("logo").onclick = ()=>{
location.assign("../index.html")
}
-
if(token){
localStorage.setItem("token", JSON.stringify(token));
localStorage.setItem("refresh_token",refresh_token );
}
-
const gettoken = JSON.parse(localStorage.getItem("token"))
if(gettoken){
loginbtn.innerText = "My Account"
logoutbtn.style.display = "inline"
}
-
loginbtn.onclick = ()=>{
if(loginbtn.innerText == "My Account"){
location.assign("../dashboard.html")
diff --git a/public/signup.html b/public/signup.html
index fa40a8d..8e0a8b1 100644
--- a/public/signup.html
+++ b/public/signup.html
@@ -18,9 +18,6 @@
Welcome back to MeetEase
-
-
\ No newline at end of file
diff --git a/public/videochat.html b/public/videochat.html
index 6f55db0..ce36469 100644
--- a/public/videochat.html
+++ b/public/videochat.html
@@ -1,188 +1,38 @@
+
-