diff --git a/User.js b/User.js
new file mode 100644
index 0000000..04a4963
--- /dev/null
+++ b/User.js
@@ -0,0 +1,8 @@
+module.exports = class User {
+ constructor(setup) {
+ this.name = setup.name;
+ this.id = setup.socket.id;
+ this.room = setup.socket.room;
+ this.socket = setup.socket;
+ }
+}
\ No newline at end of file
diff --git a/public/style.css b/public/css/style.css
similarity index 87%
rename from public/style.css
rename to public/css/style.css
index 5966163..780bc3d 100644
--- a/public/style.css
+++ b/public/css/style.css
@@ -1,3 +1,16 @@
+#video-grid {
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+}
+
+video {
+ height: 300px;
+ width: 400px;
+ object-fit: cover;
+ padding: 8px;
+}
+
.main {
height: 100vh;
display: flex;
@@ -77,7 +90,7 @@
overflow-y: auto;
}
-.messages{
+.messages {
color: white;
list-style: none;
}
@@ -98,7 +111,7 @@
color: #EB534B;
}
-.unmute, .stop {
+.unmute,
+.stop {
color: #CC3B33;
-}
-
+}
\ No newline at end of file
diff --git a/public/js/script.js b/public/js/script.js
new file mode 100644
index 0000000..9850d35
--- /dev/null
+++ b/public/js/script.js
@@ -0,0 +1,135 @@
+const socket = io()
+const videoGrid = document.getElementById('video-grid');
+//NOTE: removing settings from peer constructor solved join-room event not emitting!
+const myPeer = new Peer();
+
+let myVideoStream;
+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)
+ })
+ })
+
+ socket.on('user-connected', userId => {
+ alert("New user!");
+ connectToNewUser(userId, stream)
+ })
+ // input value
+ let text = $("input");
+ // when press enter send message
+ $('html').keydown(function(e) {
+ let value = text.val();
+ if (e.which == 13 && value.length !== 0) {
+ socket.emit('message', value);
+ text.val('')
+
+ }
+ });
+ socket.on("createMessage", message => {
+ $("ul").append(`user
${message}`);
+ scrollToBottom()
+ })
+})
+
+socket.on('user-disconnected', userId => {
+ if (peers[userId]) peers[userId].close()
+})
+
+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()
+ })
+
+ peers[userId] = call
+}
+
+function addVideoStream(video, stream) {
+ video.srcObject = stream
+ video.addEventListener('loadedmetadata', () => {
+ video.play()
+ })
+ videoGrid.append(video)
+}
+
+
+
+const scrollToBottom = () => {
+ var d = $('.main__chat_window');
+ d.scrollTop(d.prop("scrollHeight"));
+}
+
+
+const muteUnmute = () => {
+ const enabled = myVideoStream.getAudioTracks()[0].enabled;
+ if (enabled) {
+ myVideoStream.getAudioTracks()[0].enabled = false;
+ setUnmuteButton();
+ } else {
+ setMuteButton();
+ myVideoStream.getAudioTracks()[0].enabled = true;
+ }
+}
+
+const playStop = () => {
+ console.log('object')
+ let enabled = myVideoStream.getVideoTracks()[0].enabled;
+ if (enabled) {
+ myVideoStream.getVideoTracks()[0].enabled = false;
+ setPlayVideo()
+ } else {
+ setStopVideo()
+ myVideoStream.getVideoTracks()[0].enabled = true;
+ }
+}
+
+const setMuteButton = () => {
+ const html = `
+
+ Mute
+ `
+ document.querySelector('.main__mute_button').innerHTML = html;
+}
+
+const setUnmuteButton = () => {
+ const html = `
+
+ Unmute
+ `
+ document.querySelector('.main__mute_button').innerHTML = html;
+}
+
+const setStopVideo = () => {
+ const html = `
+
+ Stop Video
+ `
+ document.querySelector('.main__video_button').innerHTML = html;
+}
+
+const setPlayVideo = () => {
+ const html = `
+
+ Play Video
+ `
+ document.querySelector('.main__video_button').innerHTML = html;
+}
\ No newline at end of file
diff --git a/public/script.js b/public/script.js
deleted file mode 100644
index d61df4a..0000000
--- a/public/script.js
+++ /dev/null
@@ -1,134 +0,0 @@
-const socket = io('/')
-const videoGrid = document.getElementById('video-grid')
-const myPeer = new Peer(undefined, {
- path: '/peerjs',
- host: '/',
- port: '443'
-})
-let myVideoStream;
-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)
- })
- })
-
- 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(`user
${message}`);
- scrollToBottom()
- })
-})
-
-socket.on('user-disconnected', userId => {
- if (peers[userId]) peers[userId].close()
-})
-
-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()
- })
-
- peers[userId] = call
-}
-
-function addVideoStream(video, stream) {
- video.srcObject = stream
- video.addEventListener('loadedmetadata', () => {
- video.play()
- })
- videoGrid.append(video)
-}
-
-
-
-const scrollToBottom = () => {
- var d = $('.main__chat_window');
- d.scrollTop(d.prop("scrollHeight"));
-}
-
-
-const muteUnmute = () => {
- const enabled = myVideoStream.getAudioTracks()[0].enabled;
- if (enabled) {
- myVideoStream.getAudioTracks()[0].enabled = false;
- setUnmuteButton();
- } else {
- setMuteButton();
- myVideoStream.getAudioTracks()[0].enabled = true;
- }
-}
-
-const playStop = () => {
- console.log('object')
- let enabled = myVideoStream.getVideoTracks()[0].enabled;
- if (enabled) {
- myVideoStream.getVideoTracks()[0].enabled = false;
- setPlayVideo()
- } else {
- setStopVideo()
- myVideoStream.getVideoTracks()[0].enabled = true;
- }
-}
-
-const setMuteButton = () => {
- const html = `
-
- Mute
- `
- document.querySelector('.main__mute_button').innerHTML = html;
-}
-
-const setUnmuteButton = () => {
- const html = `
-
- Unmute
- `
- document.querySelector('.main__mute_button').innerHTML = html;
-}
-
-const setStopVideo = () => {
- const html = `
-
- Stop Video
- `
- document.querySelector('.main__video_button').innerHTML = html;
-}
-
-const setPlayVideo = () => {
- const html = `
-
- Play Video
- `
- document.querySelector('.main__video_button').innerHTML = html;
-}
diff --git a/server.js b/server.js
index 0f42a1b..311071e 100644
--- a/server.js
+++ b/server.js
@@ -1,14 +1,17 @@
const express = require('express')
const app = express()
-// const cors = require('cors')
-// app.use(cors())
+ // const cors = require('cors')
+ // app.use(cors())
const server = require('http').Server(app)
const io = require('socket.io')(server)
const { ExpressPeerServer } = require('peer');
const peerServer = ExpressPeerServer(server, {
- debug: true
+ debug: true
});
-const { v4: uuidV4 } = require('uuid')
+const User = require("./User.js");
+const { v4: uuidV4 } = require('uuid');
+
+let USER_LIST = {};
app.use('/peerjs', peerServer);
@@ -16,27 +19,54 @@ app.set('view engine', 'ejs')
app.use(express.static('public'))
app.get('/', (req, res) => {
- res.redirect(`/${uuidV4()}`)
+ res.redirect(`/${uuidV4()}`)
})
app.get('/:room', (req, res) => {
- res.render('room', { roomId: req.params.room })
+ res.render('room', { roomId: req.params.room })
})
+/**
+ * @description Emits message to all users in a specific room
+ * @param room {string} - Room name/id
+ * @param emit {string} - Name of message to emit
+ * @param message {any} - Message to be sent
+ **/
+
+const sendToAllRoom = (room, emit, message) => {
+ for (let i in USER_LIST) {
+ if (USER_LIST[i].room == room) {
+ USER_LIST[i].socket.emit(emit, message);
+ }
+ }
+}
+
io.on('connection', socket => {
- socket.on('join-room', (roomId, userId) => {
- socket.join(roomId)
- socket.to(roomId).broadcast.emit('user-connected', userId);
+ //DEBUG: JOIN-ROOM NOT BEING SENT
+ //FIXED: JOIN-ROOM SENT CREATED HELPER FUNCTION ABOVE CALLED SENDTOALLROOM
+ socket.on('join-room', (roomId, userId) => {
+ socket.id = userId;
+ socket.room = roomId;
+ socket.join(roomId)
+
+ sendToAllRoom(roomId, 'user-connected', userId);
+ console.log(`joined ${roomId}`);
+
+ USER_LIST[socket.id] = new User({ name: `User_${USER_LIST.length}`, socket: socket });
+ });
+
// messages
socket.on('message', (message) => {
- //send message to the same room
- io.to(roomId).emit('createMessage', message)
- });
+ console.log(message, USER_LIST[socket.id].room);
+ //send message to the same room
+ sendToAllRoom(USER_LIST[socket.id].room, "createMessage", message);
+ });
socket.on('disconnect', () => {
- socket.to(roomId).broadcast.emit('user-disconnected', userId)
+ sendToAllRoom(USER_LIST[socket.id].room, "user-disconnected", socket.id);
+ delete USER_LIST[socket.id];
})
- })
})
-server.listen(process.env.PORT||3030)
+server.listen(process.env.PORT || 3030);
+console.log("server started");
\ No newline at end of file
diff --git a/views/room.ejs b/views/room.ejs
index b05ca4d..1d5c427 100644
--- a/views/room.ejs
+++ b/views/room.ejs
@@ -1,88 +1,78 @@
+
-
-
- Document
-
-
-
-
-
-
-
-
-
-
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
- Mute
-
-
-
- Stop Video
-
+
+
+
-
-
-
- Security
-
-
-
- Participants
-
-
-
- Chat
-
+
+
+
+
+ Mute
+
+
+
+ Stop Video
+
+
+
+
+
+ Security
+
+
+
+ Participants
+
+
+
+ Chat
+
+
+
-
+
-
-
+
+
+
+
+
+
+
+
-
+
+