title: how to mute/unmute pause/unpause audio and video in twilio video call
body: <pre><code>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 = '&lt;span style="color:#69C4CB;"&gt;&lt;img src="/resources/css/images/refresh_gif.gif" /&gt;Calling...&lt;/span&gt;';
        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 = '&lt;span style="color:#69C4CB;"&gt;&lt;img src="/resources/css/images/refresh_gif.gif" /&gt;Calling...&lt;/span&gt;';
        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+"&amp;providerUserId="+providerUserId+"&amp;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+"&amp;providerUserId="+data.providerUserId+"&amp;roomName="+data.roomName+"&amp;callType="+callType+"&amp;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+"&amp;providerUserId="+data.providerUserId+"&amp;roomName="+data.roomName+"&amp;callType="+callType+"&amp;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 = '&lt;span style="color:Blue;"&gt;&lt;img src="/resources/css/images/refresh_gif.gif" /&gt;Connecting...&lt;/span&gt;';
          //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 = '&lt;span style="color:green;"&gt;Call active&lt;/span&gt;';
  
      });
  
      // When a Participant adds a Track, attach it to the DOM.
      room.on('trackAdded', function(track, participant) {
        if(track.kind =='video' &amp;&amp; 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 =&gt; {
                  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' &amp;&amp; that.CONFIG.audioCallTrackCount == 0){
          container.appendChild(track.attach());
          that.CONFIG.audioCallTrackCount = 1;
        }else if(track.kind == 'video' &amp;&amp; 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 =&gt; {
  
        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);
    }
  }
  </code></pre>
  
  <p>}</p>
  
  <p>JavaScript beginner here!</p>
  
  <p>I am trying to mute/unmute and pause/unpause audio and video but I have no clue how to do it.</p>
  
  <p>I want the button to mute/unmute the audio when clicked and pause/unpause video from my local when i click another button.This is the full javascript code.</p>
  
  <p>Now please edit this and solve the prolblem.</p>