如何在 twilio 视频通话中 mute/unmute pause/unpause 音频和视频

Question

init: function(config){
    var that = this;

    that.CONFIG = config;

    that.video = Twilio.Video;
    that.CONFIG.videoCall = true;
    that.CONFIG.audioCall =true;
    that.CONFIG.audioCallTrackCount =0;
    that.CONFIG.videoCallTrackCount =0;
    //alert message instance
    that.ALERT_MESSAGES = Object.create(AlertMessage).init();

    //ajaxing instance
    that.AJAXING = Object.create(Ajaxing);
    $(".fullscreen-btn").addClass('hide');
    window.videoCallObject = that;
    that.cachePageConstants();
    //that.getTwilioTokenFromRestAPI();

    return that;
},

cachePageConstants: function(){
   var that = this;
    $("#buttonCall").on("click", function(e){
       e.preventDefault();
       console.log("video button clicked");
        $("#buttonCall").hide();
        $("#audioCall").hide();
        $("#buttonCallEnd").show();
        $(".mute-btns").removeClass('hide');
        document.getElementById('connecting').innerHTML = '<span style="color:#69C4CB;"><img src="/resources/css/images/refresh_gif.gif" />Calling...</span>';
      that.CONFIG.videoCall =true;
      that.getTwilioTokenFromRestAPI();
    });
    $("#audioCall").on("click", function(e){
       e.preventDefault();
       console.log("Audio button clicked");
        $("#buttonCall").hide();
        $("#audioCall").hide();
        $("#buttonCallEnd").show();
        $(".mute-btns").removeClass('hide');
        document.getElementById('connecting').innerHTML = '<span style="color:#69C4CB;"><img src="/resources/css/images/refresh_gif.gif" />Calling...</span>';
      that.CONFIG.videoCall = false;
      that.CONFIG.audioCall =true;
      that.getTwilioTokenFromRestAPI();
    });

    $("#buttonRefresh").on("click", function(e){
        e.preventDefault();
        that.refreshPatientStatus(true);
    });

    $("#buttonCallEnd").on("click", function(e){
       e.preventDefault();
       console.log("Call end button clicked");
        $("#buttonCallEnd").hide();
        $("#buttonCall").show();
        $("#audioCall").show();
        $(".mute-btns").addClass('hide');
        that.leaveRoomIfJoined();
    });
    $('.fullscreen-btn').on('click', function(){
        $(this).parent().toggleClass('fullscreen');
    });
},
getTwilioTokenFromRestAPI: function(){
    var that = this,
    postRequestActions = {
        "successCallBack": that.onGettingToken,
        "loading": $("#connecting"),
        "ajaxType": "GET"
    };

    that.AJAXING.sendRequest(that.CONFIG.baseUrl+ "/services/v3/twilio/getTwilioToken?patientUuid="+UUID+"&providerUserId="+providerUserId+"&requestedFrom="+"COACH", null, postRequestActions);
},


onGettingToken: function(data){

    var that = window.videoCallObject;
    that.CONFIG.data=data;
    if(data){
          that.CONFIG.TOKEN = data.token;
          $("#connecting").removeClass("hide");
          $("#connecting").show();
          that.sendNotificationForcall(data);
          that.initTwilioCall(data.token,data.room);
    }else{
        that.ALERT_MESSAGES.showAlertMessage($("#terminatedMessage"), "Unable to get token from rest API", that.ALERT_MESSAGES.ERROR);
    }
},
//send Video call Notification to client.
sendNotificationForcall:function (data) {

  var that = this,
    requestActions = {
       "ajaxType": "GET"
    };
  var type = "CREATE_CALL"
  var callType;
  if(that.CONFIG.videoCall)
    callType = "VIDEO_CALL";
  else
    callType = "AUDIO_CALL";
  /*that.AJAXING.sendRequest(that.CONFIG.baseUrl+ "/services/v3/twilio/sendTwilioVideoNotification?patientId="+patId+"&providerUserId="+data.providerUserId+"&roomName="+data.roomName+"&callType="+callType+"&type="+type, null, requestActions);*/

},
 //send Video call Notification to client.
