Comment puis-je autoriser l'arrêt de la piste vidéo et renvoyer la piste vidéo en utilisant twilio vidéo en fonction des préférences de l'utilisateur?

Question

Je voudrais donner aux utilisateurs la fonctionnalité pour désactiver le videotrack s'ils le souhaitent. Puis-je utiliser LocalVideoTrack.disable() pour cela? Si oui, pouvez-vous me montrer un exemple?

Voici mon 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'; 
    }); 
} 

Donc, fondamentalement, lorsque l'utilisateur clciks le bouton à bascule-vidéo que je veux arrêter d'envoyer la vidéo si ima envoyer déjà ou commencer à envoyer des vidéo que je je ne suis pas. Comment puis-je obtenir le LocalVideoTrack pour cela?

Answer 1

Twilio développeur évangéliste ici. Vous pouvez utiliser LocalTrack.disable() dans ce cas. Ou, pour le rendre plus facile, vous pouvez passer un argument booléen à LocalTrack.enable([enabled]) qui suspend ou interrompt la piste. Voici comment vous y parviendrez:

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); 
    }); 
    }) 
} 

Faites-moi savoir si cela peut vous aider.