i was trying to make a streaming website using Agora.io in my JavaScript, i made a player template which will add to my webpage every time a new user enters. the client.on method should detect a new user coming & call back the function which should add the new user to the stream!

const APP_ID = "fe45f285661941ada5ef5d451fe8f626"
const CHANNEL = "main"
const TOKEN = "006fe45f285661941ada5ef5d451fe8f626IABxEPnj4KCl8i4+gcrg2F7Cc+nmjmOiRWq49ICnSOHfdGTNKL8AAAAAEACXVkQu42OcYgEAAQC9Y5xi"

const client = AgoraRTC.createClient({mode:"rtc",codec:"vp8"})

let localTracks = []
let remoteUsers = {}
let UID

let joinAndDisplayLocalStreams = async ()=> {

    client.on("user-published",handleUserJoined)

    UID = await client.join(APP_ID,CHANNEL,TOKEN,null)

    localTracks = await AgoraRTC.createMicrophoneAndCameraTracks()
    let player = ` <div class="video-container" id="user-container-${UID}">
                     <div class="name-wrapper"><span class="user-name">My name</span></div>
                         <div class="video-player" id="user-${UID}"></div>
                </div>`
    document.getElementById("video-streams").insertAdjacentHTML("beforeend",player)
    
    localTracks[1].play(`user-${UID}`)
    await client.publish([localTracks[0],localTracks[1]])
}

let handleUserJoined = async(user,mediaType)=>{
    remoteUsers[user.uid]= user
    await client.subscribe(user,mediaType)
    console.log(mediaType)

    if(mediaType==="video"){
        let player = document.getElementById(`user-container-${user.uid}`)
        if(player!=null){
            player.remove()
        }
        player = `<div class="video-container" id="user-container-${user.uid}">
                     <div class="name-wrapper"><span class="user-name">My name</span></div>
                         <div class="video-player" id="user-${user.uid}"></div>
                </div>`

        document.getElementById("video-streams").insertAdjacentElement("beforeend",player)
        user.videoTrack.play(`user-${user.uid}`)
    }
    if(mediaType==="audio"){
        user.audioTrack.play()
    }
}

joinAndDisplayLocalStreams()