Agora Voice(RTC)

  var
  rtc = AgoraRTC.createClient({ mode: "live", codec: "vp8" }),
  localTracks = { audioTrack: null },
  localTrackState = { audioTrackEnabled: true },
  remoteUsers = {},
  options = { appid: null, channel: null, uid: null, token: null, role: null },
  volumeLevel = 50,
  overlay = document.querySelector(".overlay");

  var formdata = new FormData();
  formdata.append("room_id", room_id);
  fetch('/source/controller/getRole.php', {
    method: 'POST',
    body: formdata
  }).then(async function(response) {
      response.text().then(async function(result) {
        var obj = JSON.parse(result);
        options.role = obj.role;
      })
  }).catch(async function(err) {
    console.error(err);
  });

  //AGORA TOKEN//
  var tokenStage="entering";
  var agoraService="RTC";
  async function getToken(tokenStage,agoraService,room_id) {
    var formdata = new FormData();
    formdata.append("room_id",room_id);
    switch (agoraService) {
      case "RTC":
      var url="RtcTokenGenerator";
      break;
      case "RTM":
      var url="RtmTokenGenerator";
      break;
    }
    fetch('/source/controller/agora/tokengenerator/'+url+'.php', {
      method: 'POST',
      body: formdata
    }).then(async function(response) {
      response.text().then(async function(result) {
        var json = JSON.parse(result);
        switch (tokenStage) {
          case "entering":
            options.appid = json.app_id;
            options.token = json.token;
            options.uid = json.user_id;
            options.channel = json.room_id;
            sessionStorage.setItem("room", true);
            await initRTc();
            break;

          case "renewal":
            var token = json.token;
            await rtc.renewToken(token);
            break;
        }
      })
    }).catch(async function(err) {
      console.error(err);
    });
  }
  getToken(tokenStage,agoraService,room_id);

  //INIT RTC//
  var handleUser = ()=>{
    rtc.on("user-published", handleUserPublished);
    rtc.on("user-joined", handleUserJoined);
    rtc.on("user-left", handleUserLeft);
  }

  async function initRTc() {
    rtc.setClientRole(options.role);
    handleUser;
    await rtc.join(options.appid, options.channel, options.token, options.uid || null);
    if (options.role === "host") {
      localTracks.audioTrack = await AgoraRTC.createMicrophoneAudioTrack();
      muteAudio();
      await rtc.publish(Object.values(localTracks));
    }
    rtc.enableAudioVolumeIndicator();
  }

  var initVolumeIndicator = async () => {
    AgoraRTC.setParameter('AUDIO_VOLUME_INDICATION_INTERVAL', 200);
    rtc.on("volume-indicator", volumes => {
      volumes.forEach((volume) => {
        //console.log(`UID ${volume.uid} Level ${volume.level}`);
        var attendee_id = document.querySelector("." + volume.uid);
        try{
          if (options.uid == volume.uid && volume.level > volumeLevel) {
            attendee_id.classList.add("speaking");
          } else if (options.uid == volume.uid && volume.level < volumeLevel) {
            attendee_id.classList.remove("speaking");
          }
        }catch(error){
          console.error(error)
        }
      });
    })
  }
  initVolumeIndicator();

  //subscribe to a remote user
  async function subscribe(user, mediaType) {
    const uid = user.uid;
    await rtc.subscribe(user, mediaType);
    console.log("Successfully subscribed.");
    if (mediaType === 'audio') {
      user.audioTrack.play();
    }
  }

  //Add a user who has subscribed to the live channel to the local interface.
  function handleUserPublished(user, mediaType) {
    const id = user.uid;
    remoteUsers[id] = user;
    subscribe(user, mediaType);
  }

  function handleUserJoined(user, mediaType) {
    const id = user.uid;
    remoteUsers[id] = user;
    subscribe(user, mediaType);
  }

  function handleUserLeft(user) {
    const id = user.uid;
    delete remoteUsers[id];
  }

  async function leaveChannels() {
    for (trackName in localTracks) {
      var track = localTracks[trackName];
      if (track) {
        track.stop();
        track.close();
        localTracks[trackName] = undefined;
      }
      sessionStorage.removeItem("room");
      sessionStorage.removeItem("memberNames");
      remoteUsers = {};
      await rtc.leave();
      console.log("You left the room'" + options.channel + "'");
    }
  }
  leaveChannels();

  function toggleMic() {
    document.getElementById("mic-icon").addEventListener("click", function() {
      if (localTrackState.audioTrackEnabled) {
        muteAudio();
      } else {
        unmuteAudio();
      }
    })
  }
  toggleMic();

  async function muteAudio() {
    if (!localTracks.audioTrack) return;
    await localTracks.audioTrack.setEnabled(false);
    localTrackState.audioTrackEnabled = false;
    var mic_icon = document.getElementById("mic-icon");
    mic_icon.innerHTML = "mic_off";
    mic_icon.classList.add("text-error");
    if (!mic_icon.classList.contains("c-hand")) {
      mic_icon.classList.add("c-hand");
    };
  }
  async function unmuteAudio() {
    if (!localTracks.audioTrack) return;
    await localTracks.audioTrack.setEnabled(true);
    localTrackState.audioTrackEnabled = true;
    var mic_icon = document.getElementById("mic-icon");
    mic_icon.innerHTML = "mic";
    mic_icon.classList.remove("text-error");
    mic_icon.classList.add("text-success");
  }