Twilio room does not disconnect / Webcam LED remains on

Question

I am implementing twilio video into my js application. The behavior I would like is that should the remote participant disconnect from the room the local participant should also leave the room and the webcam should deactivate.

However what is happening is that the participant leaves and the webcam LED is still on and it still seems to stream to twilio until I close the browser.

How would I go about resolving this?

   function connectVideo(accessToken){

            const Video = Twilio.Video;

            Video.connect(accessToken, { name: customerToken}).then(room => {
                console.log('Connected to Room "%s"', room.name);
                inCall = 1

                room.participants.forEach(participantConnected);
                room.on('participantConnected', participantConnected);
                room.once('participantDisconnected', participant => {
                    console.log(`Participant "${participant.identity}" has disconnected from the Room!`);
                    room.disconnect();
                   var div = document.getElementById(participant.sid);
                    div.remove()
                    inCall = 0
                });

                room.on('disconnected', room => {
                    // Detach the local media elements
                    room.localParticipant.tracks.forEach(publication => {
                        const attachedElements = publication.track.detach();
                        console.log("unsubscribed from: " + publication.track)
                        attachedElements.forEach(element => element.remove());
                    });
                });
            });

            function participantConnected(participant) {
                console.log('Participant "%s" connected', participant.identity);
                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);
                    }
                });
                document.body.appendChild(div);
            }
            function trackSubscribed(div, track) {
                div.appendChild(track.attach());
            }

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

Answer 1

Twilio developer evangelist here.

When your participant disconnects from the room, you are currently detaching the tracks. Attaching and detaching only refers to displaying and removing the video and audio elements from the DOM. To fully stop the media, thus extinguishing the camera LED, you need to call stop() on each of the tracks too.

               room.localParticipant.tracks.forEach(publication => {
                    publication.track.stop();
                    const attachedElements = publication.track.detach();
                    console.log("unsubscribed from: " + publication.track)
                    attachedElements.forEach(element => element.remove());
                });