CODEWITHSUNDEEP
javascripttwiliotwilio-api
CSharpMinor
CSharpMinor

Reputation: 232

Twilio Video Chat JS Original user doesn't get participant track events

I have a WebRTC Go room, 1:1. My intention is for the each client to listen for mute and camera off events. However, only the second user to join the room gets the events. I took this from the docs, but it doesn't give the original, or first member of the room to get the later users events.

            Video.connect(token, { name: ROOM_NAME }).then((room) => {
            

           // remove local participant code for relevance.
           
            room.participants.forEach(participantConnected);
            room.on("participantConnected", participantConnected);

            room.participants.forEach(participant => {
                participant.on('trackSubscribed', track => {
                    track.on('disabled', () => {
                        console.log(track.kind);
                        if (track.kind === 'audio') {
                            console.log(`${participant.identity} disabled mic.`);
                        }
                        if (track.kind === 'video') {
                            console.log(`${participant.identity} disabled camera.`);
                        }
                    });

                    track.on('enabled', () => {
                        if (track.kind === 'audio') {
                            console.log(`${participant.identity} enabled mic.`);
                        }
                        if (track.kind === 'video') {
                            console.log(`${participant.identity} enabled camera.`);
                        }
                    });

                });
            });

            // removed disconnect code for relevance
        });




const participantConnected = (participant) => {
    const div = document.createElement('div');
    div.id = participant.sid;
    participant.on('trackSubscribed', track => trackSubscribed(div, track));
    participant.on('trackUnsubscribed', trackUnsubscribed);

    participant.tracks.forEach(publication => {
        if (publication.isSubscribed) {
            trackSubscribed(div, publication.track);
        }
    });

    participantsDiv.appendChild(div);
}


const trackSubscribed = (div, track) => {
    if (track.kind === 'video') {
        track.dimensions.width = '90%';
    }

    div.appendChild(track.attach());
}

const trackUnsubscribed = (track) => {
    track.detach().forEach(element => element.remove());
}

What am I missing for the original (first person to join the room) to receive the events?

Upvotes: 2

Views: 244

Answers (1)

CSharpMinor
CSharpMinor

Reputation: 232

The Solution

Add the following code to the participantsConnected method

participant.on('trackSubscribed', track => {
                track.on('disabled', () => {
                    console.log(track.kind);
                    if (track.kind === 'audio') {
                        console.log(`${participant.identity} disabled mic.`);
                    }
                    if (track.kind === 'video') {
                        console.log(`${participant.identity} disabled camera.`);
                    }
                });

                track.on('enabled', () => {
                    if (track.kind === 'audio') {
                        console.log(`${participant.identity} enabled mic.`);
                    }
                    if (track.kind === 'video') {
                        console.log(`${participant.identity} enabled camera.`);
                    }
                });

            });

Upvotes: 2

Related Questions