Removing video of the early joined user from the latter joined users's screen when the early joined user left the video in socket.io

Question

I am trying to implement the video call functionality in socket io. The issue is that wheneverthe previously joined user lefts the call, his video is not removed from the screen of the latter joined user.It remains in paused mode. I am getting difficulty in removing the video of the early joined users from the latter joined users screen. Please help me in resolving this issue.The server-side and client-side code is attached here. Thanks in advance Server side code

//creating an express server
const express = require("express")

// used to run that express server
const app = express()

//Creating a server for running socketio
const server = require('http').Server(app)

// Passing the server to socketio
// So that we specify which server we are using
const io = require('socket.io')(server)

//Creating a dynamic roomid
const { v4: uuidV4 } = require('uuid')



//setting the template engine
app.set('view engine', 'ejs')

//Applowing the app to use public folder4
// For all js css and html files
app.use(express.static('public'))



app.get('/', (req, res) => {
    //We dont want a home page for the system
    //redirecting it to a room
    res.redirect(`/${uuidV4()}`)
})

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

// Whenever the user is trying to connect using the socket
io.on('connection', socket => {
    socket.on('join-room', (roomId, userId) => {

        //Joining the room
        socket.join(roomId)


        console.log("User is joining")

        //We want to send the whole room except the user 
        //Whenever the new user joins the room


        socket.broadcast.to(roomId).emit('user-connected', userId)

        socket.on('disconnect', () => {
            //We want to broadcast on exiting of a person
            socket.broadcast.to(roomId).emit('user-disconnected', userId)
        })

    })
})

server.listen(1000, () => {
    console.log("server started")
})

Client side code

const socket = io('/')
const videoGrid = document.getElementById('video-grid')


//Connecting to the peer server
const myPeer = new Peer(undefined, {
    host: '/',
    port: '1001'
});





const myVideo = document.createElement('video')
// so that our sound is not coming to ourself
myVideo.muted = true

const peers = {}


//sending the video and audio to all
navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
}).then(stream => {
    console.log("creating the video element")
    //adding our stream




    addVideoStream(myVideo, stream)


    myPeer.on('call', call => {


        //taking the other users video
        call.answer(stream)


        const video = document.createElement('video')
        //Taking the user stream and adding that stream 
        call.on('stream', userVideoStream => {
            //Adding our video elemnt to the user stream
            addVideoStream(video, userVideoStream)
        })
    })
    // io.in('user-connected', userId => {
    socket.on('user-connected', userId => {


        console.log("user connected " + userId)
        const fc = () => connectToNewUser(userId, stream)
        timerid = setTimeout(fc, 1000)

    })



})


socket.on('user-disconnected', userId => {
    console.log("Disconnect user")
    //Closing the connection
    //Call.close()


    if (peers[userId])
        peers[userId].close()


})

//whenever a new user connects to the call
myPeer.on('open', id => {
    //Sending the event to the server

    console.log("Join room with id")
    socket.emit('join-room', ROOM_ID, id)

})



function connectToNewUser(userId, stream) {

    console.log("Connect to new user")

    //calling the new user and sending this stream
    const call = myPeer.call(userId, stream)
    const video = document.createElement('video')
    call.on('stream', userVideoStream => {
        console.log("Adding the video stream")
        addVideoStream(video, userVideoStream)
    })
    call.on('close', () => {
        console.log("Call removed")
        video.remove()
    })
    peers[userId] = call
    console.log("Peer information")
    console.log(peers)

}




//Creating different id using peerjs which is based on webrtc

function addVideoStream(video, stream) {
    //playing our video
    video.srcObject = stream
    //Whenever the video is loaded on the page play the video
    video.addEventListener('loadedmetadata', () => {
        video.play()
        console.log("adding stream")

    })
    videoGrid.append(video)

}

Answer 1

Whenever any socket disconnect, I'm emitting an event called 'clear-grid', from server side.

socket.on('disconnect', () => {
    socket.broadcast.emit('clear-grid');
});

At client-side, I'm removing that peer's video which was in 'videoGrid' div, I have also separated self-video div and other person's video div so I can easily remove other person's video whenever he/she left.

socket.on('clear-grid', () => {
    videoGrid.removeChild(videoGrid.firstElementChild);
});

Hope this would help you