I have web page with the following javascript code.

My code is listening to participant connected event on a certain room.

Whenever a new participant is connected, I need to show his remote video.

Here is my code :

    var LastTrack;

    function trackSubscribed(HtmlParent, track) {   
        LastTrack = track;  

        console.log("the track width is : " + track.dimensions.width);
        console.log("the track Height is : " + track.dimensions.height);
        HtmlParent.appendChild(track.attach()); 
      }
      
    function participantConnected(HtmlParent, participant) {    
        participant.tracks.forEach(publication => {
          if (publication.isSubscribed) {
            trackSubscribed(HtmlParent, publication.track);
          }
          else { console.log('Track not subscribed'); }
          
        });
        
        participant.on('trackSubscribed',   track => trackSubscribed(HtmlParent, track));
        
      }

This code never works the first time. The remote video is not added the html dom and in the logs I have :

the track width is : null
the track height is : null

However if I call the manually (few seconds later) the function trackSubscribed(HtmlParent, LastTrack) then it works. The video is shown as expected and the dimensions are correct :

the track width is : 640
the track height is : 480

It's like when I'm trying to add the track to the html dom the first time, the track is not "ready".

Does anyone know what am I doing wrong here ?

Thanks. Cheers,