Can not answer the call when new user join room

[Khangithub]

i am following their tutorial at this point https://youtu.be/ZVznzY7EjuY?t=6023

Before that, everything worked perfectly, but i can not answer the call when new user join room and their is no new video tag appended in the video grid.

This is my server.js

const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const { v4: uuidv4 } = require('uuid')
const { ExpressPeerServer } = require('peer')
const peerServer = ExpressPeerServer(server, {
  debug: true
})

app.set('view engine', 'ejs')
app.use(express.static('public'))

app.use("/peerjs", peerServer)
app.get('/', (req, res) => {
  res.redirect(`/${uuidv4()}`)
})

app.get('/:room', (req, res) => {
  res.render('room', { roomId: req.params.roomId })
})

io.on('connection', socket => {
  socket.on('join-room', (roomId, userId) => {
    socket.join(roomId)
    socket.to(roomId).broadcast.emit('user-connected', userId)
  })
})

server.listen(3030)

this is my script.js

const socket = io('/')
const videoGrid = document.getElementById('video-grid')
const myVideo = document.createElement('video')
myVideo.muted = true

var peer = new Peer(undefined, {
  path: '/peerjs',
  host: '/',
  port: '3030'
})

let myVideoStream

navigator.mediaDevices
  .getUserMedia({
    video: true,
    audio: true
  })
  .then(stream => {
    myVideoStream = stream
    addVideoStream(myVideo, stream)

    socket.on('user-connected', userId => {
      connectToNewUser(userId, stream)
    })

    peer.on('call', call => {
      call.answer(stream)
      const video = document.createElement('video')
      call.on('stream', userVideoStream => {
        addVideoStream(video, userVideoStream)
      })
    })
  })

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

function connectToNewUser (userId, stream) {
  const call = peer.call(userId, stream)
  const video = document.createElement('video')
  call.on('stream', userVideoStream => {
    addVideoStream(video, userVideoStream)
  })
}

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

as i tried to console.log(userMediaStream) it returned nothing in this code block

   peer.on('call', call => {
      call.answer(stream)
      const video = document.createElement('video')
      call.on('stream', userVideoStream => {
        addVideoStream(video, userVideoStream)
      })
    })

i dont know how to deal with it, please tell me why, thank you so much 👍

[tryforjunk273824724]

Have you found the solution? I have the same problem.

[rockytechtips]

Change this in script.js

socket.on("user-connected", (userId) => {
      setTimeout(function () {
        connectToNewUser(userId, stream);
      }, 1000);
    });

with

 socket.on('user-connected', userId => {
    connectToNewUser(userId, stream)
  })

[umangagarwal11]

Change this in script.js

socket.on("user-connected", (userId) => {
      setTimeout(function () {
        connectToNewUser(userId, stream);
      }, 1000);
    });

with

 socket.on('user-connected', userId => {
    connectToNewUser(userId, stream)
  })

This still does not work Has anyone found a genuine solution?

[tryforjunk273824724]

No, the script.js change does not do anything. I do not have a solution.

[engesin]

just move user-connected and call event out of promise..

final code is as following..

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: false
}).then(stream => {
    myVideoStream = stream;
    addVideoStream(myVideo, stream)

})

peer.on('call', call => {
    console.log("answer");
    call.answer(myVideoStream)
    const video = document.createElement('video')
    call.on('stream', userVideoStream => {
        addVideoStream(video, userVideoStream)
    })
})

socket.on('user-connected', userId => {
    connectToNewUser(userId, myVideoStream)
})

[markwagdy]

I had the same problem I solved it by making the Peer constructor empty var peer=new Peer(undefined)

[engesin]

I had the same problem I solved it by making the Peer constructor empty var peer=new Peer(undefined)

Yes this works also 👍