Fixed p2p connection not connecting, fixed room broadcast bugs and text messaging works now

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;
+    }
+}

public/style.css → 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;
-}
-
+}

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(`<li class="message"><b>user</b><br/>${message}</li>`);
+        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 = `
+    <i class="fas fa-microphone"></i>
+    <span>Mute</span>
+  `
+    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;
+}
+
+const setStopVideo = () => {
+    const html = `
+    <i class="fas fa-video"></i>
+    <span>Stop Video</span>
+  `
+    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;
+}