sendNotificationForCallCancel:function (data,type) {

  var that = this,
    requestActions = {
       "ajaxType": "GET"
    };
  var callType;
  if(that.CONFIG.videoCall)
    callType = "VIDEO_CALL";
  else
    callType = "AUDIO_CALL";

  /*that.AJAXING.sendRequest(that.CONFIG.baseUrl+ "/services/v3/twilio/sendTwilioVideoNotification?patientId="+patId+"&providerUserId="+data.providerUserId+"&roomName="+data.roomName+"&callType="+callType+"&type="+type, null, requestActions);*/

},
initTwilioCall: function (token,room) {
  var that = window.videoCallObject;
    that.video.connect(token, {audio: that.CONFIG.audioCall,
          name: room,
          video: that.CONFIG.videoCall
        }).then(function(room) {
         that.onParticipantConnected(room);

          //room.disconnect();
        }, function(error) {
            //console.error('Unable to connect to Room: ' +  error.message);
            that.ALERT_MESSAGES.showAlertMessage($("#terminatedMessage"), "Unable to get token from rest API", error.message);
    });


},
onParticipantConnected: function (room) {
   var that = window.videoCallObject;
    that.CONFIG.activeRoom=room;
    // Attach LocalParticipant's Tracks, if not already attached.
    that.CONFIG.previewContainer = document.getElementById('local-media');
    var previewContainer = that.CONFIG.previewContainer;

    if (!previewContainer.querySelector('video')) {
      document.getElementById('connecting').innerHTML = '<span style="color:Blue;"><img src="/resources/css/images/refresh_gif.gif" />Connecting...</span>';
        //that.attachParticipantTracks(room.localParticipant, previewContainer);

    }
  room.on('participantConnected', function(participant) {

        room.participants.forEach(function(participant) {
            //console.log("Already in Room: '" + participant.identity + "'");
            var previewContainer = document.getElementById('videoContainer');
            that.CONFIG.activeRoom.previewContainer=previewContainer;
            that.attachParticipantTracks(participant, previewContainer);
        });
            //console.log('A remote Participant connected: ', participant);
            $(".fullscreen-btn").removeClass('hide');
            document.getElementById('connecting').innerHTML = '<span style="color:green;">Call active</span>';

    });

    // When a Participant adds a Track, attach it to the DOM.
    room.on('trackAdded', function(track, participant) {
      if(track.kind =='video' && that.CONFIG.videoCall == false){
          that.CONFIG.videoCall = true;
          that.video.createLocalVideoTrack().then(function(localTrack) {

          room.localParticipant.addTrack(localTrack);
            that.attachParticipantTracks(room.localParticipant, that.CONFIG.previewContainer);
          });
        }else{
                room.localParticipant.tracks.forEach(track => {
                if(track.kind == 'video'){
                  track.enable();

                }
            });
            if(track.kind =='video')
                that.attachParticipantTracks(room.localParticipant, that.CONFIG.previewContainer);   

        }
       var previewContainer = document.getElementById('videoContainer');
       that.attachTracks([track], previewContainer);
    });
     // When a Participant removes a Track, detach it from the DOM.
    room.on('trackRemoved', function(track, participant) {
        if(track.kind =='video'){
          that.detachSingleTracks(room.localParticipant);
        }

        that.detachTracks([track]);
     });

    // When a Participant leaves the Room, detach its Tracks.
    room.on('participantDisconnected', function(participant) {
        $("#buttonCall").show();
        $("#audioCall").show();
        $("#buttonCallEnd").hide();
        $(".mute-btns").addClass('hide');
        that.detachParticipantTracks(participant);
         that.detachParticipantTracks(room.localParticipant);
         that.leaveRoomIfJoined();

    });

    // Once the LocalParticipant leaves the room, detach the Tracks
    // of all Participants, including that of the LocalParticipant.
    room.on('disconnected', function() {
        $("#buttonCall").show();
        $("#audioCall").show();
        $("#buttonCallEnd").hide();
        $(".mute-btns").addClass('hide');
        that.detachParticipantTracks(room.localParticipant);

        room.participants.forEach(that.detachParticipantTracks);

    });



},
// Attach the Participant's Tracks to the DOM.
attachParticipantTracks:function (participant, container) {
    var that = window.videoCallObject;
    var tracks = Array.from(participant.tracks.values());
    that.attachTracks(tracks, container);


},
// Attach the Tracks to the DOM.
attachTracks:function(tracks, container) {
  var that = window.videoCallObject;
  tracks.forEach(function(track) {
      if(track.kind == 'audio' && that.CONFIG.audioCallTrackCount == 0){
        container.appendChild(track.attach());
        that.CONFIG.audioCallTrackCount = 1;
      }else if(track.kind == 'video' && that.CONFIG.videoCallTrackCount == 0){
         //console.log("video");
        container.appendChild(track.attach());
        that.CONFIG.videoCallTrackCount = 1;
      }
      else{
        container.appendChild(track.attach());
      }
  });
},
// Detach the Tracks from the DOM.
detachTracks:function(tracks) {
 tracks.forEach(function(track) {

    track.detach().forEach(function(detachedElement) {
      detachedElement.remove();
    });

  });

  $("#connecting").addClass("hide");
  $(".fullscreen-btn").addClass('hide');

},
// Detach the Participant's Tracks from the DOM.
detachParticipantTracks:function(participant) {

    var that = window.videoCallObject;
    var tracks;
    if(participant.tracks !='undefined'){
      tracks = Array.from(participant.tracks.values());
    }
    that.detachTracks(tracks);
},

