Continue Button isn't working Please help as soon as possible

I am trying to make a video meeting web app but don’t know why this button isn’t working
image


Which part is not working? Did you verify the event listener is wired up properly on the button? Try that first. Next, you probably need to dive into the socket.emit method to see what’s going on. Try wrapping the socket.emit call in a try/catch and logging the error result:

   try {
       socket.emit("join room", roomid, username);
   }  catch (error) {
       console.log('Error on socket.emit :: ', error)
   }


})

I am actually very new to coding so I don’t know much about it :sweat_smile:
Can you please elaborate more clearly?

1 Like

No worries.

The function that runs after socket.emit("join room", roomid, username); runs is a large function. My advice is to step through that code and try to figure out what is not working:

socket.on(‘join room’, async (conc, cnames, micinfo, videoinfo) => {
socket.emit(‘getCanvas’);
if (cnames)
cName = cnames;

if (micinfo)
    micInfo = micinfo;

if (videoinfo)
    videoInfo = videoinfo;


console.log(cName);
if (conc) {
    await conc.forEach(sid => {
        connections[sid] = new RTCPeerConnection(configuration);

        connections[sid].onicecandidate = function (event) {
            if (event.candidate) {
                console.log('icecandidate fired');
                socket.emit('new icecandidate', event.candidate, sid);
            }
        };

        connections[sid].ontrack = function (event) {

            if (!document.getElementById(sid)) {
                console.log('track event fired')
                let vidCont = document.createElement('div');
                let newvideo = document.createElement('video');
                let name = document.createElement('div');
                let muteIcon = document.createElement('div');
                let videoOff = document.createElement('div');
                videoOff.classList.add('video-off');
                muteIcon.classList.add('mute-icon');
                name.classList.add('nametag');
                name.innerHTML = `${cName[sid]}`;
                vidCont.id = sid;
                muteIcon.id = `mute${sid}`;
                videoOff.id = `vidoff${sid}`;
                muteIcon.innerHTML = `<i class="fas fa-microphone-slash"></i>`;
                videoOff.innerHTML = 'Video Off'
                vidCont.classList.add('video-box');
                newvideo.classList.add('video-frame');
                newvideo.autoplay = true;
                newvideo.playsinline = true;
                newvideo.id = `video${sid}`;
                newvideo.srcObject = event.streams[0];

                if (micInfo[sid] == 'on')
                    muteIcon.style.visibility = 'hidden';
                else
                    muteIcon.style.visibility = 'visible';

                if (videoInfo[sid] == 'on')
                    videoOff.style.visibility = 'hidden';
                else
                    videoOff.style.visibility = 'visible';

                vidCont.appendChild(newvideo);
                vidCont.appendChild(name);
                vidCont.appendChild(muteIcon);
                vidCont.appendChild(videoOff);

                videoContainer.appendChild(vidCont);

            }

        };

        connections[sid].onremovetrack = function (event) {
            if (document.getElementById(sid)) {
                document.getElementById(sid).remove();
            }
        }

        connections[sid].onnegotiationneeded = function () {

            connections[sid].createOffer()
                .then(function (offer) {
                    return connections[sid].setLocalDescription(offer);
                })
                .then(function () {

                    socket.emit('video-offer', connections[sid].localDescription, sid);

                })
                .catch(reportError);
        };

    });

    console.log('added all sockets to connections');
    startCall();

}
else {
    console.log('waiting for someone to join');
    navigator.mediaDevices.getUserMedia(mediaConstraints)
        .then(localStream => {
            myvideo.srcObject = localStream;
            myvideo.muted = true;
            mystream = localStream;
        })
        .catch(handleGetUserMediaError);
}

})

1 Like

@adonoustech (https://forum.freecodecamp.org/u/adonoustech) This is very useful! :smile: