Skip to content

commit-1 #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mk-Guvi wants to merge 1 commit into
base: master
Choose a base branch
from
Open

commit-1 #36

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 78 additions & 79 deletions public/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,82 +1,81 @@
const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const socket = io("/");
const videoGrid = document.getElementById("video-grid");
const myPeer = new Peer(undefined, {
path: '/peerjs',
host: '/',
port: '443'
})
path: "/peerjs",
host: "/",
port: "3030"
});
let myVideoStream;
const myVideo = document.createElement('video')
const myVideo = document.createElement("video");
myVideo.muted = true;
const peers = {}
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
myVideoStream = stream;
addVideoStream(myVideo, stream)
myPeer.on('call', call => {
call.answer(stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
const peers = {};
navigator.mediaDevices
.getUserMedia({
video: true,
audio: true
})

socket.on('user-connected', userId => {
connectToNewUser(userId, stream)
})
// input value
let text = $("input");
// when press enter send message
$('html').keydown(function (e) {
if (e.which == 13 && text.val().length !== 0) {
socket.emit('message', text.val());
text.val('')
}
.then((stream) => {
myVideoStream = stream;
addVideoStream(myVideo, stream);
myPeer.on("call", (call) => {
call.answer(stream);
const video = document.createElement("video");
call.on("stream", (userVideoStream) => {
addVideoStream(video, userVideoStream);
});
});

socket.on("user-connected", (userId) => {
connectToNewUser(userId, stream);
});
// input value
let text = $("input");
// when press enter send message
$("html").keydown(function (e) {
if (e.which == 13 && text.val().length !== 0) {
socket.emit("message", text.val());
text.val("");
}
});
socket.on("createMessage", (message) => {
$("ul").append(`<li class="message"><b>user</b><br/>${message}</li>`);
scrollToBottom();
});
});
socket.on("createMessage", message => {
$("ul").append(`<li class="message"><b>user</b><br/>${message}</li>`);
scrollToBottom()
})
})

socket.on('user-disconnected', userId => {
if (peers[userId]) peers[userId].close()
})
socket.on("user-disconnected", (userId) => {
if (peers[userId]) peers[userId].close();
});

myPeer.on('open', id => {
socket.emit('join-room', ROOM_ID, id)
})
myPeer.on("open", (id) => {
socket.emit("join-room", ROOM_ID, id);
});

function connectToNewUser(userId, stream) {
const call = myPeer.call(userId, stream)
const video = document.createElement('video')
call.on('stream', userVideoStream => {
addVideoStream(video, userVideoStream)
})
call.on('close', () => {
video.remove()
})
const call = myPeer.call(userId, stream);
const video = document.createElement("video");
call.on("stream", (userVideoStream) => {
addVideoStream(video, userVideoStream);
});
call.on("close", () => {
video.remove();
});

peers[userId] = call
peers[userId] = call;
}

function addVideoStream(video, stream) {
video.srcObject = stream
video.addEventListener('loadedmetadata', () => {
video.play()
})
videoGrid.append(video)
video.srcObject = stream;
video.addEventListener("loadedmetadata", () => {
video.play();
});
videoGrid.append(video);
}



const scrollToBottom = () => {
var d = $('.main__chat_window');
var d = $(".main__chat_window");
d.scrollTop(d.prop("scrollHeight"));
}

};

const muteUnmute = () => {
const enabled = myVideoStream.getAudioTracks()[0].enabled;
Expand All @@ -87,48 +86,48 @@ const muteUnmute = () => {
setMuteButton();
myVideoStream.getAudioTracks()[0].enabled = true;
}
}
};

const playStop = () => {
console.log('object')
console.log("object");
let enabled = myVideoStream.getVideoTracks()[0].enabled;
if (enabled) {
myVideoStream.getVideoTracks()[0].enabled = false;
setPlayVideo()
setPlayVideo();
} else {
setStopVideo()
setStopVideo();
myVideoStream.getVideoTracks()[0].enabled = true;
}
}
};

const setMuteButton = () => {
const html = `
<i class="fas fa-microphone"></i>
<span>Mute</span>
`
document.querySelector('.main__mute_button').innerHTML = html;
}
`;
document.querySelector(".main__mute_button").innerHTML = html;
};

const setUnmuteButton = () => {
const html = `
<i class="unmute fas fa-microphone-slash"></i>
<span>Unmute</span>
`
document.querySelector('.main__mute_button').innerHTML = html;
}
`;
document.querySelector(".main__mute_button").innerHTML = html;
};

const setStopVideo = () => {
const html = `
<i class="fas fa-video"></i>
<span>Stop Video</span>
`
document.querySelector('.main__video_button').innerHTML = html;
}
`;
document.querySelector(".main__video_button").innerHTML = html;
};

const setPlayVideo = () => {
const html = `
<i class="stop fas fa-video-slash"></i>
<span>Play Video</span>
`
document.querySelector('.main__video_button').innerHTML = html;
}
`;
document.querySelector(".main__video_button").innerHTML = html;
};