detachSingleTracks:function(participant) {

    var that = window.videoCallObject;
    var tracks;

    participant.tracks.forEach(track => {

      if(track.kind == 'video'){

        track.detach().forEach(function(detachedElement) {
          detachedElement.remove();
        });
        track.disable();
      }
  });

},


leaveRoomIfJoined:function() {
 var that = window.videoCallObject;
  if (that.CONFIG.activeRoom) {
      that.CONFIG.activeRoom.disconnect();

  that.sendNotificationForCallCancel(that.CONFIG.data,'CANCEL_CALL');
    //that.detachParticipantTracks(that.CONFIG.activeRoom.participant);
  }
}

}

JavaScript新手在此！

我正在尝试 mute/unmute 和 pause/unpause 音频和视频，但我不知道该怎么做。

我希望按钮在单击时 mute/unmute 音频和 pause/unpause 在我单击另一个时来自本地的视频 button.This 是完整的 javascript 代码。

现在请编辑并解决问题。

Answer 1

这里是 Twilio 开发人员布道者。

您没有包含实际设置调用的代码，因此我只能为您指出正确的方向。

加入房间后，可以从房间中的 localParticipant 对象访问本地媒体。当您需要时，localParticpant 是 Participant, so you can call on their audioTracks or videoTracks, which both implement LocalTrack 的实例。

如果你想静音，例如，你可以调用

room.localParticipant.audioTracks.forEach(function(trackId, track) {
  track.disable();
});

您可以对 videoTracks 执行相同的操作。要再次启用曲目，您将执行相同的操作，但使用 track.enable().

如果有帮助请告诉我。

Answer 2

可能我来晚了

不言自明，但是...首先您必须分配 localParticipant 音轨，然后检查它们是活动的（未静音）还是禁用的（静音）。如果轨道处于活动状态，请将其禁用以使其静音。如果轨道被禁用，启用它以取消静音。此代码允许您有一个简单的 "mute" 按钮，这是主要问题

function unmute_mute() {
    var localParticipant = room.localParticipant;
    localParticipant.audioTracks.forEach(function (audioTrack) {
    if ( audioTrack.isEnabled == true ) {
            audioTrack.disable();
    } else {
        audioTrack.enable();
    }
    });
}

Answer 3

I implemented in following way..Implementing separate methods for each action.


function muteVideo(){
    var localParticipant = activeRoom.localParticipant;
    localParticipant.videoTracks.forEach(function (videoTracks) {
        videoTracks.track.disable();

    });
}

function unMuteVideo(){
    var localParticipant = activeRoom.localParticipant;
    localParticipant.videoTracks.forEach(function (videoTracks) {
        videoTracks.track.enable();
    });
}

function unMuteAudio(){
    var localParticipant = activeRoom.localParticipant;
    localParticipant.audioTracks.forEach(function (audioTrack) {
        audioTrack.track.enable();
    });
}

function muteAudio(){
    var localParticipant = activeRoom.localParticipant;
    localParticipant.audioTracks.forEach(function (audioTrack) {
        audioTrack.track.disable();
    });
}

Answer 4

如果您使用的是 JavaScript v2，则以下代码可以正常工作。

function muteAudioHandler() {
  event.preventDefault();
  room.localParticipant.audioTracks.forEach(publication => {
    publication.track.disable();
  });
}

function unmuteAudioHandler() {
  event.preventDefault();
  room.localParticipant.audioTracks.forEach(publication => {
    publication.track.enable();
  });
}

function hideVideoHandler() {
  event.preventDefault();
  room.localParticipant.videoTracks.forEach(publication => {
    publication.track.disable();
  });
}

function showVideoHandler() {
  event.preventDefault();
  room.localParticipant.videoTracks.forEach(publication => {
    publication.track.enable();
  });
}

如何在 twilio 视频通话中 mute/unmute pause/unpause 音频和视频

how to mute/unmute pause/unpause audio and video in twilio video call

twilio

twilio-click-to-call

twilio-api