Twilio End Video Capture from Local Webcam

Question

I have a functioning Twilio video-chat application that is working as I expect, other than I cannot end the video-stream when a user hits the close button. I've looked through the Javascript quick-start and have tried the following implementations:
(attempting to use WebRTC's method, complains that Twilio.Media.MediaStream is undefined);

function endVidConf(room){
    console.log('Attempting to end Vid Conf');
    room.localParticipant.tracks.forEach(function(track) {
        var attachedElements = track.detach();
        attachedElements.forEach(function(element){
            element.remove();
        });
    });
    Twilio.Media.MediaStream.getAudioTracks()[0].stop();
    Twilio.Media.MediaStream.getVideoTracks()[0].stop();
    room.disconnect();
};

(using track.stop() -- the webcam is still on):

function endVidConf(room){
    console.log('Attempting to end Vid Conf');
    room.localParticipant.tracks.forEach(function(track) {
        var attachedElements = track.detach();
        attachedElements.forEach(function(element){
            element.remove();
        });
        track.stop();
    });
    room.disconnect();
};

Is there something simple I'm missing or are more details about my implementation needed?

Answer 1

I had to make sure all code changes were within Twilio.Connect.createLocalTracks().then(function(){...});
Attempting similar fixes elsewhere did NOT work. I had to assign local tracks to trackArray, then call stop() on the entries on that array.
Twilio.Video.createLocalTracks().then(function(localTracks) { ... trackArray = localTracks; trackArray[0].stop(); trackArray[1].stop(); ... })

The issue must have been with hoisting somehow.