Lalit singh
3 years ago
committed by
GitHub
parent
fa619a3191
commit
9f509d68bd
@ -0,0 +1 @@
|
||||
web: node index.js
|
||||
@ -0,0 +1,124 @@
|
||||
## Debugit 2022
|
||||
[](https://hackalog.copsiitbhu.co.in/hackathon/debug-it-2022)
|
||||
|
||||
## Introduction
|
||||
Debugit is a week long hackathon open to ideas in a very literal sense. You can make anything from the projects' list we'll share or ignite the inquisitive Bob the Builder inside you to make something exciting and completely new!
|
||||
|
||||
## How to make a submission?
|
||||
Submissions are to be made through GitHub Pull Requests. To know more about how to make a GitHub Pull Request you can refer the [Fundamentals of Git](https://www.youtube.com/playlist?list=PLLt4yMoVgczVgFcTzT60U5IXtNX1qjHL9) playlist which contains everything that you would need.
|
||||
|
||||
## Make sure to include
|
||||
- A README.md file with your name, contact information, project description and how to run the code (and other necessary information).
|
||||
- A folder containing a demo video of your project.
|
||||
|
||||
## Here is a detailed step by step walkthrough if you don't know how to make a Debugit submission.
|
||||
|
||||
- Create a fork of this [repository](https://github.com/COPS-IITBHU/Debugit_2022)
|
||||
A fork is a copy of a repository. Forking a repository allows you to freely experiment with changes without affecting the original project.
|
||||
1. Click on the fork icon in the repository that you might find at the top right corner.
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
2. It will ask you what would you like to name the forked repository. By default they are named the same as the parent directory. Lets keep the name as it is.
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
- Clone the repository that you forked
|
||||
1. Find the link which you would need to clone and copy it.
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
2. Go to the directory in which you want to clone your repository and open the terminal.
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
3. Run the `git clone` command in the terminal (in case of windows, git bash terminal) and append the link that you copied.
|
||||
```
|
||||
git clone <repository_link>
|
||||
```
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
4. You will find that the repository is cloned in the directory.
|
||||
- Now you can open the directory in vs code and play with the code and complete your project.
|
||||
- After completing the project, its time to push your code:
|
||||
1. Open the vs code (or any other editor of your choice) terminal in the project folder.
|
||||
2. Create a new branch in which you want to push your code using the following code.
|
||||
```
|
||||
git checkout -b <branch_name>
|
||||
```
|
||||
You can name your branch whatever you like.
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
3. Check which branch are you on using the `git branch` command.
|
||||
```
|
||||
git branch
|
||||
```
|
||||
4. The branch name with a `*` on it is the current branch. If it is different from the branch that you created, then switch to your branch using the `git checkout`
|
||||
```
|
||||
git checkout <branch_name>
|
||||
```
|
||||
5. You can check the status of the files using
|
||||
```
|
||||
git status
|
||||
```
|
||||
6. Add (Stage) all the files you want to upload using the `git add` command.
|
||||
To add individual files run the following command:
|
||||
```
|
||||
git add <filename>
|
||||
```
|
||||
If you want to add all the files from your project directory you can run
|
||||
```
|
||||
git add .
|
||||
```
|
||||
It is recommended not to add the some directories like node_modules directory in your commit. You can prevent it by adding it in a `.gitignore` file (For more reference [here](https://www.w3schools.com/git/git_ignore.asp?remote=github)).
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
6. Commmit your code.
|
||||
You can commit all your staged code (to the local git repository) using the `git commit` command
|
||||
Run the following command:
|
||||
```
|
||||
git commit -m "first commit"
|
||||
```
|
||||
You can replace `first commit` with anything. It is actually a message to let you keep a brief track of what changes has been done in that commit.
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
7. Push your code.
|
||||
Push all of your commited code using the `git push` command.
|
||||
Run the following command:
|
||||
```
|
||||
git push --set-upstream origin <branch_name>
|
||||
```
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
- Make the Pull Request and submit your code.
|
||||
1. After you push your code, it gets uploaded to your forked directory and creates a new branch that you created.
|
||||
2. If it notices any difference in the code of your forked repo and the parent repo. It automatically shows you an option to create a pull request.
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
3. Write down a brief description of your project in the Pull Request description and give the PR a proper title and click on create pull request. Now GitHub might run some checks. If you pass all the checks, you are good to go.
|
||||
|
||||
Demo:
|
||||
|
||||
|
||||
|
||||
- Pat yourself on the back
|
||||
|
||||
|
||||
|
||||
> All The Best 🎉🎉.
|
||||
@ -0,0 +1,105 @@
|
||||
#header img {
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#root-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#left-div {
|
||||
width: 50vw;
|
||||
}
|
||||
|
||||
#large-message {
|
||||
margin-top: 25vh;
|
||||
font-size: 2.5rem;
|
||||
font-family: sans-serif;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
#small-message {
|
||||
margin-top: 1rem;
|
||||
font-size: 1.2rem;
|
||||
font-family: sans-serif;
|
||||
margin-left: 2rem;
|
||||
color: gray;
|
||||
}
|
||||
|
||||
#start-meeting a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#new-meeting-root {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 35vw;
|
||||
height: 10vh;
|
||||
margin-top: 3rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
#enter-meeting-link {
|
||||
border: 1px solid grey;
|
||||
border-radius: .2rem;
|
||||
font-size: 1.5rem;
|
||||
color: rgb(97, 94, 94);
|
||||
height: 2rem;
|
||||
padding: .5rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
#enter-meeting-link input {
|
||||
border: none;
|
||||
height: 2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
#join-button {
|
||||
font-family: sans-serif;
|
||||
color: #063d86;
|
||||
font-size: 1.2rem;
|
||||
height: 3rem;
|
||||
width: 4rem;
|
||||
border-radius: .2rem;
|
||||
line-height: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#join-button:hover {
|
||||
cursor: pointer;
|
||||
background-color: hsla(214, 93%, 47%, .1);
|
||||
}
|
||||
|
||||
#enter-meeting-link input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#start-meeting {
|
||||
width: 150px;
|
||||
height: 2.1rem;
|
||||
padding-top: 1rem;
|
||||
border-radius: .2rem;
|
||||
color: white;
|
||||
background-color: #096ae7;
|
||||
font-family: sans-serif;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#start-meeting:hover {
|
||||
background-color: #1b66ca;
|
||||
transition: background-color .5s ease-in-out;
|
||||
}
|
||||
|
||||
#right-div {
|
||||
width: 40vw;
|
||||
}
|
||||
|
||||
#right-div img {
|
||||
width: 40vw;
|
||||
margin-top: 20vh;
|
||||
margin-left: -5rem;
|
||||
}
|
||||
@ -0,0 +1,55 @@
|
||||
#left-message {
|
||||
text-align: center;
|
||||
margin-top: 10vh;
|
||||
font-family: sans-serif;
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
#span-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 36vw;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#rejoin {
|
||||
border: .5px solid lightgray;
|
||||
width: 100px;
|
||||
height: 1.8rem;
|
||||
font-family: sans-serif;
|
||||
color: #1B66CA;
|
||||
text-align: center;
|
||||
padding-top: .5rem;
|
||||
border-radius: .2rem;
|
||||
margin-right: 3rem;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#home {
|
||||
width: 200px;
|
||||
height: 1.8rem;
|
||||
padding-top: .5rem;
|
||||
border-radius: .2rem;
|
||||
background-color: #1B66CA;
|
||||
color: white;
|
||||
text-align: center;
|
||||
font-family: sans-serif;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
|
||||
#home:hover {
|
||||
background-color: #0d54af;
|
||||
transition: background-color .5s ease-in-out;
|
||||
}
|
||||
|
||||
#rejoin:hover {
|
||||
background-color: #f1f1f1;
|
||||
transition: background-color .5s ease-in-out;
|
||||
}
|
||||
|
||||
#root {
|
||||
text-align: center;
|
||||
}
|
||||
@ -0,0 +1,238 @@
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #202124;
|
||||
}
|
||||
|
||||
.centered {
|
||||
position: relative;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%)
|
||||
}
|
||||
|
||||
#main-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#video-grid {
|
||||
height: 90vh;
|
||||
width: 1000px;
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
margin: 1px solid black;
|
||||
}
|
||||
|
||||
#screen-share-grid {
|
||||
display: hidden;
|
||||
height: 90vh;
|
||||
width: 1000px;
|
||||
}
|
||||
|
||||
#screen-share-grid video {
|
||||
display: hidden;
|
||||
height: 80vh;
|
||||
width: 900px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
#chat-box {
|
||||
width: 350px;
|
||||
margin: 1rem;
|
||||
height: 78vh;
|
||||
border-radius: 1rem;
|
||||
background-color: rgb(236, 183, 226);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#chat-header {
|
||||
font-family: sans-serif;
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#close-chat-div {
|
||||
cursor: pointer;
|
||||
margin-right: .5rem;
|
||||
height: 22px;
|
||||
width: 23px;
|
||||
padding: .5rem;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
margin-top: -.5rem;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
#close-chat-div:hover {
|
||||
background-color: rgb(233, 233, 233);
|
||||
transition: background-color .5s ease-in-out;
|
||||
}
|
||||
|
||||
#chats {
|
||||
min-height: 57vh;
|
||||
overflow-y: scroll;
|
||||
margin-bottom: 1rem;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#form {
|
||||
background-color: #F1F3F4;
|
||||
border-radius: 1.5rem;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 80%;
|
||||
height: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
border: none;
|
||||
background-color: #F1F3F4;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background-color: #F1F3F4;
|
||||
font-size: 1.3rem;
|
||||
color: #1A73E8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-video {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 250px;
|
||||
height: 150px;
|
||||
object-fit: cover;
|
||||
border-radius: .5rem;
|
||||
margin: .5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.user-video:hover {
|
||||
opacity: .6;
|
||||
transition: opacity .5s ease-in-out;
|
||||
}
|
||||
|
||||
#controls-tab {
|
||||
background-color: #202124;
|
||||
width: 100%;
|
||||
height: 10vh;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
#time {
|
||||
color: white;
|
||||
margin-right: 4rem;
|
||||
font-family: sans-serif;
|
||||
padding-left: 2rem;
|
||||
font-size: 1.2rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-radius: 50%;
|
||||
height: 33px;
|
||||
width: 45px;
|
||||
font-size: 1.1rem;
|
||||
color: white;
|
||||
margin-right: 1rem;
|
||||
background-color: #434649;
|
||||
text-align: center;
|
||||
padding-top: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a .end-btn {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.end-btn {
|
||||
background-color: rgb(245, 69, 38);
|
||||
color: white;
|
||||
width: 60px;
|
||||
padding-top: 12px;
|
||||
height: 30px;
|
||||
border-radius: 2rem;
|
||||
font-size: 1.1rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.end-btn i {
|
||||
transform: rotateY(-180deg);
|
||||
}
|
||||
|
||||
.end-btn:hover {
|
||||
background-color: rgb(250, 64, 32);
|
||||
transition: background-color .5s ease-in-out;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #3a3c3d;
|
||||
transition: background-color .5s ease-in-out;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
#messages li {
|
||||
font-family: sans-serif;
|
||||
color: black;
|
||||
font-size: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: -1rem;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
#messages-info {
|
||||
font-size: .7rem;
|
||||
color: rgb(66, 66, 66);
|
||||
background-color: #F1F3F4;
|
||||
height: 2rem;
|
||||
width: 250px;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
border-radius: 1rem;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
video {
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
position: absolute;
|
||||
font-family: sans-serif;
|
||||
font-size: 4px;
|
||||
color: white;
|
||||
margin-top: -2rem;
|
||||
margin-left: 1rem;
|
||||
font-size: .7rem;
|
||||
z-index: 5;
|
||||
}
|
||||
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,261 @@
|
||||
const socket = io();
|
||||
const videoGrid = document.getElementById('video-grid'); //div where our video will be loaded
|
||||
|
||||
var myPeer = new Peer();
|
||||
let count = 0;
|
||||
let myVideoStream; //the video stram is stored in this variable
|
||||
const myVideo = document.createElement('video'); //div which contains the video
|
||||
let currentPeer = null;
|
||||
myVideo.muted = true;
|
||||
const peers = {};
|
||||
const names = {};
|
||||
const userName = prompt("Please enter your name", "");
|
||||
|
||||
function formatAMPM(date) {
|
||||
var hours = date.getHours();
|
||||
var minutes = date.getMinutes();
|
||||
var ampm = hours >= 12 ? 'PM' : 'AM';
|
||||
hours = hours % 12;
|
||||
hours = hours ? hours : 12; // the hour '0' should be '12'
|
||||
minutes = minutes < 10 ? '0' + minutes : minutes;
|
||||
var strTime = hours + ':' + minutes + ' ' + ampm;
|
||||
return strTime;
|
||||
}
|
||||
document.getElementById('time').innerText = formatAMPM(new Date) + " | Meeting";
|
||||
setInterval(setTime, 1000);
|
||||
function setTime() {
|
||||
document.getElementById('time').innerText = formatAMPM(new Date) + " | Meeting";
|
||||
}
|
||||
|
||||
document.getElementById('chat-box-btn').addEventListener('click', function () {
|
||||
if (document.getElementById('chat-box').style.display == "none") {
|
||||
document.getElementById('chat-box').style.display = "block"
|
||||
} else {
|
||||
document.getElementById('chat-box').style.display = "none"
|
||||
}
|
||||
})
|
||||
|
||||
document.getElementById('close-chat-div').addEventListener('click', function () {
|
||||
document.getElementById('chat-box').style.display = "none";
|
||||
})
|
||||
|
||||
navigator.mediaDevices.getUserMedia({
|
||||
video: true, //we want video
|
||||
audio: true //we want audio
|
||||
}).then(stream => {
|
||||
myVideoStream = stream; //storing the video stream returned to the myVideoStream variable
|
||||
addVideoStream(myVideo, stream, userName); //appended my stream to 'video-grid' div
|
||||
|
||||
myPeer.on('call', call => {
|
||||
call.answer(stream);
|
||||
console.log('Hello')
|
||||
const video = document.createElement('video');
|
||||
let html = '<i class="fas fa-microphone"></i>'
|
||||
video.innerHTML = html;
|
||||
call.on('stream', userVideoStream => {
|
||||
console.log('video displayed');
|
||||
addVideoStream(video, userVideoStream, userName)
|
||||
})
|
||||
currentPeer = call;
|
||||
})
|
||||
socket.on('user-connected', (userId) => {
|
||||
setTimeout(connectToNewUser, 1000, userId, userName, stream);
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
socket.on('user-disconnected', userId => {
|
||||
if (peers[userId]) peers[userId].close()
|
||||
})
|
||||
|
||||
myPeer.on('open', id => {
|
||||
socket.emit('join-room', ROOM_ID, id, userName);
|
||||
})
|
||||
|
||||
function connectToNewUser(userId, userName, stream) {
|
||||
const call = myPeer.call(userId, stream);
|
||||
const video = document.createElement('video');
|
||||
call.on('stream', userVideoStream => {
|
||||
addVideoStream(video, userVideoStream, userName);
|
||||
})
|
||||
call.on('close', () => {
|
||||
video.remove();
|
||||
})
|
||||
peers[userId] = call
|
||||
currentPeer = call;
|
||||
}
|
||||
|
||||
function addVideoStream(video, stream, userName) {
|
||||
video.srcObject = stream; //setting the source of my video
|
||||
video.addEventListener('loadedmetadata', () => {
|
||||
video.play(); //start to play the video once loaded
|
||||
});
|
||||
let outerDiv = document.createElement('div');
|
||||
outerDiv.classList.add('user-video');
|
||||
outerDiv.setAttribute('id', 'video-' + count);
|
||||
count++;
|
||||
outerDiv.appendChild(video);
|
||||
let nameDiv = document.createElement('div');
|
||||
let pinDiv = document.createElement('div');
|
||||
nameDiv.classList.add('user-name');
|
||||
nameDiv.innerHTML = userName;
|
||||
outerDiv.appendChild(nameDiv);
|
||||
videoGrid.appendChild(outerDiv); //appending to 'video-grid' div
|
||||
}
|
||||
|
||||
function muteUnmuteUser() {
|
||||
let enabled = myVideoStream.getAudioTracks()[0].enabled;
|
||||
if (enabled == true) {
|
||||
myVideoStream.getAudioTracks()[0].enabled = false;
|
||||
setUnmuteAudio();
|
||||
} else {
|
||||
myVideoStream.getAudioTracks()[0].enabled = true;
|
||||
setMuteAudio();
|
||||
}
|
||||
}
|
||||
|
||||
function turnUserVideoOnOff() {
|
||||
let enabled = myVideoStream.getVideoTracks()[0].enabled;
|
||||
if (enabled == true) {
|
||||
myVideoStream.getVideoTracks()[0].enabled = false;
|
||||
setStopVideo()
|
||||
} else {
|
||||
setPlayVideo()
|
||||
myVideoStream.getVideoTracks()[0].enabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
function setPlayVideo() {
|
||||
const html = `<i class="fas fa-video"></i>`
|
||||
document.getElementById('video-off').innerHTML = html;
|
||||
document.getElementById('video-off').style.backgroundColor = '#434649';
|
||||
}
|
||||
|
||||
function setStopVideo() {
|
||||
const html = `<i class="stop fas fa-video-slash"></i>`
|
||||
document.getElementById('video-off').innerHTML = html;
|
||||
document.getElementById('video-off').style.backgroundColor = 'tomato';
|
||||
}
|
||||
|
||||
function setMuteAudio() {
|
||||
const html = `<i class="fas fa-microphone"></i>`
|
||||
document.getElementById('mute').innerHTML = html;
|
||||
document.getElementById('mute').style.backgroundColor = '#434649';
|
||||
}
|
||||
|
||||
function setUnmuteAudio() {
|
||||
const html = `<i class="unmute fas fa-microphone-slash"></i>`
|
||||
document.getElementById('mute').innerHTML = html;
|
||||
document.getElementById('mute').style.backgroundColor = 'tomato';
|
||||
}
|
||||
|
||||
document.getElementById('video-off').addEventListener('click', turnUserVideoOnOff);
|
||||
document.getElementById('mute').addEventListener('click', muteUnmuteUser);
|
||||
|
||||
function urlify(text) {
|
||||
var urlRegex = /(https?:\/\/[^\s]+)/g;
|
||||
return text.replace(urlRegex, function(url) {
|
||||
return '<a href="' + url + '">' + url + '</a>';
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
$('form').submit(function (e) {
|
||||
e.preventDefault();
|
||||
let inputMsg = $('input').val();
|
||||
if (inputMsg != '')
|
||||
socket.emit('send-message', inputMsg, userName);
|
||||
$('input').val('');
|
||||
})
|
||||
|
||||
socket.on('recieve-message', (inputMsg, userName) => {
|
||||
inputMsg = urlify(inputMsg);
|
||||
$('#messages').append(`<li><b style="font-size:.9rem">${userName}</b> ${formatAMPM(new Date)}<br/><br/>${inputMsg}</li>`);
|
||||
console.log('From server :: ', inputMsg);
|
||||
})
|
||||
|
||||
const scrollToBottom = () => {
|
||||
var d = $('#chats');
|
||||
d.scrollTop(d.prop("scrollHeight"));
|
||||
}
|
||||
scrollToBottom();
|
||||
|
||||
|
||||
var screenSharing = false
|
||||
function startScreenShare() {
|
||||
if (screenSharing) {
|
||||
stopScreenSharing()
|
||||
}
|
||||
navigator.mediaDevices.getDisplayMedia({ video: true }).then((stream) => {
|
||||
screenStream = stream;
|
||||
let videoTrack = screenStream.getVideoTracks()[0];
|
||||
videoTrack.onended = () => {
|
||||
console.log('Screen sharing stopped!');
|
||||
stopScreenSharing()
|
||||
}
|
||||
if (myPeer) {
|
||||
let sender = currentPeer.peerConnection.getSenders().find(function (s) {
|
||||
return s.track.kind == videoTrack.kind;
|
||||
})
|
||||
sender.replaceTrack(videoTrack)
|
||||
screenSharing = true
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function stopScreenSharing() {
|
||||
if (!screenSharing) return;
|
||||
let videoTrack = myVideoStream.getVideoTracks()[0];
|
||||
if (myPeer) {
|
||||
let sender = currentPeer.peerConnection.getSenders().find(function (s) {
|
||||
return s.track.kind == videoTrack.kind;
|
||||
})
|
||||
sender.replaceTrack(videoTrack)
|
||||
}
|
||||
screenStream.getTracks().forEach(function (track) {
|
||||
track.stop();
|
||||
});
|
||||
screenSharing = false
|
||||
}
|
||||
|
||||
document.getElementById('screen-share-btn').addEventListener('click', startScreenShare);
|
||||
|
||||
var isExpanded = false;
|
||||
document.addEventListener('click', function(e) {
|
||||
let clickedElem = e.target;
|
||||
let clickedElemId = e.target.id;
|
||||
if(isExpanded == false) {
|
||||
console.log(clickedElem);
|
||||
if(clickedElem.classList.contains('user-video')) {
|
||||
let ele = document.getElementById(clickedElemId);
|
||||
//ele.style.height = "80vh";
|
||||
// ele.style.width = "70vw";
|
||||
ele.firstChild.style.height = "80vh";
|
||||
ele.firstChild.style.width = "70vw";
|
||||
isExpanded = true;
|
||||
let arr = document.getElementsByClassName('user-video');
|
||||
for(let i=0;i<arr.length;i++) {
|
||||
let elem = arr[i];
|
||||
if(elem.id != clickedElemId) {
|
||||
elem.style.display = "none";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}else {
|
||||
if(clickedElem.classList.contains('user-video')) {
|
||||
let ele = document.getElementById(clickedElemId);
|
||||
//ele.style.height = "150px";
|
||||
//ele.style.width = "250px";
|
||||
ele.firstChild.style.height = "200px";
|
||||
ele.firstChild.style.width = "300px";
|
||||
document.getElementById('video-grid').style.display = "flex";
|
||||
isExpanded = false;
|
||||
let arr = document.getElementsByClassName('user-video');
|
||||
for(let i=0;i<arr.length;i++) {
|
||||
arr[i].style.display = "flex";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
})
|
||||
|
After Width: | Height: | Size: 99 KiB |
@ -0,0 +1,18 @@
|
||||
//used to get unique room ids
|
||||
const { v4: uuidv4 } = require('uuid');
|
||||
|
||||
module.exports.renderHome = function(req, res) {
|
||||
return res.render('home');
|
||||
}
|
||||
|
||||
module.exports.createNewRoom = function(req, res) {
|
||||
return res.redirect(`/room/${uuidv4()}`);
|
||||
}
|
||||
|
||||
module.exports.joinRoom = function(req, res) {
|
||||
return res.render('room', { roomId: req.params.room });
|
||||
}
|
||||
|
||||
module.exports.leaveRoom = function(req, res) {
|
||||
return res.render('meeting_end', { roomId: req.params.room });
|
||||
}
|
||||
@ -0,0 +1,58 @@
|
||||
//requiring express
|
||||
|
||||
const express = require('express');
|
||||
|
||||
//app has all the properties of express
|
||||
|
||||
const app = express();
|
||||
//creting http server
|
||||
|
||||
const server = require('http').Server(app);
|
||||
|
||||
//socket runs on this server
|
||||
const io = require('socket.io')(server);
|
||||
|
||||
//WebRTC api for real time media communication
|
||||
const { ExpressPeerServer } = require('peer');
|
||||
//port on which server runs
|
||||
const PORT = process.env.PORT || 8000;
|
||||
|
||||
const peerServer = ExpressPeerServer(server, {
|
||||
debug: true
|
||||
});
|
||||
|
||||
//setting up static path
|
||||
app.use(express.static('./assets'));
|
||||
//setting up view engine
|
||||
app.set('view engine', 'ejs');
|
||||
//setting up view path
|
||||
app.set('views', './views');
|
||||
|
||||
|
||||
app.use('/', require('./routes/index'));
|
||||
|
||||
|
||||
//socket handels users joining/leaving and messaging
|
||||
io.on('connection', socket => {
|
||||
//request for joining room
|
||||
socket.on('join-room', (roomId, userId, userName) => {
|
||||
//joining the mentioned room
|
||||
socket.join(roomId);
|
||||
|
||||
socket.broadcast.to(roomId).emit('user-connected', userId, userName);
|
||||
socket.on('send-message', (inputMsg, userName) => {
|
||||
io.to(roomId).emit('recieve-message', inputMsg, userName);
|
||||
})
|
||||
socket.on('disconnect', () => {
|
||||
socket.broadcast.to(roomId).emit('user-disconnected', userId, userName);
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// running the server
|
||||
server.listen(PORT, function(err) {
|
||||
if (err) {
|
||||
console.log(`Error :: ${err} occured while starting the server in index.js!`);
|
||||
}
|
||||
console.log(`Server is up and running on port ${PORT}`);
|
||||
});
|
||||
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 29 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 276 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 77 KiB |
|
After Width: | Height: | Size: 55 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 1.7 MiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 101 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,24 @@
|
||||
{
|
||||
"name": "zoom-clone",
|
||||
"version": "1.0.0",
|
||||
"description": "A Zoom Conferencing App Clone",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "nodemon index.js"
|
||||
},
|
||||
"author": "Lalit singh",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": "16.14.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"ejs": "^3.1.6",
|
||||
"express": "^4.17.3",
|
||||
"heroku": "^7.59.0",
|
||||
"nodemon": "^2.0.14",
|
||||
"peer": "^0.6.1",
|
||||
"socket.io": "^4.2.0",
|
||||
"uuid": "^8.3.2"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const indexController = require('../controller/index_controller');
|
||||
|
||||
|
||||
router.get('/', indexController.renderHome);
|
||||
router.use('/room', require('./room.js'));
|
||||
|
||||
module.exports = router;
|
||||
@ -0,0 +1,13 @@
|
||||
const express = require('express');
|
||||
const router = express.Router();
|
||||
const indexController = require('../controller/index_controller');
|
||||
|
||||
//route for new meeting --> creates a new room
|
||||
router.get('/', indexController.createNewRoom);
|
||||
|
||||
//route for opening a specific room
|
||||
router.get('/:room', indexController.joinRoom);
|
||||
|
||||
router.get('/end/:room', indexController.leaveRoom);
|
||||
|
||||
module.exports = router;
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="/css/meeting_end_style.css">
|
||||
<title>Meet</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root">
|
||||
<div id="left-message">You left the meet</div>
|
||||
<div id="span-div">
|
||||
<a href="/room/<%= roomId %>">
|
||||
<div id="rejoin">Rejoin</div>
|
||||
</a>
|
||||
<a href="/">
|
||||
<div id="home">Return to home screen</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" type="text/css" href="/css/style.css">
|
||||
<title>Meet</title>
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
|
||||
<script src="https://kit.fontawesome.com/6f0f83005a.js" crossorigin="anonymous"></script>
|
||||
<script>
|
||||
const ROOM_ID = "<%= roomId %>";
|
||||
</script>
|
||||
<script defer src="https://unpkg.com/peerjs@1.2.0/dist/peerjs.min.js"></script>
|
||||
<script src="/socket.io/socket.io.js" defer></script>
|
||||
<script src="/js/script.js" defer></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="main-div">
|
||||
<div id="video-grid"></div>
|
||||
<div id="screen-share-grid"></div>
|
||||
<div id="chat-box">
|
||||
<div id="chat-header">
|
||||
<div>In-call messages</div>
|
||||
<div id="close-chat-div"><i class="fa fa-times" aria-hidden="true"></i></div>
|
||||
</div>
|
||||
<div id="chats">
|
||||
<div id="messages-info">Messages can only be seen by people in the call and are deleted when the call ends</div>
|
||||
<ul id="messages">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div id="form">
|
||||
<form>
|
||||
<input type="text" id="message-form" placeholder="Send a message to everyone" autocomplete="off">
|
||||
<button type="submit"><i class="fa fa-paper-plane"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="controls-tab">
|
||||
<div id="time"></div>
|
||||
<div class="icons">
|
||||
<div class="btn" id="mute"><i class="fa fa-microphone"></i></div>
|
||||
<div class="btn" id="video-off"><i class="fa fa-video-camera"></i></div>
|
||||
<div class="btn" id="screen-share-btn"><i class="fa fa-upload"></i></div>
|
||||
<a href="/room/end/<%= roomId %>">
|
||||
<div class="end-btn"><i class="fa fa-phone" aria-hidden="true"></i></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<div class="btn" id="chat-box-btn"><i class="fas fa-comment-alt"></i></i>
|
||||
</div>
|
||||
<div class="btn"><i class="fas fa-info-circle"></i></div>
|
||||
<div class="btn"><i class="fas fa-user-friends"></i>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in new issue