You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
3.1 KiB
121 lines
3.1 KiB
// 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();
|
|
}
|