How can I allow stop the video track and resend the video track using twilio video depending on the user preference?

Question

I would like to give users the functionality to disable the videotrack if they so wish. Can I use LocalVideoTrack.disable() for this? If yes, can you show me an example?

Here is my code:

 navigator.mediaDevices.getUserMedia({
        audio: true,
        video: {width: 320}
    })
        .then(function (mediaStream) {
            var connectOptions = {
                name: roomName,
                logLevel: 'off',
                tracks: mediaStream.getTracks()
            };
            return Video.connect(data.token, connectOptions);
        })
        .then(roomJoined, function (error) {
            log('Could not connect to Twilio: ' + error.message);
        });


    // Bind button to leave Room.
    document.getElementById('button-leave').onclick = function () {
        log('Leaving room...');
        leaveRoomIfJoined();
    };
});

// Successfully connected!
function roomJoined(room) {
    //To collect the timing data for billing purposes
    $.post('/classrooms/logs/joinedroom/' + lessonId + '/' + identity, function (data) {
        console.log(data);
    });
    activeRoom = room;

    log("Joined" + room);
    log(new Date().getMinutes());

    // Attach LocalParticipant's Tracks, if not already attached.
    // var previewContainer = document.getElementById('local-media');
    // if (!previewContainer.querySelector('video')) {
    //     attachParticipantTracks(room.localParticipant, previewContainer);
    // }

    // Attach the Tracks of the Room's Participants.
    room.participants.forEach(function (participant) {
        log("Already in Room: '" + participant.identity + "'");
        var previewContainer = document.getElementById('remote-media');
        attachParticipantTracks(participant, previewContainer);
    });

    // When a Participant joins the Room, log the event.
    room.on('participantConnected', function (participant) {
        console.log(participant);
        log("Joining: '" + participant.identity + "'");
    });

    // When a Participant adds a Track, attach it to the DOM.
    room.on('trackAdded', function (track, participant) {
        log(participant.identity + " added track: " + track.kind);
        var previewContainer = document.getElementById('remote-media');
        var h = previewContainer.offsetWidth * 0.75 + "px";
        if (participant.identity === classroom.teacher._id) {
            attachTracks([track], previewContainer);

            previewContainer.style.height = h;

            // } else {
            //     if(track.kind == 'audio') {
            //         console.log(typeof(track.kind));
            //         attachTracks([track], previewContainer);
            //     }
        }
    });

    // When a Participant removes a Track, detach it from the DOM.
    room.on('trackRemoved', function (track, participant) {
        log(participant.identity + " removed track: " + track.kind);
        detachTracks([track]);
    });

    // When a Participant leaves the Room, detach its Tracks.
    room.on('participantDisconnected', function (participant) {
        log("Participant '" + participant.identity + "' left the room");
        log(new Date().getMinutes());
        detachParticipantTracks(participant);
    });
    $('#toggle-video').click(function(e){
        console.log(room.localParticipant.videoTracks);
        // room.localParticipant.videoTracks.disable();
    });
    // Once the LocalParticipant leaves the room, detach the Tracks
    // of all Participants, including that of the LocalParticipant.
    room.on('disconnected', function () {
        $.post('/classrooms/logs/leftroom/' + lessonId + '/' + identity, function (data) {
            detachParticipantTracks(room.localParticipant);
            room.participants.forEach(detachParticipantTracks);
            activeRoom = null;
            // document.getElementById('button-join').style.display = 'inline';
            document.getElementById('button-leave').style.display = 'none';
        });
        log('Left');
        log(new Date().getMinutes());
        detachParticipantTracks(room.localParticipant);
        room.participants.forEach(detachParticipantTracks);
        activeRoom = null;
        // document.getElementById('button-join').style.display = 'inline';
        document.getElementById('button-leave').style.display = 'none';
    });
}

So basically when the user clciks the toggle-video button I want to stop sending video if i ma already sending or start sending video I i am not. How can I get a hold of the LocalVideoTrack for this?

Answer 1

Twilio developer evangelist here.

You can indeed use LocalTrack.disable() in this case. Or, to make it easier, you can pass a boolean argument to LocalTrack.enable([enabled]) which pauses or unpauses the track. Here's how you would achieve that:

function roomJoined(room) {
  const localParticipant = room.localParticipant;
  let videoEnabled = true;

  $('#toggle-video').click(function(e) {
    videoEnabled = !videoEnabled;
    localParticipant.videoTracks.forEach(function(videoTrack) {
      videoTrack.enable(videoEnabled);
    });
  })
}

Let me know if that helps at all.