call/static/index.js

// create Agora client
var client = AgoraRTC.createClient({ mode: "rtc", codec: "vp8" });

var localTracks = {
  audioTrack: null
};
var remoteUsers = {};
// Agora client options
var options = {
  appid: null,
  channel: null,
  uid: null,
  token: null
};

$('.leave-btn').hide();

$('#local-volume-range').on('input change', function() {
  if (localTracks.audioTrack)
    localTracks.audioTrack.setVolume(Math.floor($(this).val()**2));
});

$('.join-form').submit(async function (e) {
  e.preventDefault();
  console.log('ookkkk', this, $(this));
  console.log($(this).serializeArray());
  $(".join-btn").hide();
  $(this).serializeArray().forEach((v) => {
    options[v.name] = v.value;
  });
  options.uid = parseInt(options.uid);
  console.log(options);
  try {
    await join();
    $('.u-cnt').hide();
  } catch (error) {
    console.error(error);
    alert('出错啦\n' + error);
  } finally {
    $(this).find(".leave-btn").show();
  }
})

$(".leave-btn").click(function (e) {
  leave();
})

function set_soundmeter(ele, at) {
  $(ele).val(($(ele).val() + at.getVolumeLevel())/2);
}

async function join() {

  // add event listener to play remote tracks when remote user publishs.
  client.on("user-published", handleUserPublished);
  client.on("user-unpublished", handleUserUnpublished);

  // join a channel and create local tracks, we can use Promise.all to run them concurrently
  [ options.uid, localTracks.audioTrack] = await Promise.all([
    // join the channel
    client.join(options.appid, options.channel, options.token || null, options.uid),
    // create local tracks, using microphone and camera
    AgoraRTC.createMicrophoneAudioTrack(),
  ]);

  localTracks.audioTrack.intervalId = window.setInterval(set_soundmeter, 250, '#local-player progress', localTracks.audioTrack);

  // publish local tracks to channel
  await client.publish(Object.values(localTracks));
  console.log("publish success");
}

async function leave() {
  var track = localTracks.audioTrack;
  if(track) {
    track.stop();
    track.close();
    window.clearInterval(track.intervalId);
    track = undefined;
  }

  // remove remote users and player views
  remoteUsers = {};
  $("#remote-playerlist").html("");

  // leave the channel
  await client.leave();

  $(".join-btn").show();
  $('.leave-btn').hide();
  console.log("client leaves channel success");
}

async function subscribe(user, mediaType) {
  const uid = user.uid;
  // subscribe to a remote user
  await client.subscribe(user, mediaType);
  console.log("subscribe success");
  const player = $(`
    <div class="qbox" id="player-${uid}">
      <p class="player-name">${uid}</p>
      <progress value="0" max="1"></progress>
    </div>
  `);
  $("#remote-playerlist").append(player);
  user.audioTrack.play();
  user.intervalId = window.setInterval(set_soundmeter, 20, `#player-${uid} progress`, user.audioTrack);
}

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

function handleUserUnpublished(user) {
  window.clearInterval(user.intervalId);
  const id = user.uid;
  delete remoteUsers[id];
  $(`#player-${id}`).remove();
}