Video call getting disconnected after 5-10 min and throwing MaxListenersExceededWarning

[likhit-vivek]

This issue is happening when 3 of us joined the call. Using latest twilio JavaScript version.

This is the error: bundle.js:11160 MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 "trackSubscribed" listeners added. Use emitter.setMaxListeners() to increase limit. _addListener @ bundle.js:11160 3bundle.js:583 Dominant speaker changed: bundle.js:11160 MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 "trackSubscribed" listeners added. Use emitter.setMaxListeners() to increase limit. _addListener @ bundle.js:11160

This is the code where I'm using trackSubscribed event:

                room.participants.forEach(participant => {
                    parent = document.createElement('span');
                    parent.id = participant.sid;
                    childOne = document.createElement('span');
                    childOne.id = participant.sid + 'video';
                    childTwo = document.createElement('br');
                    childThree = document.createElement('span');
                    childFour = document.createElement('span');
                    childFour.id = participant.sid + 'audio';

                    childThree.innerHTML = participant.identity;

                    participant.tracks.forEach(publication => {
                        if (publication.isSubscribed) {
                            // childOne.innerHTML = '';
                            if (publication.kind == 'video' && track.dimensions.width == track.dimensions.height) childOne.appendChild(publication.track.attach());
                            if (publication.kind == 'audio') childFour.appendChild(publication.track.attach());
                        }

                        publication.on('unsubscribed', () => {
                            console.log("Video disabled remotely!");
                            var content = `<span id="dummy">`;
                            $('#' + participant.sid + 'video').html(content);
                        });
                    });

                    participant.on('trackSubscribed', track => {
                        if (track.kind == 'video') {
                            videoElement = document.getElementById(participant.sid + 'video');
                            videoElement.innerHTML = '';
                            videoElement.appendChild(track.attach());
                        } else if (track.kind == 'audio') {
                            audioElement = document.getElementById(participant.sid + 'audio');
                            audioElement.innerHTML = '';
                            audioElement.appendChild(track.attach());
                        }
                    });

                    parent.appendChild(childOne);
                    parent.appendChild(childTwo);
                    parent.appendChild(childThree);
                    parent.appendChild(childFour);
                    parent.appendChild(childTwo);
                    document.getElementById('remote-media-div').appendChild(parent);
                });

                room.on('participantConnected', participant => {
                    myLogger(`A remote Participant connected: ${participant}`);

                    parent = document.createElement('span');
                    parent.id = participant.sid;
                    childOne = document.createElement('span');
                    childOne.id = participant.sid + 'video';
                    childTwo = document.createElement('br');
                    childThree = document.createElement('span');
                    childFour = document.createElement('span');
                    childFour.id = participant.sid + 'audio';

                    childThree.innerHTML = participant.identity;

                    participant.tracks.forEach(publication => {
                        if (publication.isSubscribed) {
                            // childOne.innerHTML = '';
                            if (publication.kind == 'video' && track.dimensions.width == track.dimensions.height) childOne.appendChild(publication.track.attach());
                            if (publication.kind == 'audio') childFour.appendChild(publication.track.attach());
                        }

                        publication.on('unsubscribed', () => {
                            console.log("Video disabled remotely!");
                            var content = `<span id="dummy">`;
                            $('#' + participant.sid + 'video').html(content);
                        });
                    });

                    participant.on('trackSubscribed', track => {
                        if (track.kind == 'video') {
                            videoElement = document.getElementById(participant.sid + 'video');
                            videoElement.innerHTML = '';
                            videoElement.appendChild(track.attach());
                        } else if (track.kind == 'audio') {
                            audioElement = document.getElementById(participant.sid + 'audio');
                            audioElement.innerHTML = '';
                            audioElement.appendChild(track.attach());
                        }
                    });

                    parent.appendChild(childOne);
                    parent.appendChild(childTwo);
                    parent.appendChild(childThree);
                    parent.appendChild(childFour);
                    parent.appendChild(childTwo);
                    document.getElementById('remote-media-div').appendChild(parent);
                });

                room.on('dominantSpeakerChanged', participant => {
                    if (participant) {
                        myLogger('Dominant speaker changed: ', participant.identity);
                        document.getElementById('dominant-speaker').innerHTML = '';
                        parent = document.createElement('span');
                        parent.id = participant.sid + 'speaker';
                        childOne = document.createElement('span');
                        childOne.id = participant.sid + 'speakervideo';
                        childTwo = document.createElement('span');
                        childTwo.id = participant.sid + 'speakeraudio';

                        participant.tracks.forEach(publication => {
                            if (publication.isSubscribed) {
                                if (publication.kind == 'video') {
                                    childOne.innerHTML = '';
                                    childOne.appendChild(publication.track.attach());
                                } else if (publication.kind == 'audio') {
                                    childTwo.innerHTML = '';
                                    childTwo.appendChild(publication.track.attach());
                                }
                            }
                        });

                        parent.appendChild(childOne);
                        parent.appendChild(childTwo)
                        document.getElementById('dominant-speaker').appendChild(parent);
                    }
                });

[manjeshbhargav]

Hi @likhit-vivek ,

Can you share the function code that contains this code block? From an initial reading, I don't see why "trackSubscribed" is listened to 11 times.

Thanks,

Manjesh Malavalli JSDK Team

[likhit-vivek]

Even I couldn't understand why it was happening as I was subscribing to only the events mentioned in twilio video docs. But it always happened previously. I was able to fix it by adding this line of code inside the connect function immediately after a user/client joins the room

room.removeAllListeners(['participantConnected', 'participantDisconnected', 'dominantSpeakerChanged', 'disconnected']);

You can close this issue now.

[csellis]

I'm getting this same issue and removeAllListeners isn't helping. Mine is adding 11 listeners as well, which is odd.

[chanuuuu]

Any update on this issue?