Как разрешить остановку видеодорожки и повторную отправку видеодорожки с помощью видео twilio в зависимости от предпочтений пользователя?

Я хотел бы дать пользователям возможность отключить видеодорожку, если они того пожелают. Могу ли я использовать LocalVideoTrack.disable() для этого? Если да, можете ли вы показать мне пример?

Вот мой код:

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

Таким образом, в основном, когда пользователь нажимает кнопку переключения видео, я хочу остановить отправку видео, если я уже отправляю, или начать отправку видео, а я нет. Как я могу получить LocalVideoTrack для этого?


person lightbringer    schedule 12.09.2017    source источник


Ответы (1)


Евангелист разработчиков Twilio здесь.

Вы действительно можете использовать LocalTrack.disable() в этом случае. Или, чтобы упростить задачу, вы можете передать логический аргумент в LocalTrack.enable([enabled]), который приостанавливает или возобновляет воспроизведение трека. Вот как вы этого добьетесь:

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

Дайте мне знать, поможет ли это вообще.

person philnash    schedule 12.09.2017
comment
Я использовал код, которым вы поделились, и когда я нажимаю кнопку, он выдает эту ошибку: Uncaught TypeError: localParticipant.videoTracks.values(...).forEach не является функцией - person lightbringer; 12.09.2017
comment
вот код $('#toggle-video').click(function(e){ console.log('toggle called'); videoEnabled = !videoEnabled; localParticipant.videoTracks.values().forEach(function(videoTrack) { videoTrack.enable(false); }); }); - person lightbringer; 12.09.2017
comment
Извиняюсь, попробую воспроизвести и исправить. - person philnash; 12.09.2017
comment
Оказывается, вам вообще не нужен .values()! videoTracks.forEach будет работать. Я обновил свой ответ. - person philnash; 12.09.2017